Nivo Lightboxでギャラリーを作る方法

Nivo Lightboxでギャラリーを作る方法

今回はjQueryライブラリ「Nivo Lightbox」を紹介します。

サンプル

単一写真

複数写真ギャラリー

Video(YouTube)

YouTube

Video(vimeo)

Vimeo

HTMLコード

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
   <title>jQuery Nivo Lightbox demo(1)</title>
   <link rel="stylesheet" href="/assets/Responsive-Flexible-jQuery-Lightbox-Plugin-Nivo-Lightbox/dist/nivo-lightbox.min.css">
   <link rel="stylesheet" href="/assets/Responsive-Flexible-jQuery-Lightbox-Plugin-Nivo-Lightbox/themes/default/default.css">
   <!-- 最新のjQuery3などはだめ、古いのである必要あり -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
   <script src="/assets/Responsive-Flexible-jQuery-Lightbox-Plugin-Nivo-Lightbox/dist/nivo-lightbox.min.js"></script>
</head>
<body>
   <p>
      <h4>単一写真</h4>
      <a href="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06344.jpg"  title="レッサーパンダ"  >
         <img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06344.jpg"  style="width:20%">
      </a>
      <a href="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07591.jpg"  title="カピバラ" >
         <img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07591.jpg" alt=""  style="width:20%">
      </a>
      <a href="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07708.jpg" title="ペンギン">
         <img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07708.jpg"  style="width:20%">
      </a>
   </p>
   <p>
      <h4>複数写真ギャラリー</h4>
      <a href="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06344.jpg"  title="レッサーパンダ" data-lightbox-gallery="gallery1" >
         <img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06344.jpg"  style="width:20%">
      </a>
      <a href="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07591.jpg"  title="カピバラ" data-lightbox-gallery="gallery1">
         <img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07591.jpg" alt=""  style="width:20%">
      </a>
      <a href="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07708.jpg" title="ペンギン" data-lightbox-gallery="gallery1">
         <img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07708.jpg"  style="width:20%">
      </a>
   </p>
    <p>
      <h4>Video(YouTube)</h4>
      <a href="https://www.youtube.com/watch?v=__NeP0RqACU" title="YouTubeショート" >YouTube</a>
   </p>
   <p>
      <h4>Video(vimeo)</h4>
      <a href="https://vimeo.com/717779857" title="Interactive Video by Vimeo" >Vimeo</a>
   </p>
   <script type="text/javascript">
      $(document).ready(function(){
          $('a').nivoLightbox();
      }
      );
   </script>
</body>
</html>

デモ

導入方法

ダウンロードの場合

「Nivo Lightbox」のページに行き、「Download」ボタンを押すことで書庫ファイルをダウンロードできます。

ダウンロードした書庫ファイルを解凍すると以下のようなファイルが展開されます。

今回は「(ウェブルート)/assets/Responsive-Flexible-jQuery-Lightbox-Plugin-Nivo-Lightbox/」に展開しました。

適時配置ください。

コーディング方法

CSSファイルインクルード
<link rel="stylesheet" href="/assets/Responsive-Flexible-jQuery-Lightbox-Plugin-Nivo-Lightbox/dist/nivo-lightbox.min.css">
<link rel="stylesheet" href="/assets/Responsive-Flexible-jQuery-Lightbox-Plugin-Nivo-Lightbox/themes/default/default.css">

まず、「nivo-lightbox.min.css」を読み込んでください。

ダウンロードし展開した書庫ファイルの「dist」ディレクトリにある、CSSファイルを読み込んでください。

次に、デザインテーマのデフォルトCSS「default.css」を読み込んでください。これは必ずしも読み込む必要性のあるものではなく、おのおのでスタイルを変更する場合はこれをもとに編集してください。

ダウンロードし、展開しょた書庫ファイルに「themes」→「default」に閉じるボタンアイコンは、次・前ボタンなどのアイコンも含めて、デフォルトのデザイン一式が含まれています。この中にある「default.css」を読み込んでください。

