【jQuery】レスポンシブなサムネイル付きスライドショー「Responsive Image Gallery」
Contents
- 1 【jQuery】レスポンシブなサムネイル付きスライドショー
「Responsive Image Gallery」
- 1.1 【設置方法】 ①下記のサイトからソースをダウンロードします。
- 1.2 ②bodyの閉じタグ</body>の直前で、必要なjsを読み込ませます。
- 1.3 ③head内にcssへのリンクを挿入します。
- 1.4 ④headの閉じタグ</head>の直前にギャラリー出力用ソースを挿入します。
- 1.5 ⑤サムネイル部分のHTMLを、ギャラリーを表示させたい位置に挿入。
- 1.6 ⑥画像はオリジナルサイズのものと、 サムネイルサイズ（65×65）のものを用意します。
- 1.7 ◆キャプションに小文字のアルファベットを使いたい！
- 1.8 ◆サムネイルを下部に表示したい！
- 1.9 ◆ サムネイルの表示・非表示を切り替えるアイコンを消したい！
【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に変更。
これで、ギャラリーがサムネイル上部に出力され、サムネイルが下部に配置されます。
◆ サムネイルの表示・非表示を切り替えるアイコンを消したい！
デフォルトでは、サムネイルの上部にアイコンが２つ表示されています。
不要な場合は、消してしまいましょう。
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等で動作確認済み。
ダウンロードは下記から。