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

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

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

no image

[続きを読む]でテキストを省略、開閉できる「jTruncate」「jTruncSubstr」

「jTruncate」は、長くなってスペースをとってしまう文章をなどであらかじめ指定した文字数で省略して表示してくれるjQueryプラグインです。 ダウンロードはこちら デモ スクリプト

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

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

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

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

画像ズーム プラグイン

画像をズームしてくれるプラグインには、ツールチップ的にサムネイルにマウスオーバーした部分をズームアップしたり元画像を表示したり、その画像内でインナーズームする というような機能があるようです。

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

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

no image

ファイルアップロードフォーム プラグイン

Ajax File Upload Form with jQuery Ajax File Upload Form with jQuery [browser-shot url="h

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

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

no image

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

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

シンプルにモーダルウィンドウを実装できる「leanModal」

「leanModal」は、シンプルにモーダルウィンドウを設置できるjQueryプラグインです。オプションは少なめですが、複雑な機能は必要なく単に設置したいという場合にはもってこいのライブラリだと思いま

Comment

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

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

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

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

Message

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

*

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

PAGE TOP ↑