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

2013年12月24日 13時52分

201312241352HCSW00.png

はじめに

前回の記事で解説したLightbox2を使うと、画像のポップアップやスライドショーが簡単に実行できますが、この他にもプラグインはあります。 そこで今回は、Lightbox2と並んで人気のあるColorboxの使用方法を解説します。

前提条件

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

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

Colorboxの設置方法

  1. 環境設定

    設置に必要なアーカイブをダウンロードし、解凍します。 

    $ cd /tmp/demo
$ wget -q https://github.com/jackmoore/colorbox/archive/master.zip
$ unzip -q master.zip
$ rm -f master.zip
$ mv colorbox-master colorbox
  2. CSSファイルと画像のコピー

    展開されたcolorboxフォルダ中に、example1～5のサンプルが用意されていますので、好みのCSSファイルと、imagesフォルダをコピーします。
    今回は、example3のCSSとイメージを使用します。 

    $ cd colorbox/example3
$ cp -r colorbox.css images ..

    以上で、colorboxフォルダに、colorbox.css、jquery.colorbox.js、jquery.colorbox-min.js、imagesフォルダが揃いましたので、その他のファイルやフォルダは削除しても構いません。

  3. CSSファイルの指定

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

    <!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>019</title>
    <link href="colorbox/colorbox.css" rel="stylesheet">
    <style>
      img { width: 25%; }
    </style>
  </head>

  <body style="width: 720px;">
  4. jsファイルの指定とJavaScriptの追加

    jquery.colorbox.jsを、HTMLファイル中に指定し、Colorboxのロードを行うJavaScriptを追加します。 

    <script src="jquery-1.10.2.min.js"></script>
<script src="colorbox/jquery.colorbox-min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
  $(".demo").colorbox({rel:'demo'});
});
</script>
</html>
  5. 画像ファイルの設定

    表示する画像ファイルを、HTMLファイル中に指定します。
    ここでは、以前の記事で使用した画像を指定します。

    画像を同一グルーブで表示するため、demoクラスを使用して指定するところがポイントです。
    ここで指定されたクラス名を、上の23行目のようにJavaScriptに指定することで、画像を表示しますので、クラス名とJavaScriptで指定するrel:の値は同一のものを使用します。 

    <a class="demo" href="img/016-01.png"><img src="img/016-01.png" alt="01"></a>
<a class="demo" href="img/016-02.png"><img src="img/016-02.png" alt="02"></a>
<a class="demo" href="img/016-03.png"><img src="img/016-03.png" alt="03"></a>
<a class="demo" href="img/016-04.png"><img src="img/016-04.png" alt="04"></a>
<a class="demo" href="img/016-05.png"><img src="img/016-05.png" alt="05"></a>
<a class="demo" href="img/016-06.png"><img src="img/016-06.png" alt="06"></a>

    ページを表示して、画像をクリックすると元画像がポップアップ表示され、グルーブ化された画像に左右の矢印によってアクセスできます。

    201312241352HCSW01.png
    201312241352HCSW02.png
     
    <!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>019</title>
    <link href="colorbox/colorbox.css" rel="stylesheet">
    <style>
      img { width: 25%; }
    </style>
  </head>

  <body style="width: 720px;">
    <p>
      <a class="demo" href="img/016-01.png"><img src="img/016-01.png" alt="01"></a>
      <a class="demo" href="img/016-02.png"><img src="img/016-02.png" alt="02"></a>
      <a class="demo" href="img/016-03.png"><img src="img/016-03.png" alt="03"></a>
      <a class="demo" href="img/016-04.png"><img src="img/016-04.png" alt="04"></a>
      <a class="demo" href="img/016-05.png"><img src="img/016-05.png" alt="05"></a>
      <a class="demo" href="img/016-06.png"><img src="img/016-06.png" alt="06"></a>
    </p>

    <script src="jquery-1.10.2.min.js"></script>
    <script src="colorbox/jquery.colorbox-min.js"></script>
    <script type='text/javascript'>
    $(document).ready(function(){
      $(".demo").colorbox({rel:'demo'});
    });
    </script>
  </body>
</html>
    デモは、019.htmlからご覧頂けます。
    ファイルは、019.zipからダウンロードできます。

▲