jQuery読み込み

次にjQueryを読み込みます。

ただ、無条件に最新版を読み込むと動作しません。少し古いjQuery1.10あたりを読み込んでください

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
JSファイルインクルード

最後にJSファイルを読み込みます。

展開した書庫ファイル内の「dist」配下にあるJSファイルを読み込みます。

<script src="/assets/Responsive-Flexible-jQuery-Lightbox-Plugin-Nivo-Lightbox/dist/nivo-lightbox.min.js"></script>

CDNの場合

CDNの用意されています。それを利用すれば、わざわざダウンロードする必要はありません。

コーディング方法

CSSファイルインクルード
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nivo-lightbox/1.3.1/nivo-lightbox.min.css">
jQuery読み込み
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
JSファイルインクルード
<script src="https://cdnjs.cloudflare.com/ajax/libs/nivo-lightbox/1.3.1/nivo-lightbox.min.js"></script>

実装方法

HTMLマークアップ

まず、アンカータグ(<a>)を設定し、リンク先(href)に表示させたい画像のURIを設定します。

<a href="(画像URI) " title="キャプション文字列">
  ...
</a>

キャプションを設定したい場合には、title属性に設定してください。

次にイメージタグ(<img>)に画像を設定します。これはクリック前のサムネイル画像に相当します。

<a href="(画像URI) " title="キャプション文字列">
  <img src="(サムネイル画像URI)" />
</a>

複数の写真をグループ化するには?

複数の写真をグループ化するには属性「data-lightbox-gallery」を設定し、値でグループの紐づけを行います。

<a data-lightbox-gallery="gallery-1" href="(画像URI)" title="キャプション文字列">
  <img src="(サムネイル画像URI)" />
</a>

<a data-lightbox-gallery="gallery-1" href="(画像URI)" title="キャプション文字列">
  <img src="(サムネイル画像URI)" />
</a>

<a data-lightbox-gallery="gallery-2" href="(画像URI)" title="キャプション文字列">
  <img src="(サムネイル画像URI)" />
</a>
<a data-lightbox-gallery="gallery-2" href="(画像URI)" title="キャプション文字列">
  <img src="(サムネイル画像URI)" />
</a>

Nivo Lightbox初期化

最後にNivo Lightboxを初期化し、ギャラリーを設定します。

<script type="text/javascript">
   $(document).ready(function(){
       $('a').nivoLightbox();
   }
   );
</script>

オプション

Nivo Lightboxを初期化する際にオプションを指定することができます。

サンプル

単一写真

複数写真ギャラリー

Video(YouTube)

YouTube

Video(vimeo)

Vimeo

エラーメッセージ

読み込み失敗

デモ

HTMLコード

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
   <title>jQuery Nivo Lightbox demo(2)</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nivo-lightbox/1.3.1/nivo-lightbox.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nivo-lightbox/1.3.1/themes/default/default.css">
   <!-- 最新のjQuery3などはだめ、古いのである必要あり -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/nivo-lightbox/1.3.1/nivo-lightbox.min.js"></script>
