Lightbox2は、画像表示をカッコ良く見せるためのAjaxライブラリです。
単純なポップアップ表示と、画像データをグループ化したスライドショウ表示が可能です。
Wordpress用のプラグインも存在しますが、作成者のホームページからダウンロードできるのは基本的なセットだけなので、プラグインはWordPressのページからダウンロードすることになります。
つまり基本セットでは、通常のHTMLにて作られたページにも同様の効果を出せると言うことです。
設置方法は作成者のホームページのトップに書かれているように結構簡単でした。
ちなみにここでは、画像データ・スクリプト・CSSがフツウにホームページを作る際に使ってしまいそうなDIR名がつけられてしまっているため、「Lightbox2」ディレクトリに集約してしまおうと思います。
まず、各パーツのアドレスは、基本となる呼び出し元のHTML（または起動スクリプト）が設置されている場所になることを念頭において相対アドレスを設定して廻ります。
■Lightbox2のディレクトリ構造≪V2.0.5>
__MACOSX （MACで使用するものなので不要）
css
└lightbox.css（修正要(2) 16,17行目）
images
├bullet.gif
├close.gif
├closelabel.gif
├donate-button.gif
├download-icon.gif
├image-1.jpg （デモ用なので不要）
├loading.gif
├nextlabel.gif
├prevlabel.gif
└thumb-1.jpg （デモ用なので不要）
js
├.DS_Store （こちらもMACで使用するものなので不要）
├builder.js
├effects.js
├lightbox.js （修正要(4) 45,46,109,122行目）
├lightbox-web.js （修正要(4) 45,46,109,122行目）
├prottype.js
└scriptaculous.js
index.html （デモ用なので不要）
css
└lightbox.css（修正要(2) 16,17行目）
images
├bullet.gif
├close.gif
├closelabel.gif
├donate-button.gif
├download-icon.gif
├image-1.jpg （デモ用なので不要）
├loading.gif
├nextlabel.gif
├prevlabel.gif
└thumb-1.jpg （デモ用なので不要）
js
├.DS_Store （こちらもMACで使用するものなので不要）
├builder.js
├effects.js
├lightbox.js （修正要(4) 45,46,109,122行目）
├lightbox-web.js （修正要(4) 45,46,109,122行目）
├prottype.js
└scriptaculous.js
index.html （デモ用なので不要）
手順としては次のとおりです。
１．Lightbox2ディレクトリを作成。
２．css、images、jsディレクトリを構造はそのままでLightbox2ディレクトリに移動。
３．css、jsのうち上記で（修正要）と記載されたソースの修正を行う。具体的には、ソースを任意のブラウザで開いて、「gif」などの検索ワードで修正該当箇所を調べ、「images/～.gif」の部分を、「lightbox2/images/～.gif」に変更します。
２．css、images、jsディレクトリを構造はそのままでLightbox2ディレクトリに移動。
３．css、jsのうち上記で（修正要）と記載されたソースの修正を行う。具体的には、ソースを任意のブラウザで開いて、「gif」などの検索ワードで修正該当箇所を調べ、「images/～.gif」の部分を、「lightbox2/images/～.gif」に変更します。
あとは、実際の呼び出し元HTML（もしくはスクリプトソース）に
１．HTMLヘッダー部にscriptタグ3行とlinkタグ１行をLightbox2ホームページからコピペする。
２．Lightbox2を使いたいイメージにアンカーをつけて、hrefには、画像拡大した画像のURLを設定、「rel=”lightbox”」をつけておきます。
３．スライドショーにしたい場合は、「rel=”lightbox[（グループID）]“」を設定した複数のアンカータグ付き画像を配置しておきます。
（グループID）には、適当な英数字名を設定しておきます。同一ページ内で複数のグループのスライドショウを設置することも可能です。
２．Lightbox2を使いたいイメージにアンカーをつけて、hrefには、画像拡大した画像のURLを設定、「rel=”lightbox”」をつけておきます。
３．スライドショーにしたい場合は、「rel=”lightbox[（グループID）]“」を設定した複数のアンカータグ付き画像を配置しておきます。
（グループID）には、適当な英数字名を設定しておきます。同一ページ内で複数のグループのスライドショウを設置することも可能です。
あとは、サーバーにアップロードするだけです。
自分で同様の機能を構築することと比べれば雲泥の差と言えるほど、簡単にできてしまいますね。
TrackBack URI : http://njcfactory.com/bbg/wp-trackback.php?p=398
Comments (0)