記述がシンプルなラウンド型ギャラリーJavaScript「Rondell」

奥行き感を出しながら画像を回して表示させたい。
そんな時にはシンプルな記述で簡単導入できる「jQuery Rondell」を採用しましょう。

使用方法

Sebobo/jquery.rondellからファイル一式をダウンロード。


<link rel="stylesheet" href="jquery.rondell.css" type="text/css" media="all" /> 
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.rondell.js"></script>
<script>
$(function() {
  $('#id名 > div').rondell({
    autoRotation: { //自動再生設定
      enabled: true,
      direction: 0, //1で逆回り
      delay: 5000 //遷移速度
     }
  });
});
</script>

自動再生の他にもコントローラーの設定、半径、拡大率、透過など多くの設定が可能です。
さて、HTML側は下記のように記述します。


<div id="id名">
	<div>
		<img src="画像パス1">
			<p>キャプション</p>
	</div>
	<div>
		<img src="画像パス2">
			<p>キャプション</p>
	</div>
	<!-- 以下画像分 -->
</div>

サンプル

My favourite band.

Javascriptサンプルページ一覧

skuare.net