jQueryで作る、サムネイルがカルーセルスライドするレスポンシブなイメージギャラリー

jQueryで作る、サムネイルがカルーセルスライドするレスポンシブなイメージギャラリー

Elastislide – A Responsive jQuery Carousel Plugin | Codrops」の応用版のような感じで、サムネイル部分がカルーセルスライドする、レスボンシブなイメージギャラリーのチュートリアルが公開されていましたので参考に「サンプル」を作ってみました。

レスポンシブな点と沢山の画像を見せるのにかっこいいなぁと思って使ってみましたが、「jQuery.template() – jQuery API(参考:ASP.NET MVC、jQuery template、恋の予感 – まめしば雑記)」を使っていたりで、私には知識不足でよく分からず、コピペして使わせて頂いただけという感じです…。

Responsive Image Gallery with Thumbnail Carousel | Codrops
チュートリアルページ:Responsive Image Gallery with Thumbnail Carousel | Codrops

デモ:Responsive Image Gallery

チュートリアルページよりデモのファイルもダウンロードできます。

作り方

画像はプレビュー用の画像とサムネイル用の2種類の画像を用意します。

ヘッダーの部分

プレビュー(大きい画像の部分)を表示させるスクリプトをヘッダー内に記入します。サムネイルを一つずつ読み込んで表示するようになっています。

<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;
}

プラグインを使うだけではなくてもっと中身を理解できる様にならなくてはと、思いました…。ちょっと複雑になるともう理解できないので、もっと勉強しなくては…。

Related Article

10 Comments & Tracbacks

  • りょう 2012-11-04 9:20 AM

    このページのおかげでelastislideを導入できました!ありがとうございます!
    一つ質問なのですが、elastislideの内の画像にリンクをつけたいのですが、でしっかりリンクがされているにもかかわらず、画像をクリックしてもリンク先に飛びません。何かご存知でしたら教えていただけると非常にたすかります!

    Reply

    • りょう 2012-11-04 9:41 AM

      同じような質問がありましたね!失礼しました^^!

      Reply

      • saori 2012-11-04 11:42 AM

        いえいえー。記事をみて頂いてありがとうございます。無事にリンク設置できるとよいですね。
        記事にも追記で書いておきますー。

        Reply

  • yohei ota 2013-11-05 2:38 PM

    初めまして。Web制作初心者です。

    jqueryのスライドショーを探していたらこのページに辿り着きました。(http://memocarilog.info/jquery/3860)
    是非このサンプルを参考にさせて頂きたいのですが、一つ質問させて下さい。
    このサンプルの場合はサムネイルが上、スライドショーが下の配置になっていますが、これを逆にすることは可能でしょうか?(サムネルが下、スライドショーが上)
    cssかhtmlでどうにかするのだと思い色々試したのですがうまくいきませんでした。
    もしお答え頂けるようでしたら幸いでございます。
    よろしくお願い致します。

    失礼致します。

    Reply

    • saori 2013-11-05 10:56 PM

      ota さま

      初めまして。参考にして下さりありがとうございます。
      このスクリプトはjsファイル側でスライドショー部分の位置を決めているため、jsファイル側で変更します。
      当記事サンプルでいうと、gallery.js ファイルの142行目(下記のようなコードがあるところ)の appendTo の箇所を、prependTo に書き換えます。
      http://memocarilog.info/memocarilog-demo/ResponsiveImageGallery/js/gallery.js

      $('#img-wrapper-tmpl').tmpl( {itemsCount : itemsCount} ).appendTo( $rgGallery );
      ↑の行をを以下のように書き換えます。
      $('#img-wrapper-tmpl').tmpl( {itemsCount : itemsCount} ).prependTo( $rgGallery );
      

      これでサムネイルとスライドショーの位置が入れ替わると思います。

      Reply

      • yohei ota 2013-11-13 11:09 AM

        スライドショーの位置変更できました。自分がやりたい形のスライドショーになりました。
        本当にありがとうございます!

        Reply

  • tomohiro 2013-12-18 10:05 AM

    はじめまして!
    おかげさまで設置が出来ました(^^)
    こういった情報を丁寧に自分の様な初心者にもわかりやすくご説明頂いて、本当に感謝です。

    もし可能であれば一つだけお教え頂きたいのですが、data-discription内(キャプション)の文章を改行したいのですが、まったくもって方法がわからず困り果てております。

    身勝手なご質問で大変恐縮ですが、ご教示頂ければ幸いです。

    Reply

    • saori 2013-12-18 11:21 PM

      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タグを入れれば反映されるようになると思います。
      よろしくお願いします。

      Reply

      • tomohiro 2013-12-19 10:49 PM

        涙が出そうです。
        こんな見ず知らずのお馬鹿者にこんなに親切に教えて頂いて(泣)

        本当に有難うございます!

        Reply

        • saori 2013-12-20 8:58 PM

          いえいえそんな(笑)
          お役に立ったならうれしいです(^^)

          Reply

Leave a Comment

Emailは公開されません。*は必須項目です。

*



次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Categorys

Tags

CSS3 ダッシュボード jQueryプラグイン ヘッダー 素材 Macアプリ コンテンツ スライドショー Facebook php コードサンプル トラブル CSS seo 引っ越し Shareボタン カテゴリー JavaScript お知らせ Photoshop 投稿タイプ WP使い方 mac使い方 Parallels API データベース サイドバー IE ナビゲーション HTML5 WPセキュリティ レスポンシブ query_posts タクソノミー iPhoneアプリ back-to-top iTunes レビュー RSS スマートフォン get_posts() コメント 条件分岐 フリーソフト function