色々なタイプの画像ギャラリーが実装できる「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デモ

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

関連記事

no image

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

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

no image

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

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

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

「Responsive Image Gallery with Thumbnail Carousel」はレスポンシブにも対応した画像ギャラリーが実装できるjQueryプラグインです。Twitterの「最

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

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

開閉できるツリー構造を表現できる「jsTree」

「jsTree」は、Webサイト上にツリー構造を表示してくれるJQueryラグインです。実際、使うかというのは謎ですが、ブログ内に設置する機会があり使用してみましたので参考まで。 ダウンロードはこち

テキストに動きをつけるプラグイン

テキストをフェイド・スライド「Textillate」 テキストをフェイドイン(アウト)、スライドイン(アウト)してくれます。 ダウンロード デモ My Tit

カウントダウン プラグイン

FlipClock #時間 FlipClock サイト [browser-shot url="http://xdsoft.net/jqplugins/flipcountd

no image

時刻入力に便利な「Timepicker for Bootstrap」(Bootstrap 2)

「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 目次 実装方法 モダール形式 Datepicker

数値入力スライダー「jQuery Simple Slider」

「jQuery Simple Slider」はスライダーを使用して数値設定が行えるようにしてくれるjQueryプラグインです。"Unobtrusive Numerical Slider"とあるように余

リストをインクリメント検索・ソートできる「List.js」

List.jsは、リストをインクリメント検索やソートができるjQueryプラグインです。 ダウンロードはこちら リストだけでなくテーブルにも実装可能のようです。 スクリプト

Comment

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

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

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

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

kwski へ返信する コメントをキャンセル

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

*

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

    PAGE TOP ↑