レスポンシブに対応した画像ギャラリーが実装できる「Responsive Image Gallery」

「Responsive Image Gallery with Thumbnail Carousel」はレスポンシブにも対応した画像ギャラリーが実装できるjQueryプラグインです。Twitterの「最近の画像」にインスパイアされて作成したらしい。
#サムネイル #レスポンシブ
ダウンロードはこちら
スクリプト
<link href="css/style.css" type="text/css" rel="stylesheet"> <link href="css/elastislide.css" type="text/css" rel="stylesheet"> <script src="js/jquery.tmpl.min.js" type="text/javascript"> <script src="js/jquery.easing.1.3.js" type="text/javascript"> <script src="js/jquery.elastislide.js" type="text/javascript"> <script src="js/gallery.js" type="text/javascript">
実装
<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> <div id="rg-gallery" class="rg-gallery"> <div class="rg-thumbs"> <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="image1_thumb.jpg" data-large="image1.jpg" alt="image12" data-description="Taizo Ichinose #12" /></a></li> <li><a href="#"><img src="image2_thumb.jpg" data-large="image2.jpg" alt="image11" data-description="Taizo Ichinose #11" /></a></li> <li><a href="#"><img src="image3_thumb.jpg" data-large="image3.jpg" alt="image10" data-description="Taizo Ichinose #10" /></a></li> <li><a href="#"><img src="image4_thumb.jpg" data-large="image4.jpg" alt="image07" data-description="Taizo Ichinose #07" /></a></li> <li><a href="#"><img src="image5_thumb.jpg" data-large="image5.jpg" alt="image05" data-description="Taizo Ichinose #05" /></a></li> </ul> </div> </div> </div> </div>
サムネイル表示部分ですが、それ専用の画像を用意しないといけないのだろうか。。。
まだ、あまり説明できないですが、参考まで。いろいろいじってみます。
デモ
P.S.「カルーセル 画像」で検索するといろいろ違うもんが出てきますのでご注意を。
関連記事
-
-
グリッドレイアウト プラグイン
Waterfall サイト pinbox [browser-shot url="http://kayschneider.github.io/pinbox/example/pinb
-
-
ファイルアップロードフォーム プラグイン
Ajax File Upload Form with jQuery Ajax File Upload Form with jQuery [browser-shot url="h
-
-
商用利用フリー Lightbox プラグイン
商用利用フリー(投稿時)のlightbox用プラグインをまとめてみました。最新のライセンスに関しては各サイトに確認をお願いいたします。) lightboxの中にもギャラリー表示が可能なもの、ギャラリ
-
-
テキストボックスの入力値を数値限定にしてくれる「jQuery - numeric」
「jQuery - numeric」は、テキストボックスへの入力を数字のみに制限してくれるjQueryプラグインです。正/負、整数/小数点 チェックまで限定してくれます。ダウンロード スクリプト
-
-
エフェクト豊富なニュースティッカー用プラグイン「inewsticker」
「inewsticker」は、色々なエフェクトでニュースティッカーが実装できるjQueryプラグインです。ダウンロード エフェクトには、fade/slide/typingの3つが可能です。 デ
-
-
[続きを読む]でテキストを省略、開閉できる「jTruncate」「jTruncSubstr」
「jTruncate」は、長くなってスペースをとってしまう文章をなどであらかじめ指定した文字数で省略して表示してくれるjQueryプラグインです。 ダウンロードはこちら デモ スクリプト
-
-
リストをインクリメント検索・ソートできる「List.js」
List.jsは、リストをインクリメント検索やソートができるjQueryプラグインです。 ダウンロードはこちら リストだけでなくテーブルにも実装可能のようです。 スクリプト
-
-
レスポンシブ対応の画像スライダー・ギャラリー用プラグイン
画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からレスポンシブ対応のものをいくつか集めてみました。 シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlide
-
-
バリデーション プラグイン
Nod Nod サイト | デモ [browser-shot url="http://rickharrison.github.io/validate.js/" width="2
-
-
様々なタイプのグラフ表示をカバーする「jqPlot」(折れ線グラフ)
Webページにグラフ表示する機会があったので、探してみました。 今回、使用してみた「jqPlot」がシンプルにもできてカスタマイズも豊富でいいです。グラフ用データの形式が少しクセがあり、動的に扱う際