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

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

関連記事

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

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

no image

ローソク足チャート「jqPlot」

「ローソク足チャート」は株価の4本値を表示するグラフでよく使われるグラフです。 一つのプロットでOHLC(Open, High, Low, Close) それぞれ、Openは始値、Highは高値、

画像ズーム プラグイン

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

select(list)ボックスを左右に並べて視覚的に使いやすくしてくれる「Multiselect」

「Multiselect」は、selectボックスを左右に配置して、選択したもの・していないものを左右に分けてくれるjQueryプラグインです。視覚的に使いやすくしてくれます。ダウンロードはこちら

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

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

jqPlot - Legend(凡例) オプション

jqPlotの凡例(Legend)の設定オプションのまとめです。前提は、こちらを参照して下さい。 目次 凡例を表示 凡例の位置 [location, placement] 凡例のフォ

no image

ポップアップ・モーダル ウィンドウ プラグイン

ポップアップ シンプルにポップアップを実装できる「PopBox」 実装方法が選べるツールチップ用プラグイン「Smallipop」 Bootstrap Popovers

no image

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

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

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

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

no image

日付入力に便利な「Datepicker for Bootstrap」

「Datepicker for Bootstrap」はテキストボックスにカレンダーを表示して日付入力を便利にしてくれるjQueryプラグインです。 目次 Datepicker for Boot

Comment

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

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

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

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

Message

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

*

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

Error: cURL error 28: Operation timed out after 5000 milliseconds with 0 bytes received
PAGE TOP ↑