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

画像ギャラリーといえば、画像のサムネイルがずらっとならんで・・・みたいのが多いと思います。
そんな中で、今回紹介するjReelGalleryは一風変わった表現が可能です。
リール式画像ギャラリーJavaScript「jReelGallery -- Cross browser fluid jQuery image gallery」サンプル

使用方法
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「jReelGallery -- Cross browser fluid jQuery image gallery」サンプル

sponsors

「リール式画像ギャラリーJavaScript「jReelGallery -- Cross browser fluid jQuery image gallery」」をシェアする

記事作成:
記事URL:

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