jQuery 「Lightbox2」で画像拡大表示

画像をクリックするとその画像を拡大表示することが出来る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/<a class="glossaryLink" title="Glossary: LightBox" aria-describedby="tt" data-cmtooltip="<div class=glossaryItemTitle>LightBox</div><div class=glossaryItemBody>読み：ライトボックス。Webページ上のサムネイル画像を拡大表示できるJavaScriptアプリケーション。ユーザが現在のページからの移動が必要なく、より大きいサイズのイメージを見ることができ、簡単なスライドショーも表示出来る。</div>" href="https://write-remember.com/glossary/lightbox/" data-gt-translate-attributes='[{"attribute":"data-cmtooltip", "format":"html"}]' tabindex='0' role='link'>lightbox</a>.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/<a class="glossaryLink" title="Glossary: LightBox" aria-describedby="tt" data-cmtooltip="<div class=glossaryItemTitle>LightBox</div><div class=glossaryItemBody>読み：ライトボックス。Webページ上のサムネイル画像を拡大表示できるJavaScriptアプリケーション。ユーザが現在のページからの移動が必要なく、より大きいサイズのイメージを見ることができ、簡単なスライドショーも表示出来る。</div>" href="https://write-remember.com/glossary/lightbox/" data-gt-translate-attributes='[{"attribute":"data-cmtooltip", "format":"html"}]' tabindex='0' role='link'>lightbox</a>.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="<a class="glossaryLink" title="Glossary: LightBox" aria-describedby="tt" data-cmtooltip="<div class=glossaryItemTitle>LightBox</div><div class=glossaryItemBody>読み：ライトボックス。Webページ上のサムネイル画像を拡大表示できるJavaScriptアプリケーション。ユーザが現在のページからの移動が必要なく、より大きいサイズのイメージを見ることができ、簡単なスライドショーも表示出来る。</div>" href="https://write-remember.com/glossary/lightbox/" data-gt-translate-attributes='[{"attribute":"data-cmtooltip", "format":"html"}]' tabindex='0' role='link'>lightbox</a>"> <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. 実行サンプル
      以下画像をクリックすると画像が拡大表示されます。