jquery.flipping_gallery.jsを使って複数画像を前後にギャラリー表示する方法をご紹介します。
Contents
ディスプレイ広告
複数画像を前後にギャラリー表示する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
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。