色々なタイプの画像ギャラリーが実装できる「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>
関連記事
-
-
開閉できるツリー構造を表現できる「jsTree」
「jsTree」は、Webサイト上にツリー構造を表示してくれるJQueryラグインです。実際、使うかというのは謎ですが、ブログ内に設置する機会があり使用してみましたので参考まで。 ダウンロードはこち
-
-
わずかなコードで画像をサムネイル化してくれる「MyThumbnail.js」
サムネイル化してくれるJQueryプラグインは数多くありますが、この「MyThumbnail」はわずか数行で簡単にページ上の画像を指定サイズにサムネイル化してくれます。 ダウンロード 画像とし
-
-
シンプルにポップアップを実装できる「PopBox」
「PopBox」は、シンプルにポップアップを実装できるjQueryプラグインです。 スクリプト HTML Click Here!
-
-
画像をモザイク処理(ピクセル化)してくれるプラグイン「Pixelate.js」
「Pixelate.js」はその名の通り画像をピクセル化してくれるjQueryプラグインです。画面ロード時にピクセル化しておき、画像にマウスオーバーすると暴露してくれます。 ダウンロード | デモ
-
-
カウントダウン プラグイン
FlipClock #時間 FlipClock サイト [browser-shot url="http://xdsoft.net/jqplugins/flipcountd
-
-
実装方法が選べるツールチップ用プラグイン「Smallipop」
Smallipopは、ツールチップの実装をマークアップベース(HTMLに書き出し)とJavascriptベース両方で行えるjQueryプラグインです。世の中この手のツールは結構片方でのみだったりします
-
-
「jqPlot」 カスタマイズ
以前、ここで使用した「jqPlot」ですが、色々なキーワードで訪問される方がいらっしゃったので、それを元ネタとして使わせてもらいカスタマイズ方法を紹介したいと思います。 以下4つのファイルへリンクし
-
-
マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」
「Mosaic」は、画像などにマウスオーバーすると、キャプションをスライド(イン/アウト)もしくはフェイド(イン/アウト)させてくれるjQueryプラグインです。ダウンロードはこちら スクリプト
-
-
入力テキストの文字数をカウントしてくれる「Textchange」
Twitterのようにinputやtextareaに入力した際に、文字数をカウント(ダウン)してくれるとユーザの利便性が上がります。今回使用したTextChangeは、それ以外にも入力のイベントに対し
-
-
シンプルな画像スライダー/ギャラリー用プラグイン
スライダーやギャラリーを実装できるjQueryプラグインのうちシンプルなものを集めてみました。ベースはシンプルですが、オプションなどを使用してカスタマイズが豊富なものもたくさんありますね。 シン
- PREV
- 大阪
- NEXT
- C++の型には最小の範囲だけが明記されている理由
Comment
Sさんからの問い合わせ
(*メールが不達のためこちらにて回答)
A.
お問い合わせありがとうございます。
後者になります。具体的にHTMLでいうと、スクリプトをhead内に、実装・オプションをbody内に記述していただければ問題なく動作すると思います。
https://github.com/Sebobo/jquery.rondell
こちらの右下のDownload ZIPからダウンロード・解凍いただいた中のexampleフォルダ内にサンプルのHTMLがありますのでそちらを参照してみて下さい。