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

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

sponsored link

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


チュートリアルページ: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と同じようです。

ウィンドウサイズに合わせて表示するカルーセルスライドのjQueryプラグイン-Elastislide | memocarilog

画像にリンクを設定したい場合

(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 – A Responsive jQuery Carousel Plugin | Codrops のコメント欄

サンプル

作ったサンプルのデモ : Elastislide Carousel-memocarilogdemo

elastislide.jsの”$.elastislide.defaults ”のデフォルトの値を変更する事で、スピードやeasingの動きを変更しました。

サムネイル表示のオンオフのボタン部分は110行目くらいにある、$viewfullと$viewthumbsに入っている値を消して非表示にしました。

// top right buttons: hide / show carousel
	var $viewfull	= $(''),//←消した
	$viewthumbs	= $('');//←消した

サンプルのコードは次ページ以降にあります。

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

関連する記事

Trackback url:http://memocarilog.info/jquery/3860/trackback

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

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

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

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

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

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

    失礼致します。

    • 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 );
      

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

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

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

    もし可能であれば一つだけお教え頂きたいのですが、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タグを入れれば反映されるようになると思います。
      よろしくお願いします。

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

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

Leave a comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

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