ぷにおちゃん～画像のスライドショーが簡単に作れるLightbox2の使用方法

はじめに

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

前提条件

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

ソフトウエア	バージョン
OS	Windows 7 Ultimate 32bit
Cygwin	Setup Version 2.831

Lightbox2の設置方法

環境設定

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

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>

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>

画像ファイルの設定

表示する画像ファイルを、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>

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

<!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からダウンロードできます。

画像のグルーブ化

画像のポップアップはできましたが、スライドショーができていませんので、画像を指定する際の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>

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

<!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からダウンロードできます。

Table of Contents

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

はじめに

前提条件

Lightbox2の設置方法