jQueryで作る、サムネイルがカルーセルスライドするレスポンシブなイメージギャラリー
「Elastislide – A Responsive jQuery Carousel Plugin | Codrops」の応用版のような感じで、サムネイル部分がカルーセルスライドする、レスボンシブなイメージギャラリーのチュートリアルが公開されていましたので参考に「サンプル」を作ってみました。
レスポンシブな点と沢山の画像を見せるのにかっこいいなぁと思って使ってみましたが、「BorisMoore/jquery-tmpl」を使っていたりで、私には知識不足でよく分からず、コピペして使わせて頂いただけという感じです…。
参考:
jQuery公式のテンプレートplugin 「jQuery Templates」-JavaScript Library Archive
ASP.NET MVC、jQuery template、恋の予感 – まめしば雑記
jQuery公式のテンプレートplugin 「jQuery Templates」-JavaScript Library Archive
ASP.NET MVC、jQuery template、恋の予感 – まめしば雑記
チュートリアルページ：Responsive Image Gallery with Thumbnail Carousel | Codrops
チュートリアルページよりデモのファイルもダウンロードできます。
作り方
画像はプレビュー用の画像とサムネイル用の２種類の画像を用意します。
ヘッダーの部分
プレビュー（大きい画像の部分）を表示させるスクリプトをヘッダー内に記入します。サムネイルを一つずつ読み込んで表示するようになっています。
<script id="img-wrapper-tmpl" type="text/x-jquery-tmpl">
<div class="rg-image-wrapper">
{{if itemsCount > 1}}
<div class="rg-image-nav">
<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 class="rg-caption" style="display:none;">
<p></p>
</div>
</div>
</div>
</script>
bodyの部分
下記のようにサムネイルカルーセル全体を二つのボックスで囲みます。サムネイルカルーセルはリスト形式でマークアップします。
画像へのリンク部分ですが、サムネイル画像へのパスを記入し、その後に「data-large=”images/1.jpg”」とプレビュー画像へのパスを記入します。キャプションがある場合は「description=”Some description”」のように記入します。
<div id="rg-gallery" class="rg-gallery">
<div class="rg-thumbs">
<!-- Elastislide Carousel Thumbnail Viewer -->
<div class="es-carousel-wrapper"><!-- ← サムネイルカルーセル全体を包むdiv -->
<div class="es-nav"><!-- ←サムネイルのナビゲーション -->
<span class="es-nav-prev">Previous</span>
<span class="es-nav-next">Next</span>
</div>
<div class="es-carousel"><!-- ←サムネイルカルーセル部分を包むdiv -->
<ul><!-- サムネイルをリストでマークアップ -->
<li>
<a href="#">
<img src="images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="Some description" />
</a>
</li>
<li>...</li>
</ul>
</div>
</div>
<!-- End Elastislide Carousel Thumbnail Viewer -->
</div><!-- rg-thumbs -->
</div><!-- rg-gallery -->
＜/body＞の直前に下記のようにjQuery本体やプラグイン等を読み込みます。
チュートリアルサイトで解説されているコードはダウンロードファイルのgallery.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>
CSSのファイルはstyle.cssにプレビュー部分のスタイルが書かれていて、elastislide.cssにサムネイルのスタイルがあります。
サムネイル部分で使えるオプションはelastislide.jsと同じようです。
画像にリンクを設定したい場合
（2012/11/4 追記）
このまま設置すると画像にリンクを貼っていてもクリックできないという現象がおこります。その場合は、jquery.elastislide.js ファイルの265行目の以下の箇所、” return false; ” となっている所をコメントアウトするか、削除するとリンクをクリックして飛べるようになります。
// item click event
this.$items.bind(‘click.elastislide’, function( event ) {
instance.options.onClick( $(this) );
return false; //←ここの部分
});
サンプル
作ったサンプルのデモ : Elastislide Carousel-memocarilogdemo
elastislide.jsの”$.elastislide.defaults ”のデフォルトの値を変更する事で、スピードやeasingの動きを変更しました。
サムネイル表示のオンオフのボタン部分は110行目くらいにある、$viewfullと$viewthumbsに入っている値を消して非表示にしました。
// top right buttons: hide / show carousel
var $viewfull = $(''),//←消した
$viewthumbs = $('');//←消した
サンプルのhtml部分のコード
<head>
<title>Elastislide Carousel-memocarilogdemo</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="elastislide.css" />
<script id="img-wrapper-tmpl" type="text/x-jquery-tmpl">
<div class="rg-image-wrapper">
{{if itemsCount > 1}}
<div class="rg-image-nav">
<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 class="rg-caption" style="display:none;">
<p></p>
</div>
</div>
</div>
</script>
</head>
<body>
<div class="content">
<h1>memocarilogdemo-Responsive Image Gallery with Thumbnail Carousel</h1>
<div id="rg-gallery" class="rg-gallery">
<div class="rg-thumbs">
<!-- Elastislide Carousel Thumbnail Viewer -->
<div class="es-carousel-wrapper">
<div class="es-nav">
<span class="es-nav-prev">Previous</span>
<span class="es-nav-next">Next</span>
</div>
<div class="es-carousel">
<ul>
<li><a href="#"><img src="images/thumbs/photo1.jpg" data-large="images/photo1.png" alt="image01" /></a></li>
<li><a href="#"><img src="images/thumbs/photo2.jpg" data-large="images/photo2.png" alt="image02" /></a></li>
<li><a href="#"><img src="images/thumbs/photo3.jpg" data-large="images/photo3.png" alt="image03" data-description="A plaintful story from a sistering vale" /></a></li>
<li><a href="#"><img src="images/thumbs/photo4.jpg" data-large="images/photo4.jpg" alt="image04" data-description="My spirits to attend this double voice accorded" /></a></li>
<li><a href="#"><img src="images/thumbs/photo5.jpg" data-large="images/photo5.jpg" alt="image05" data-description="And down I laid to list the sad-tuned tale" /></a></li>
<li><a href="#"><img src="images/thumbs/photo6.jpg" data-large="images/photo6.jpg" alt="image06" data-description="Ere long espied a fickle maid full pale" /></a></li>
<li><a href="#"><img src="images/thumbs/photo18.jpg" data-large="images/photo18.jpg" alt="image07" data-description="Tearing of papers, breaking rings a-twain" /></a></li>
<li><a href="#"><img src="images/thumbs/photo8.jpg" data-large="images/photo8.jpg" alt="image08" data-description="Storming her world with sorrow's wind and rain" /></a></li>
<li><a href="#"><img src="images/thumbs/photo9.jpg" data-large="images/photo9.jpg" alt="image09" data-description="Upon her head a platted hive of straw" /></a></li>
<li><a href="#"><img src="images/thumbs/photo10.jpg" data-large="images/photo10.jpg" alt="image10" data-description="Which fortified her visage from the sun" /></a></li>
<li><a href="#"><img src="images/thumbs/photo11.jpg" data-large="images/photo11.jpg" alt="image11" data-description="Whereon the thought might think sometime it saw" /></a></li>
<li><a href="#"><img src="images/thumbs/photo12.jpg" data-large="images/photo12.jpg" alt="image12" data-description="The carcass of beauty spent and done" /></a></li>
<li><a href="#"><img src="images/thumbs/photo13.jpg" data-large="images/photo13.jpg" alt="image13" data-description="Time had not scythed all that youth begun" /></a></li>
<li><a href="#"><img src="images/thumbs/photo14.jpg" data-large="images/photo14.jpg" alt="image14" data-description="Nor youth all quit; but, spite of heaven's fell rage" /></a></li>
<li><a href="#"><img src="images/thumbs/photo15.jpg" data-large="images/photo15.jpg" alt="image15" data-description="Some beauty peep'd through lattice of sear'd age" /></a></li>
<li><a href="#"><img src="images/thumbs/photo16.jpg" data-large="images/photo16.jpg" alt="image16" data-description="Oft did she heave her napkin to her eyne" /></a></li>
<li><a href="#"><img src="images/thumbs/photo17.jpg" data-large="images/photo17.jpg" alt="image17" data-description="Which on it had conceited characters" /></a></li>
<li><a href="#"><img src="images/thumbs/photo18.jpg" data-large="images/photo18.jpg" alt="image18" data-description="Laundering the silken figures in the brine" /></a></li>
<li><a href="#"><img src="images/thumbs/photo19.jpg" data-large="images/photo19.jpg" alt="image19" data-description="That season'd woe had pelleted in tears" /></a></li>
(略)
</ul>
</div>
</div><!-- End Elastislide Carousel Thumbnail Viewer -->
</div><!-- rg-thumbs -->
</div><!-- rg-gallery -->
<p><a href="#sample">▲元のページへ戻る</a></p>
</div><!-- content -->
</div><!-- container -->
<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>
サンプルのstyle.cssのコード
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html,body {
margin:0;
padding:0;
}
ol,ul {
list-style:none;
}
.content{
width: 95%;
margin: 0 auto;
}
h1,p{
text-align: center;
}
.rg-image-wrapper{
position:relative;
padding:20px 30px;
}
.rg-image{
position:relative;
text-align:center;
line-height:0px;
}
.rg-image img{
max-height:100%;
max-width:100%;
}
.rg-image-nav a{
position:absolute;
top:0px;
left:0px;
background:transparent url(images/arrow_left_big.png) no-repeat -20% 50%;
width:50px;
height:100%;
text-indent:-9000px;
cursor:pointer;
opacity:0.8;
outline:none;
}
.rg-image-nav a.rg-image-nav-next{
right:0px;
left:auto;
background:transparent url(images/arrow_right_big.png) no-repeat -20% 50%;
}
.rg-image-nav a:hover{
opacity:0.8;
}
.rg-caption {
text-align:center;
margin-top:15px;
position:relative;
}
.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;
}
.rg-view{
height:30px;
}
.rg-view a{
display:block;
float:right;
width:16px;
height:16px;
margin-right:3px;
border:3px solid #464646;
opacity:0.8;
}
.rg-view a:hover{
opacity:1.0;
}
.rg-view a.rg-view-full{
background-position:0px 0px;
}
.rg-view a.rg-view-selected{
background-color:#6f6f6f;
border-color:#6f6f6f;
}
.rg-view a.rg-view-thumbs{
background-position:0px -16px;
}
.rg-loading{
width:46px;
height:46px;
position:absolute;
top:50%;
left:50%;
background:#000 url(images/ajax-loader.gif) no-repeat center center;
margin:-23px 0px 0px -23px;
z-index:100;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
opacity:0.7;
}
サンプルのElastislide.cssのコード
.es-carousel-wrapper{
padding:10px 30px ;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
position:relative;
margin-bottom:20px;
}
.es-carousel{
overflow:hidden;
}
.es-carousel ul{
display:none;
}
.es-carousel ul li{
height:100%;
float:left;
display:block;
}
.es-carousel ul li a{
display:block;
border-style:solid;
border-color:#222;
opacity:0.8;
-webkit-touch-callout:none;
/* option */
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.es-carousel ul li.selected a{
border-color:#666;
opacity:1.0;
}
.es-carousel ul li a img{
display:block;
border:none;
max-height:100%;
max-width:100%;
}
.es-nav span{
position:absolute;
top:50%;
left:10px;
background:transparent url(images/arrow_left.png) no-repeat top left;
width:26px;
height:26px;
margin-top:-10px;
text-indent:-9000px;
cursor:pointer;
opacity:0.8;
}
.es-nav span.es-nav-next{
right:10px;
left:auto;
background:transparent url(images/arrow_right.png) no-repeat top left;
}
.es-nav span:hover{
opacity:1.0;
}
プラグインを使うだけではなくてもっと中身を理解できる様にならなくてはと、思いました…。ちょっと複雑になるともう理解できないので、もっと勉強しなくては…。
同じような質問がありましたね！失礼しました^^！
いえいえー。記事をみて頂いてありがとうございます。無事にリンク設置できるとよいですね。
記事にも追記で書いておきますー。
初めまして。Web制作初心者です。
jqueryのスライドショーを探していたらこのページに辿り着きました。（http://orientalpage.heteml.net/memocarilog/jquery/3860）
是非このサンプルを参考にさせて頂きたいのですが、一つ質問させて下さい。
このサンプルの場合はサムネイルが上、スライドショーが下の配置になっていますが、これを逆にすることは可能でしょうか？（サムネルが下、スライドショーが上）
cssかhtmlでどうにかするのだと思い色々試したのですがうまくいきませんでした。
もしお答え頂けるようでしたら幸いでございます。
よろしくお願い致します。
失礼致します。
ota さま
初めまして。参考にして下さりありがとうございます。
このスクリプトはjsファイル側でスライドショー部分の位置を決めているため、jsファイル側で変更します。
当記事サンプルでいうと、gallery.js ファイルの142行目(下記のようなコードがあるところ)の appendTo の箇所を、prependTo に書き換えます。
http://orientalpage.heteml.net/memocarilog/memocarilog-demo/ResponsiveImageGallery/js/gallery.js
$('#img-wrapper-tmpl').tmpl( {itemsCount : itemsCount} ).appendTo( $rgGallery ); ↑の行をを以下のように書き換えます。 $('#img-wrapper-tmpl').tmpl( {itemsCount : itemsCount} ).prependTo( $rgGallery );これでサムネイルとスライドショーの位置が入れ替わると思います。
スライドショーの位置変更できました。自分がやりたい形のスライドショーになりました。
本当にありがとうございます！
はじめまして！
おかげさまで設置が出来ました(^^)
こういった情報を丁寧に自分の様な初心者にもわかりやすくご説明頂いて、本当に感謝です。
もし可能であれば一つだけお教え頂きたいのですが、data-discription内（キャプション）の文章を改行したいのですが、まったくもって方法がわからず困り果てております。
身勝手なご質問で大変恐縮ですが、ご教示頂ければ幸いです。
tomohiro さま
初めまして。コメントありがとうございます。
改行の件ですが、Gallery.js の222行目付近にある下の行の最後 text( title ) を html( title )に変更します。
$rgGallery.find('div.rg-caption').show().children('p').empty().text( title );↓ 以下のように変更
$rgGallery.find('div.rg-caption').show().children('p').empty().html( title );これで、data-description内の改行したい場所に brタグを入れれば反映されるようになると思います。
よろしくお願いします。
涙が出そうです。
こんな見ず知らずのお馬鹿者にこんなに親切に教えて頂いて（泣）
本当に有難うございます！
いえいえそんな（笑）
お役に立ったならうれしいです(^^)
初めまして。web制作初心者です。
とってもわかりやすく、このページのおかげで設置することができました〜！
一つ質問なのですが、このスライドショーを同ページに複数設置することは可能なのでしょうか…？
モーダルウィンドウ内にこのスライドショーを設置する形で複数設置したいと思っているのですが、二つ以上になったときどうしたらいいのか、そもそも出来るかどうかもわからず…。。
こんな質問で恐縮ですが、ご教示いただけましたら幸いです。
よろしくお願いいたします。
asaco さま
はじめまして。ご参考ありがとうございます。
改めてこのギャラリーのコードを少しみてみましたが、デフォルトのまま使うなら複数設置はできないんじゃないかなと思いました。
#img-wrapper-tmpl でかかれているビューアーのテンプレートを複数で使い回わせるようにして、画像の読み取りの部分を変更すればできそうな気もします。具体的なコードは書いてみないと分かりませんが…。
複数設置をさっと行いたいということであれば他のプラグインなどを探した方が早いかもしれませんね……。
あまり具体的にお答えできずすみません。
早速のお返事ありがとうございます！
やっぱりこのままでは出来ないんですね。。残念。。。
でも、身近に相談できる方がおらず、一人で悶々としていたのでスッキリしました〜
今回は他のプラグインを探してみたいと思います。
ありがとうございました！