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

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

関連記事

カルーセル プラグイン

「カルーセル(Carousel)」とは"回転木馬"という意味らしいのですが、jQuery(Javascript)では画像やコンテンツをスライド表示させるもののようです。が、スライダーとの違いはよく分り

no image

シンプルにポップアップを実装できる「PopBox」

「PopBox」は、シンプルにポップアップを実装できるjQueryプラグインです。 スクリプト HTML Click Here!

実装方法が選べるツールチップ用プラグイン「Smallipop」

Smallipopは、ツールチップの実装をマークアップベース(HTMLに書き出し)とJavascriptベース両方で行えるjQueryプラグインです。世の中この手のツールは結構片方でのみだったりします

iTunesのCover Flowのようなギャラリーが実装できる「ContentFlow」

「ContentFlow」は、iTunesのCover Flowのように左右に流れるギャラリーが実装できるjQueryプラグインです。ダウンロード スクリプト 実装

no image

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

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

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

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

入力テキストの文字数をカウントしてくれる「Textchange」

Twitterのようにinputやtextareaに入力した際に、文字数をカウント(ダウン)してくれるとユーザの利便性が上がります。今回使用したTextChangeは、それ以外にも入力のイベントに対し

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

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

シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlider」

「bxSlider」はシンプルに設置でき、かついろいろとオプションが設定可能なスライダー用プラグインです。サイト CDN 標準でもしくはオプションで実現できそうなこと スワイプ キャプション

no image

バリデーション プラグイン

Nod Nod サイト | デモ [browser-shot url="http://rickharrison.github.io/validate.js/" width="2

Comment

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

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

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

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

Message

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

*

PAGE TOP ↑