jquery.galleryview.jsを使って複数の画像をギャラリー&スライダー表示する方法をご紹介します。
Contents
ディスプレイ広告
jquery.galleryview.jsを使って複数の画像をギャラリー&スライダー表示するCSSの記述
※jquery.galleryview-3.0-dev.cssファイルを読み込みます。その他必要に応じて変更して下さい。
<link type="text/css" rel="stylesheet" href="css/jquery.galleryview-3.0-dev.css" /> <style type="text/css" media="all"> <!-- body{ margin:0; padding:0; } h1{ text-align:center; font-size:18px; font-weight:bold; padding:10px 0; line-height:1.4em; text-align:center; } .clWrap{ width:800px; margin:0 auto; } --> </style>
jquery.galleryview.jsを使って複数の画像をギャラリー&スライダー表示するJavaScriptの記述
※jquery.min.js、jquery-ui.min.js、jquery.timers-1.2.js、jquery.easing.1.3.js、jquery.galleryview-3.0-dev.jsファイルを読み込みます。$(‘ギャラリー&スライダーエリア’).galleryView()でギャラリー&スライダーさせたいエリアを設定します。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> <script type="text/javascript" src="js/jquery.timers-1.2.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/jquery.galleryview-3.0-dev.js"></script> <script type="text/javascript"> $(function(){ $('#myGallery').galleryView(); }); </script>
jquery.galleryview.jsを使って複数の画像をギャラリー&スライダー表示するHTMLの記述
※ギャラリー&スライダーエリア(id=”myGallery”)にjpg画像を5枚用意しました。必要に応じて変更して下さい。
<div class="clWrap"> <h1>複数画像をギャラリー&スライダー表示します。</h1> <div align="center"> <ul id="myGallery"> <li><img src="i1.jpg" alt="1枚目の画像" /></li> <li><img src="i2.jpg" alt="2枚目の画像" /></li> <li><img src="i3.jpg" alt="3枚目の画像" /></li> <li><img src="i4.jpg" alt="4枚目の画像" /></li> <li><img src="i5.jpg" alt="5枚目の画像" /></li> </ul> </div> </div><!--/clWrap-->
jquery.galleryview:複数画像をギャラリー&スライダー表示するデモページ
jquery.galleryview:複数画像をギャラリー&スライダー表示するデモページ
ギャラリー系の見せ方って他にも色々とプラグインがあったりしますよね。
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。