色々なタイプの画像ギャラリーが実装できる「Rondell」

「Rondell」は、様々なタイプの画像ギャラリーを実装してくれるjQueryプラグインです。
カルーセル・スライダー・ギャラリーなど一通り実装可能です。

ダウンロード
本家デモ

スクリプト

<script src="jquery.min.js" type="text/javascript"></script>
<link href="/dist/jquery.rondell.min.css" type="text/css" rel="stylesheet">
<script src="/dist/jquery.rondell.min.js" type="text/javascript"></script>

実装

<div id="rondell">
    <img src="イメージ1" alt="イメージのキャプション1"/>
    <img src="イメージ2" alt="イメージのキャプション2"/>
    ....
    <img src="イメージ5" alt="イメージのキャプション5"/>
</div>

オプション

child selector
オプション(ここの絵はよく説明されています。)

<script type="text/javascript">
$(document).ready(function(){
  $("#rondell > *").rondell({
    size: {
      width: 1200,
      height: 800
    },
    preset: "carousel",
    radius: {
      x: 200
    },
    center: {
      left: 600,
      top: 100
    },
    itemProperties: {
      size: {
        width: 150,
        height: 100
      }
    } 
  });
});
</script>

デモ
Thumnailsデモ

  • このエントリーをはてなブックマークに追加

関連記事

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

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

selectボックスを華麗にしてくれる「Chosen」「Select2」

selectボックスに当てるjQueryプラグインを色々探してみましたがこれに決めました。シングルやマルチ、またグループにも対応しています。インスタンス検索してくれるのが決め手 Chosen CDN

no image

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

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

no image

クリックするとテキストボックスにかわるラベルを実装

Flickrなどでは、写真の編集画面でキャプションをラベルとして表示しておきクリックするとテキストボックスやテキストエリアに変換してくれて編集させるようなインターフェイスを実装しています。結構いいです

no image

テーブル・リスト要素を便利にしてくれるプラグイン

レスポンシブに対応したテーブルを実装できる「FooTable」 リストをインクリメント検索・ソートできる「List.js」 colResizable #カラム幅可変

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

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

no image

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

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

マウスオーバーでキャプション表示してくれる プラグイン

画像マウスオーバーするとキャプションを出現させるプラグイン (jQuery 1.10.2で動作確認のできたものに限定しています。デモ一覧) imgタグの#alt属性から自動でキャプションを生成

no image

要素を折りたたみできる「nestedAccordion」

「nestedAccordion」は、クリックすると要素を開閉(折りたたみ)できるjQueryプラグインです。名前の通りネストして、アコーディオンの中にアコーディオンも実装できます。ダウンロードはこち

no image

エフェクト豊富なニュースティッカー用プラグイン「inewsticker」

「inewsticker」は、色々なエフェクトでニュースティッカーが実装できるjQueryプラグインです。ダウンロード エフェクトには、fade/slide/typingの3つが可能です。 デ

Comment

  1. Sさんからの問い合わせ
    (*メールが不達のためこちらにて回答)

    こちらのページに掲載のrondellについてですが、スクリプトと、実装と、オプションでわかれておりますが、これは、それぞれファイルを作成し、親ファイルの中に入れ込むと考えてよろしいですか?
    もしくは、メモ帳にスクリプト、実装、オプションの順に記述し、一つのファイルでrondellが起動するのでしょうか?教えてください。

    なお、jqueryは、ダウンロードするのではなく、グーグルから引っ張ろうと思います。

    A.
    お問い合わせありがとうございます。
    後者になります。具体的にHTMLでいうと、スクリプトをhead内に、実装・オプションをbody内に記述していただければ問題なく動作すると思います。
    https://github.com/Sebobo/jquery.rondell
    こちらの右下のDownload ZIPからダウンロード・解凍いただいた中のexampleフォルダ内にサンプルのHTMLがありますのでそちらを参照してみて下さい。

Message

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

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    PAGE TOP ↑