画像をクリックするとその画像を拡大表示することが出来るjQueryプラグイン「Lightbox2」の使用方法をご紹介します。

導入手順

1. 1. プラグイン「Lightbox2」のダウンロード
      • ダウンロード先：http://lokeshdhakar.com/projects/lightbox2/
   2. 必要となるファイル
      • jquery本体「jquery-1.10.2.js」
      • Lightbox2のjquery「lightbox.js」
      • Lightbox2のスタイルシート「lightbox.css」
   3. サンプルソース「HTML」
      jquery本体とLightbox2のjquery「lightbox.js」、Lightbox2のスタイルシート「lightbox.css」をそれぞれ指定します。
      
      XHTML

      <link rel='stylesheet' type='text/css' href='./css/lightbox.css' /> <script type="text/javascript" charset="utf-8" src="./js/jquery-1.10.2.js"></script> <script type="text/javascript" charset="utf-8" src="./js/lightbox.js" ></script>

      1 2 3

      <link rel='stylesheet' type='text/css' href='./css/lightbox.css' /> <script type="text/javascript" charset="utf-8" src="./js/jquery-1.10.2.js"></script> <script type="text/javascript" charset="utf-8" src="./js/lightbox.js" ></script>

      
      画像imgタグをリンク用のaタグで囲い、aタグのrel属性を指定して「rel=”lightbox”」と指定するだけです。これで画像をクリックするとその画像の本来のサイズがポップアップ表示されます。
      
      XHTML

      <a href="./img/image.jpg" rel="lightbox"> <img id="lightboxSample1" src="./img/image.jpg" data-zoom-image="./img/image.jpg" width="300" height="300"/> </a>

      1 2 3

      <a href="./img/image.jpg" rel="lightbox"> <img id="lightboxSample1" src="./img/image.jpg" data-zoom-image="./img/image.jpg" width="300" height="300"/> </a>

   4. 実行サンプル
      以下画像をクリックすると画像が拡大表示されます。