lightbox

サムネル画像をクリックした時に拡大するlightboxをJavaScriptで実現する方法。 JavaScriptで出来ているlightbox2を使えば簡単に実現できる。なお、WordPressにはlightboxプラグインが有るので、lightbox2の導入は不要。

Lightbox JS v2.0の使い方

  1. Lightbox 2ダウンロード
  2. 解凍したファイルにある「js」「css」「img」フォルダをアップロード
  3. lightbox.cssはimgフォルダーに格納されている画像ファイルを使用しているので、imgフォルダーを変更した場合は、lightbox.cssの参照箇所を修正する。
  4. headタグ内に下記ソースを記述（アップロードした場所に応じて所在場所を修正する）
<script src="http://sample.sakuraweb.com/js/jquery.min.js"></script>
<script src="http://sample.sakuraweb.com/js/lightbox.min.js"></script>
<link href="http://sample.sakuraweb.com/css/lightbox.css" rel="stylesheet" />

これでLightbox2を使用することが可能になる。 Lightbox2を使うためのHTMLソースを次のように作成する。 <a href=”./images/image-1.jpg” rel=”lightbox“>をつけるとLightbox2が有効になる。グループ化してプレビューのようにしたい場合はrel=”lightbox[plants]”にすればよい。

<div>
<a href="./images/image-1.jpg" rel="lightbox"><img src="./images/thumb-1.jpg" alt="" width="130" /></a>

<a href="./images/image-2.jpg" rel="lightbox"><img src="./images/thumb-2.jpg" alt="" width="130" /></a>
</div> 
<p>画像をグループ化にしたい場合は「rel="lightbox[plants]"」と記述していく事で、「rel="lightbox[plants]"」がついた画像達がプレビューされていく。</p>
<div>
<a href="./images/image-3.jpg" rel="lightbox[plants]" title="左右のクリックで移動します。"><img src="./images/thumb-3.jpg" alt="" width="130" /></a>

<a href="./images/image-4.jpg" rel="lightbox[plants]" title="左右のクリックで移動します。"><img src="./images/thumb-4.jpg" alt="" width="130" /></a>

<a href="./images/image-5.jpg" rel="lightbox[plants]" title="左右のクリックで移動します。"><img src="./images/thumb-5.jpg" alt="" width="130" /></a>

<a href="./images/image-6.jpg" rel="lightbox[plants]" title="左右のクリックで移動します。"><img src="./images/thumb-6.jpg" alt="" width="130" /></a>
</div>

サンプル