リール式画像ギャラリーJavaScript「jReelGallery -- Cross browser fluid jQuery image gallery」

画像ギャラリーといえば、画像のサムネイルがずらっとならんで・・・みたいのが多いと思います。
そんな中で、今回紹介するjReelGalleryは一風変わった表現が可能です。

使用方法

jReelGalleryからjquery.reelgallery.jsをjQueryからjquery.js、Mouse Wheel Extensionからjquery.mousewheel.jsをダウンロードします。


<script type="text/javascript" src="jquery-1.4.2.min.js"></script>	
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="jquery.reelgallery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("#id名").reelGallery();  
});
</script>

次に以下のように画像ギャラリー部分を記述します。


<div id="id_wrapper">
	<ul id = "id名">
		<li><a href=""><img src="画像パス" width="***" height="***" /></a></li>
		<li><a href=""><img src="画像パス" width="***" height="***" /></a></li>
		<li><a href=""><img src="画像パス" width="***" height="***" /></a></li>
	</ul>
</div>

lightboxによる拡大が前提か、aタグが必要です。
最後にCSSを記述していきます。


<style>
#id_wrapper {height:***px;overflow:hidden;}
#id {height: ***px;list-style:none;}
#id li {height: 1px;margin: 15px 0px;position: relative;}
</style>

サンプル

右上に
Javascriptサンプルページ一覧

skuare.net