jquery.flipping_gallery.jsを使って複数画像を前後にギャラリー表示する方法｜DAD UNION

jquery.flipping_gallery.jsを使って複数画像を前後にギャラリー表示する方法をご紹介します。

Contents

複数画像を前後にギャラリー表示するCSSの記述
複数画像を前後にギャラリー表示するHTMLの記述
jquery.flipping_gallery.jsを使って複数画像を前後にギャラリー表示するJavaScriptの記述
jquery.flipping_gallery.jsを使って複数画像を前後にギャラリー表示するデモページ
ソース元：flipping_gallery

複数画像を前後にギャラリー表示するCSSの記述

※flipping_gallery.cssファイルを読み込みます。ギャラリー表示エリア（.gallery）のるCSS記述です。必要に応じて変更して下さい。

<style>
<link href="flipping_gallery.css" rel="stylesheet" type="text/css">
<style>
body {
  font-size: 16px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 18px;
  line-height: 1.6em;
  padding-top: 20px;
}
a{
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
}
p{
  line-height: 1.6em;
}
.gallery{
  width: 800px;
  height: 533px;
  margin: 0 auto;
}
.navigation{
  padding-top: 60px;
}
</style>

複数画像を前後にギャラリー表示するHTMLの記述

※ギャラリー表示エリア（class=”gallery”）に画像を3つ、「＜＜前へ」リンク（class=”btn prev”）、「次へ＞＞」リンク（class=”btn next”）を用意します。必要に応じて変更して下さい。

<h1>jquery.flipping_gallery.jsを使って複数画像を前後にギャラリー表示します。</h1>
<p>サムネイルクリック、マウスのトラックボール、「＜＜ 前へ」「次へ ＞＞」で画像を切替え可能です。</p>
<br><br>

  <div class="gallery">
    <a href="#" data-caption="1枚目の画像"><img src="1.jpg"></a>
    <a href="#" data-caption="2枚目の画像"><img src="2.jpg"></a>
    <a href="#" data-caption="3枚目の画像"><img src="3.jpg"></a>
  </div>

  <div class="navigation">
    <a href="#" class="btn prev">＜＜ 前へ</a>　　　<a href="#" class="btn next">次へ ＞＞</a>
  </div>

jquery.flipping_gallery.jsを使って複数画像を前後にギャラリー表示するJavaScriptの記述

※jquery.min.js、jquery.flipping_gallery.jsファイルを読み込みます。$(“ギャラリー表示エリア”).flipping_gallery({ オプション })を記述します。オプションでは画像のマウススクロールや自動切換えを設定できます。$(“ギャラリー表示エリア”).flipForward()と$(“ギャラリー表示エリア”).flipBackward()で画像を前後に切替可能です。

  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript" src="jquery.flipping_gallery.js"></script>
  <script>
    $(document).ready( function() {
      $(".gallery").flipping_gallery({
        enableScroll: true,
        autoplay: 2000
      });
      
      $(".next").click(function() {
        $(".gallery").flipForward();
        return false;
      });
      $(".prev").click(function() {
        $(".gallery").flipBackward();
        return false;
      });
    });
    
  </script>