2.7kbの軽量画像ギャラリーJavaScript「Easy Gallery for jQuery」

画像ギャラリーのJavaScriptも豊富に出回り、機能がますますリッチになっています。
でももっとシンプルで軽いものが良いという方もいるかと思います。
Easy Gallery for jQueryは2.7kbの軽量画像ギャラリーです。

使用方法

Easy Gallery for jQueryからファイルをダウンロードします。
またjQueryからjquery.jsと、必要に応じてhttp://gsgd.co.uk/sandbox/jquery/easing/からjquery.easing.1.3.jsをダウンロードします。


<script type="text/javascript" src="jquery-1.4.2.min.js"></script>	
<script type="text/javascript" src="jquery.easing.1.3.js"></script>	
<script type="text/javascript" src="easy-gallery.js"></script>
<script>
$(function(){
    $("#id名").egallery({
        width:200, //横幅
        height:200, //高さ
        speed: 1000, //切り替えスピード
        delay:4000, //表示時間
        easing:'easeInOutBack', //easingプラグインのエフェクト
        thumbs:'numbers', //サムネイル表示（none,numbers,image）
        thumbClass:'tclass', //サムネイルのクラス名
        thumbImage: 'path-to-image', // サムネイルのパス
        aClass:'ac' //アクティブのクラス名
    });
});
</script>

上記を記述したら画像部分を書きます。


<div id="id名">
    <ul>
        <li><img src="画像パス1" /></li>
        <li><img src="画像パス2" /></li>
        <li><img src="画像パス3" /></li>
		<!-- 以下画像分 -->
    </ul>
</div>
<div id="ssgThumbs"></div>

またCSSで見た目を調整することが可能です。
.tclass → サムネイルのクラス
.ac →アクティブのクラス

サンプル

Javascriptサンプルページ一覧

skuare.net