レスポンシブに対応した画像ギャラリーが実装できる「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 - numeric」

「jQuery - numeric」は、テキストボックスへの入力を数字のみに制限してくれるjQueryプラグインです。正/負、整数/小数点 チェックまで限定してくれます。ダウンロード スクリプト

マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」

「Mosaic」は、画像などにマウスオーバーすると、キャプションをスライド(イン/アウト)もしくはフェイド(イン/アウト)させてくれるjQueryプラグインです。ダウンロードはこちら スクリプト

入力数値の桁区切り挿入

ユーザに数値を入力してもらう際に区切りを入れるようにすると入力ミスを少なくすることができます。このソースは、SugarJSというものから拝借して少し改変しています。 実装 fu

no image

画像をモザイク処理(ピクセル化)してくれるプラグイン「Pixelate.js」

「Pixelate.js」はその名の通り画像をピクセル化してくれるjQueryプラグインです。画面ロード時にピクセル化しておき、画像にマウスオーバーすると暴露してくれます。 ダウンロード | デモ

Wysiwygエディタ用プラグイン「CKEditor」

「CKEditor」は、Wysiwygエディタを実装できるプラグインです。 ダウンロード | デモ スクリプト 実装 文字数・単語数のカウント表

no image

テキストエリアを自動的にリサイズしてくれる「Autosize」

「Autosize」は、テキストエリアのサイズを入力文字数によって自動的に変更してくれるjQueryプラグインです。標準では、枠を超える文字数を入力するとスクロールバーが表示されますが、かわりに建増し

no image

定期的にAjaxリクエストを送信してくれる「PeriodicalUpdater」

PeriodicalUpdaterは、定期的にpostもしくはgetリクエストを送信してくれるjQueryプラグインです。Twitterのタイムラインのように定期的にツイートをロードしてくれるようなや

ページの画像を非同期で読み込んでくれる「Lazy Load」

「LazyLoad Plugin」は、画像をページのロード時ではなく非同期に読み込んでくれるjQueryプラグインです。設定によりスクロールした際に画像をロードしたりしてくれます。 ダウンロード |

表示パターン豊富なスライダー「flexslider 2」

「flexslider 2」は、シンプルに実装でき、かつカスタマイズ機能が豊富なスライダー用プラグインです。 flexslider 2 オプションや機能 サムネイルナビゲーション 複数表示

no image

グラフ作成 プラグイン

C3.js C3.js サイト [browser-shot url="http://www.chartjs.org/" width="200" imgclass=" ali

Message

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

*

PAGE TOP ↑