画像のスライドショーが簡単に作れるLightbox2の使用方法

2013年12月24日 08時39分

201312240839HCSW00.png

はじめに

多くのウェブサイトでは、画像のポップアップやスライドショーはごく当たり前のように出来るようになっています。そこで今回は、当サイトでも使用しているJQueryプラグインのLightbox2の使用方法を解説します。

前提条件

作業の前提条件は、下記のとおりです。

ソフトウエアバージョン
OSWindows 7 Ultimate 32bit
CygwinSetup Version 2.831

Lightbox2の設置方法

  1. 環境設定

    lightbox2.6.zipをダウンロードし、解凍します。

    $ cd /tmp/demo
    $ wget -q http://lokeshdhakar.com/projects/lightbox2/releases/lightbox2.6.zip
    $ unzip -q lightbox2.6.zip
    $ rm -f lightbox2.6.zip
    
  2. CSSファイルの設定

    Lightbox2のスタイルシートを、HTMLファイル中に指定します。

    <!DOCTYPE html>
    <html lang="ja">
      <head>
        <meta charset="utf-8">
        <title>018-1</title>
        <link href="lightbox/css/lightbox.css" rel="stylesheet">
      </head>
    
  3. jsファイルの設定

    Lightbox2のjsファイルを、HTMLファイル中に指定します。

    <body style="width: 720px;">
      <script src="jquery-1.10.2.min.js"></script>
      <script src="lightbox/js/lightbox-2.6.min.js"></script>
    </body>
    </html>
    
  4. 画像ファイルの設定

    表示する画像ファイルを、HTMLファイル中に指定します。
    ここでは、lightbox/img/demopage中の画像を指定します。

    <a href="lightbox/img/demopage/image-1.jpg"
      data-lightbox="image-1"
      data-title="image-1.jpg">
      <img src="lightbox/img/demopage/image-1.jpg" alt="image-1"></a>
    <a href="lightbox/img/demopage/image-2.jpg"
      data-lightbox="image-2"
      data-title="image-2.jpg">
      <img src="lightbox/img/demopage/image-2.jpg" alt="image-2"></a>
    <a href="lightbox/img/demopage/image-3.jpg"
      data-lightbox="image-3"
      data-title="image-3.jpg">
      <img src="lightbox/img/demopage/image-3.jpg" alt="image-3"></a>
    <a href="lightbox/img/demopage/image-4.jpg"
      data-lightbox="image-4"
      data-title="image-4.jpg">
      <img src="lightbox/img/demopage/image-4.jpg" alt="image-4"></a>
    <a href="lightbox/img/demopage/image-5.jpg"
      data-lightbox="image-5"
      data-title="image-5.jpg">
      <img src="lightbox/img/demopage/image-5.jpg" alt="image-5"></a>
    <a href="lightbox/img/demopage/image-6.jpg"
      data-lightbox="image-6"
      data-title="image-6.jpg">
      <img src="lightbox/img/demopage/image-6.jpg" alt="image-6"></a>
    

    ページを表示して、画像をクリックすると元画像がポップアップ表示されます。

    201312240839HCSW01.png
    201312240839HCSW02.png
    <!DOCTYPE html>
    <html lang="ja">
      <head>
        <meta charset="utf-8">
        <title>018-1</title>
        <link href="lightbox/css/lightbox.css" rel="stylesheet">
        <style>
          img { width: 25%; }
        </style>
      </head>
    
      <body style="width: 720px;">
        <a href="lightbox/img/demopage/image-1.jpg"
          data-lightbox="image-1"
          data-title="image-1.jpg">
          <img src="lightbox/img/demopage/image-1.jpg" alt="image-1"></a>
        <a href="lightbox/img/demopage/image-2.jpg"
          data-lightbox="image-2"
          data-title="image-2.jpg">
          <img src="lightbox/img/demopage/image-2.jpg" alt="image-2"></a>
        <a href="lightbox/img/demopage/image-3.jpg"
          data-lightbox="image-3"
          data-title="image-3.jpg">
          <img src="lightbox/img/demopage/image-3.jpg" alt="image-3"></a>
        <a href="lightbox/img/demopage/image-4.jpg"
          data-lightbox="image-4"
          data-title="image-4.jpg">
          <img src="lightbox/img/demopage/image-4.jpg" alt="image-4"></a>
        <a href="lightbox/img/demopage/image-5.jpg"
          data-lightbox="image-5"
          data-title="image-5.jpg">
          <img src="lightbox/img/demopage/image-5.jpg" alt="image-5"></a>
        <a href="lightbox/img/demopage/image-6.jpg"
          data-lightbox="image-6"
          data-title="image-6.jpg">
          <img src="lightbox/img/demopage/image-6.jpg" alt="image-6"></a>
    
        <script src="jquery-1.10.2.min.js"></script>
        <script src="lightbox/js/lightbox-2.6.min.js"></script>
      </body>
    </html>
    
    デモは、018-1.htmlからご覧頂けます。
    ファイルは、018-1.zipからダウンロードできます。
  5. 画像のグルーブ化

    画像のポップアップはできましたが、スライドショーができていませんので、画像を指定する際のdata-lightboxを同じ名前に変更します。ここでは、demoとしています。

    <a href="lightbox/img/demopage/image-1.jpg"
      data-lightbox="demo"
      data-title="image-1.jpg">
      <img src="lightbox/img/demopage/image-1.jpg" alt="image-1"></a>
    <a href="lightbox/img/demopage/image-2.jpg"
      data-lightbox="demo"
      data-title="image-2.jpg">
      <img src="lightbox/img/demopage/image-2.jpg" alt="image-2"></a>
    <a href="lightbox/img/demopage/image-3.jpg"
      data-lightbox="demo"
      data-title="image-3.jpg">
      <img src="lightbox/img/demopage/image-3.jpg" alt="image-3"></a>
    <a href="lightbox/img/demopage/image-4.jpg"
      data-lightbox="demo"
      data-title="image-4.jpg">
      <img src="lightbox/img/demopage/image-4.jpg" alt="image-4"></a>
    <a href="lightbox/img/demopage/image-5.jpg"
      data-lightbox="demo"
      data-title="image-5.jpg">
      <img src="lightbox/img/demopage/image-5.jpg" alt="image-5"></a>
    <a href="lightbox/img/demopage/image-6.jpg"
      data-lightbox="demo"
      data-title="image-6.jpg">
      <img src="lightbox/img/demopage/image-6.jpg" alt="image-6"></a>
    

    ページを表示して、画像をクリックすると前後の画像を表示できるようになります。

    201312240839HCSW01.png
    201312240839HCSW03.png
    <!DOCTYPE html>
    <html lang="ja">
      <head>
        <meta charset="utf-8">
        <title>018-2</title>
        <link href="lightbox/css/lightbox.css" rel="stylesheet">
        <style>
          img { width: 25%; }
        </style>
      </head>
    
      <body style="width: 720px;">
        <a href="lightbox/img/demopage/image-1.jpg"
          data-lightbox="demo"
          data-title="image-1.jpg">
          <img src="lightbox/img/demopage/image-1.jpg" alt="image-1"></a>
        <a href="lightbox/img/demopage/image-2.jpg"
          data-lightbox="demo"
          data-title="image-2.jpg">
          <img src="lightbox/img/demopage/image-2.jpg" alt="image-2"></a>
        <a href="lightbox/img/demopage/image-3.jpg"
          data-lightbox="demo"
          data-title="image-3.jpg">
          <img src="lightbox/img/demopage/image-3.jpg" alt="image-3"></a>
        <a href="lightbox/img/demopage/image-4.jpg"
          data-lightbox="demo"
          data-title="image-4.jpg">
          <img src="lightbox/img/demopage/image-4.jpg" alt="image-4"></a>
        <a href="lightbox/img/demopage/image-5.jpg"
          data-lightbox="demo"
          data-title="image-5.jpg">
          <img src="lightbox/img/demopage/image-5.jpg" alt="image-5"></a>
        <a href="lightbox/img/demopage/image-6.jpg"
          data-lightbox="demo"
          data-title="image-6.jpg">
          <img src="lightbox/img/demopage/image-6.jpg" alt="image-6"></a>
    
        <script src="jquery-1.10.2.min.js"></script>
        <script src="lightbox/js/lightbox-2.6.min.js"></script>
      </body>
    </html>
    
    デモは、018-2.htmlからご覧頂けます。
    ファイルは、018-2.zipからダウンロードできます。