</head>
<body>
   <p>
      <h4>単一写真</h4>
      <a href="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06344.jpg"  title="レッサーパンダ"  >
         <img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06344.jpg"  style="width:20%">
      </a>
      <a href="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07591.jpg"  title="カピバラ" >
         <img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07591.jpg" alt=""  style="width:20%">
      </a>
      <a href="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07708.jpg" title="ペンギン">
         <img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07708.jpg"  style="width:20%">
      </a>
   </p>
   <p>
      <h4>複数写真ギャラリー</h4>
      <a href="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06344.jpg"  title="レッサーパンダ" data-lightbox-gallery="gallery1" >
         <img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC06344.jpg"  style="width:20%">
      </a>
      <a href="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07591.jpg"  title="カピバラ" data-lightbox-gallery="gallery1">
         <img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07591.jpg" alt=""  style="width:20%">
      </a>
      <a href="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07708.jpg" title="ペンギン" data-lightbox-gallery="gallery1">
         <img src="https://www.single-life.tokyo/wp-content/uploads/2021/07/DSC07708.jpg"  style="width:20%">
      </a>
   </p>
    <p>
      <h4>Video(YouTube)</h4>
      <a href="https://www.youtube.com/watch?v=__NeP0RqACU" title="YouTubeショート" >YouTube</a>
   </p>
   <p>
      <h4>Video(vimeo)</h4>
      <a href="https://vimeo.com/717779857" title="Interactive Video by Vimeo" >Vimeo</a>
   </p>
   <p>
      <h4>エラーメッセージ</h4>
      <a href="#error" data-lightbox-type="inline" >読み込み失敗</a>
   </p>
   <script type="text/javascript">
      $(document).ready(function(){
          $('a').nivoLightbox({
           // lightbox表示時の効果
           // 定義できるのは「fade」「fadeScale」「slideLeft」「slideRight」「slideUp」「slideDown」「fall」のいずれかを指定
           effect:'fall',
           // lightboxに適用するテーマ
           theme:'default',
           // キーボードによる操作を有効化/無効化するオプション
           //「→」「←」キーでスライド移動
           keyboardNav:true,
           // 「true」にするとイメージクリック時にLightboxを閉じます
           clickImgToClose:true,
           // 「true」にすると、オーバーレイクリック時にLightboxを閉じます
           clickOverlayToClose:false,
           // コールバック関数
           onInit:function(){},
           beforeShowLightbox:function(){},
           afterShowLightbox:function(lightbox){},
           beforeHideLightbox:function(){},
           afterHideLightbox:function(){},
           beforePrev:function(element){},
           onPrev:function(element){},
           beforeNext:function(element){},
           onNext:function(element){},
           // 内容を読み込むことができなった時のエラーメッセージ
           errorMessage:'要求された内容を読み込むことができません。時間をおいて再実行してください。'
      });
});
   </script>
</body>
</html>

オプション一覧

effect

効果を指定できるオプションです。指定できるのは以下の文字列になります。デフォルトは『fade』です。

  • fade
  • fadeScale
  • slideLeft
  • slideRight
  • slideUp
  • slideDown
  • fall

theme

「Nivo Lightbox」に適用するテーマです。

デフォルトは『default』です。

keyboardNav

「true」にすると、キーボードでスライドを移動させることができます。「→」を押すと、次のスライドへ、「←」を押すと前のスライドに戻ります。

デフォルトは『true』です。

clickImgToClose

「true」にすると、イメージをクリックするだけで、Lightboxが閉じます。

デフォルトは『false』です。

clickOverlayToClose

「true」にすると、イメージ外にある、オーバーレイをクリックすると、Lightoboxが閉じます。

デフォルトは『true』です。

onInit

初期化処理時に呼び出されるコールバック関数です。

beforeShowLightbox

Lightbox表示前に呼び出されるコールバック関数です。

afterShowLightbox

Lightbox表示後に呼び出されるコールバック関数です。

beforeHideLightbox

Lightbox非表示前に呼び出されるコールバック関数です。

afterHideLightbox

Lightbox非表示後に呼び出されるコールバック関数です。

beforePrev

「前ボタン」クリック後、スライドが移動する前にに呼び出されるコールバック関数です。

onPrev

「前ボタン」クリック時に呼び出されるコールバック関数です。

beforeNext

「次ボタン」クリック後、スライドが移動する前にに呼び出されるコールバック関数です。

onNext

「次ボタン」クリック時に呼び出されるコールバック関数です。

errorMessage

表示内容を読み込めなかった際に表示されるエラーメッセージを定義できるオプションです。

デフォルトは『The requested content cannot be loaded. Please try again later.』です。

ご参考

関連ページ