jQueryでスライドショー＆ポップアップ表示

2013-09-05 21:41:26

はじめに＆デモ

jQuery のプラグイン、Nivo Slider と lightbox2 を使用して、スライドショー＆ポップアップ表示機能を実装したので、メモ。
パスは各自環境に合わせてください。

デモはこちら

用意するもの

jQuery の設定

今回は1.8.3を使用。
各プラグインは、jQuery 10 で説明されていますが、このバージョンでも動作します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

Nivo Slider の設定

まずはスライドショーのjQueryプラグイン、Nivo Slider を設定します。

JavaScript、CSS、HTML の設定

下記の HTML を基本として本機能を実装していきます。

<html>
<head>
  <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" charset="utf-8" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript" src="js/jquery.nivo.slider.pack.js" ></script>
  <script type="text/javascript">
  $(window).load(function() {
    $('#slider').nivoSlider();
  });
  </script>
</head>
<body>
<div id="slider" class="nivoSlider">
  <img src="./images/1.jpg" alt="" />
  <img src="./images/2.jpg" alt="" />
  <img src="./images/3.jpg" alt="" />
</div>
</body>
</html>

テーマの設定

上記の設定だけでも動きますが、デザインが微妙なのであらかじめ用意されているテーマを適用します。

まずは CSS の設定

<link rel="stylesheet" href="css/themes/default/default.css" type="text/css" charset="utf-8" />

次に HTML の設定

<div class="slider-wrapper theme-default"> 
  <div class="ribbon"></div>
  <div id="slider" class="nivoSlider">
    <img src="./images/1.jpg" alt="" />
    <img src="./images/2.jpg" alt="" />
    <img src="./images/3.jpg" alt="" />
  </div>
</div>

これで、Nivo Slider の実装は完了です。

lightbox2 の設定

次は画像をポップアップ表示する jQuery プラグイン、lightbox2 の設定です。

CSS の設定

<link href="css/lightbox.css" rel="stylesheet" />

JavaScript の設定

lightbox2 は、特殊な HTML 属性を用いてポップアップを実装するので、load イベントへのバインドは必要ありません。

<script src="js/lightbox-2.6.min.js"></script>

画像の設定

lightbox2 を解凍したフォルダの img フォルダにある以下の画像を、任意の画像フォルダに移動します。

close.png
loading.gif
prev.png
next.png

lightbox.css を開き、上記で移動した画像のパスを変更します。
「../img/」を検索するとすぐ見つかると思います。

HTML の設定

Nivo Slider の HTML に追記していきます。

lightbox2 は、ポップアップさせたい文字や画像に a 要素をつけ、さらにdata-lightbox 属性をつけることでポップアップ機能を実装します。

<div class="slider-wrapper theme-default"> 
  <div class="ribbon"></div>
  <div id="slider" class="nivoSlider">
    <a href="./images/1.jpg" data-lightbox="image" title="パセリ"><img src="./images/1.jpg" alt="" /></a>
    <a href="./images/2.jpg" data-lightbox="image" title="花"><img src="./images/2.jpg" alt="" /></a>
    <a href="./images/3.jpg" data-lightbox="image" title="ハス"><img src="./images/3.jpg" alt="" /></a>
  </div>
</div>

data-lightbox の設定値を同一にすることで、同じグループとみなし、ポップアップ表示時に左右にスライドすることができます。

href にはポップアップさせたい画像のパスを指定します。

title 属性はポップアップ後のタイトルとなります。

これで、lightbox2 の設定は完了です。
スライドショー＆ポップアップ表示が手軽に実装できました。