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

「Responsive Image Gallery with Thumbnail Carousel」はレスポンシブにも対応した画像ギャラリーが実装できるjQueryプラグインです。Twitterの「最近の画像」にインスパイアされて作成したらしい。
#サムネイル #レスポンシブ
ダウンロードはこちら

jQuery Touchwipe Pluginを組み込んで(ス)ワイプ処理もできるようにする予定らしい。ですが、試してみたところできました。(違うものを言っているのか、こっちの理解が間違ってるのかもしれないです。)

スクリプト

<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.「カルーセル画像」で検索するといろいろ違うもんが出てきますのでご注意を。

: クレジットカード番号のバリデーションとカード会社を特定してくれる「jQuery Credit Card Validator」

「jQuery Credit Card Validator」は、クレジットカード番号のバリデーションを行ってくれるjQueryプラグインです。入力したカード番号の検証とそれに基づいてカード会社の表示を

: ECサイトの商品表示に使えそうなスライダー「Simple Multi-Item Slider」

「Simple Multi-Item Slider」は、いうなればネスト型の画像スライダーです。ECサイトでの商品陳列からサムネイルメニューなどにも使用できそうです。ダウンロード　デモスクリプ