フォローする

【jQuery】レスポンシブなサムネイル付きスライドショー「Responsive Image Gallery」

2015年9月18日

【jQuery】レスポンシブなサムネイル付きスライドショー
「Responsive Image Gallery」

PCでもスマホでもスムーズに表示してくれるレスポンシブなスライドショーが最近増えてきました。その中でも、カルーセルサムネイル付きの「Responsive Image Gallery」をご紹介します。設置が簡単なので、既存のスライドショーをレスポンシブにカスタマイズするより楽でおススメです。

【設置方法】
①下記のサイトからソースをダウンロードします。

http://tympanus.net/codrops/2011/09/20/responsive-image-gallery/

②bodyの閉じタグ</body>の直前で、必要なjsを読み込ませます。

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script>
<script type=”text/javascript” src=”js/jquery.tmpl.min.js”></script>
<script type=”text/javascript” src=”js/jquery.easing.1.3.js”></script>
<script type=”text/javascript” src=”js/jquery.elastislide.js”></script>
<script type=”text/javascript” src=”js/gallery.js”></script>

③head内にcssへのリンクを挿入します。

<link rel=”stylesheet” type=”text/css” href=”css/style.css” />
<link rel=”stylesheet” type=”text/css” href=”css/elastislide.css” />

 demo.cssで必要なのは下記だけ。

.clr{ clear:both; }

この部分だけを別のCSSに記述すれば、demo.cssは削除しても大丈夫です。

④headの閉じタグ</head>の直前にギャラリー出力用ソースを挿入します。

<script id=”img-wrapper-tmpl” type=”text/x-jquery-tmpl”>
<div class=”rg-image-wrapper”>
{{if itemsCount > 1}}
<div>
<a href=”#” class=”rg-image-nav-prev”>Previous Image</a>
<a href=”#” class=”rg-image-nav-next”>Next Image</a>
</div>
{{/if}}
<div class=”rg-image”></div>
<div class=”rg-loading”></div>
<div class=”rg-caption-wrapper”>
<div style=”display:none;”>
<p></p>
</div>
</div>
</div>
</script>

⑤サムネイル部分のHTMLを、ギャラリーを表示させたい位置に挿入。

<div class=”es-carousel-wrapper”>
<div>
<span class=”es-nav-prev”>Previous</span>
<span class=”es-nav-next”>Next</span> </div>
<div>
<ul>
<li><a href=”#”><img src=”サムネイル画像へのパス/1.jpg” data-large=”オリジナル画像へのパス/1.jpg” alt=”image01″ data-description=”写真のタイトルや説明” /></a></li>

<!–写真の枚数分繰り返す–>

</ul>
</div>
</div>
<!– End Elastislide Carousel Thumbnail Viewer –>
</div>
<!– rg-thumbs –>
</div>
<!– rg-gallery –>

⑥画像はオリジナルサイズのものと、
サムネイルサイズ(65×65)のものを用意します。

オリジナル画像はそのままimgフォルダへ
サムネイル画像はimg/thumbsフォルダへ

これで準備が整いました!

デモページはこちら。

設置で困ったら・・・

◆キャプションに小文字のアルファベットを使いたい!

デフォルトでは、キャプションにアルファベットを使用すると、全て大文字になってしまいます。小文字を使いたい場合は、CSSを編集します。

css/style.cssの50行目

.rg-caption p{
font-size:11px;
letter-spacing:2px;
font-family: ‘Trebuchet MS’, ‘Myriad Pro’, Arial, sans-serif; line-height:16px;
padding:0 15px;
text-transform:uppercase;
}

最後の、text-transform:uppercase;をコメントアウトするか、消してしまいましょう。これで、小文字で表示できます。

 ◆サムネイルを下部に表示したい!

デモでギャラリー上部に配置されているサムネイル群。
ギャラリー下部に配置したいときは、下記のように変更します。

 gallery.jsの142行目

$(‘#img-wrapper-tmpl’).tmpl( {itemsCount : itemsCount} ).appendTo( $rgGallery );

$(‘#img-wrapper-tmpl’).tmpl( {itemsCount : itemsCount} ).prependTo( $rgGallery );
appendToをprependToに変更。

これで、ギャラリーがサムネイル上部に出力され、サムネイルが下部に配置されます。

サムネイルの表示・非表示を切り替えるアイコンを消したい!

デフォルトでは、サムネイルの上部にアイコンが2つ表示されています。
不要な場合は、消してしまいましょう。

gallery.jsの113行目

$rgGallery.prepend( $(‘<div class=”rg-view”/>’).append( $viewfull ).append( $viewthumbs ) );

//$rgGallery.prepend( $(‘<div class=”rg-view”/>’).append( $viewfull ).append( $viewthumbs ) );
IE9〜、FF、Chrome等で動作確認済み。

 ダウンロードは下記から。

http://tympanus.net/Tutorials/ResponsiveImageGallery/