JavaScriptやSEO対策、CSS、Movable Typeなどの情報を発信

to-R

Lightboxを使い画像を拡大表示する。

【PR】初心者でも安心なレンタルサーバー。２６３円から使えます。
【PR】HP登録でSEO対策！アクセスアップにコチラ！

Lightboxは、画像をクリックすると拡大画像を表示するJavaScriptライブラリーです。

サンプル

設置は簡単。JavaScriptの知識さえほとんど必要ないです。

まずLightbox JS V2.0よりLightbox JS V2.0をダウンロードします。
ページの真ん中あたりにあるDownload:Lightbox JS V2.0をクリックしてダウンロードしてください。

ダウンロードしたファイルは解凍後サーバにアップしてください。

次はLightBoxを設置するページのhead要素内に、次のコードを記述します。

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

サムネイルに、次のコードを記述します。

<a href="拡大後の写真のurl" rel="lightbox"><img src="サムネイルのurl" /></a>

これでサムネイルがクリックされた場合に拡大画像が表示されるようになります。

関連エントリー

一番簡単な画像置換の方法-imageReplace.js-
アルファ画像を扱うalphafilter.jsライブラリ
AjaxやJavaScriptのライブラリー
javascriptで文字にドロップシャドウをつける方法
吹き出し方式のツールチップテキスト作成JavaScriptライブラリ

スポンサードリンク

• 日時: 2006年8月 3日 22:15
• javascript

«ＷＥＢサイトがCMを超える日 | メイン | height100%のボックスを作成する。»

このエントリーのトラックバックURL

http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/332

トラックバック内容

» Movable Type 4.12対応のプラグイン情報 from heeha.ws::blog
エントリーの関連付けを行うプラグイン 関連記事をエントリーに表示するプラグイン：Movable Type(MT)の無料テンプレート Movable ...

トラックバック時刻: 2008年7月 8日 19:31

コメントを投稿

名前:

メールアドレス:

URL:

この情報を登録しますか?

コメント:

認証:

Captcha:

画像の中に見える文字を入力してください。

検索

フィード

 RSSリーダーで購読する

スポンサードリンク

カテゴリー

• ajax [4]
• amazon [3]
• books [42]
• css [51]
• design [19]
• dialy [61]
• direction [2]
• firefox [15]
• flash [5]
• freelance [2]
• google [12]
• html [15]
• javascript [57]
• mac [2]
• movable type [61]
• php [29]
• sem [9]
• seo [54]
• server [9]
• spry [19]
• sql [9]
• tools [32]
• wordpress [9]

アーカイブ

• 2008年7月 [6]
• 2008年6月 [10]
• 2008年5月 [18]
• 2008年4月 [16]
• 2008年3月 [18]
• 2008年2月 [17]
• 2008年1月 [14]
• 2007年12月 [23]
• 2007年11月 [25]
• 2007年10月 [26]
• 2007年9月 [28]
• 2007年8月 [14]
• 2007年7月 [11]
• 2007年6月 [16]
• 2007年5月 [14]
• 2007年4月 [15]
• 2007年3月 [11]
• 2007年2月 [19]
• 2007年1月 [11]
• 2006年12月 [15]
• 2006年11月 [15]
• 2006年10月 [12]
• 2006年9月 [7]
• 2006年8月 [11]
• 2006年7月 [12]
• 2006年6月 [18]
• 2006年5月 [19]
• 2006年4月 [9]
• 2006年3月 [12]
• 2006年2月 [9]
• 2006年1月 [4]
• 2005年12月 [8]
• 2005年11月 [13]
• 2005年10月 [5]
• 2005年9月 [1]
• 2005年8月 [13]
• 2005年7月 [26]

最近のエントリー

• Googleキーワード ツールが月間検索数を表示
• marginの相殺
• Feed登録者数が2000名を超えました。
• 7月のセミナーのご案内
• [Re:Creator's Party Kansai]第3回 CSSとクリックの応用 - jQueryによるJavaScript入門
• Firefox3でメイリオを指定するとinputのsizeが倍増する
• [Re:Creator's Party Kansai]クリックの操作 - jQueryによるJavaScript入門
• re:キケンなSQLインジェクション
• CSSのレイアウトテクニック - Faux Absolute Positioning
• Firefox3リリースされました。

コンテンツ

• 当サイトについて
• ブックマーク
• タグ一覧
• お問い合わせ

リンク

• WEBクリエイターSOHP
• twitter

このblogを書いてる人

西畑一馬(to-R代表)
Kazuma Nishihata
Webクリエイター

photo by
s-style-arts

items

タグクラウド

(x)html a adobe AdSense ajax alphafilter.js blog book CGIPath cms CSRF css cssnite csv dell display dl dom dt Fastladder feed Feedburner FFFTP firebug firefox flash float google Greasemonkey heightLine.js ie IE6 javascript jQuery jsライブラリ li LightBox Livedoor Reader livedoorクリップ lpo mac max-height max-width meta min-height min-width mixi Movable Type MT ol onload Opera pagerank pc photo php position Prototype.js qrコード Re:Creator's Party Kansai rss sbm sbo script.aculo.us Scuttle sem seo SEO対策 smo SpamLookup spry table tool Twitter ul urlエンコード URL短縮 vertical-align Virtual PC webSig24/7 webクリエイター Webディレクター web標準 Web標準の日々 wordpress Wordpress xhtml XML yahoo Yahoo!ブログ検索 あわせて読みたい お問い合わせフォーム はてな アップデート アドオン アルファ画像 カスタムフィールド カラム キーワードアドバイスツール キーワード出現頻度解析 クリエイティブ・コモンズ クリック クリップボード グローバル・タグ・アトリビュート コンテスト コード スタイルシート セキュリティー セミナー タグクラウド ツールチップ トラックバック バグ ビジネスエクスプレス フィード ブックマークレット プラグイン マークアップエンジニア モバイル ユーザビリティ ライブラリ ロールオーバー 一言いっとくか 再構築 勉強会 動画 拡張機能 書評 検索エンジン 検証 独立 画像置換 百度 経度緯度検索 解析 透過png

Movable Type

© 2007 [to-R]JavaScript,SEO対策,CSS,Movable Typeなどの情報を発信 some Rights Reserved.