JavaScript PR

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

記事内に商品プロモーションを含む場合があります

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

複数画像を前後にギャラリー表示する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>

jquery.flipping_gallery.jsを使って複数画像を前後にギャラリー表示するデモページ

jquery.flipping_gallery.jsを使って複数画像を前後にギャラリー表示するデモページ

ソース元:flipping_gallery

flipping_gallery

 
※流用される場合は自己責任でお願いします。
 デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。