必要最低限でよさげな画像ギャラリーJavaScript「Craftyslide」

最近は機能もファイルサイズももっさりな画像ギャリーJavaScriptが増えていますが、Craftyslide - A tiny jQuery slideshow pluginは2kbかつシンプルな記述で必要最低限な表現が可能です。

sponsors

使用方法

Craftyslide - A tiny jQuery slideshow pluginからファイル一式をダウンロード。

<link rel="stylesheet" href="craftyslide.css" />
<script src="jquery-1.6.1.min.js" type="text/javascript"></script>	
<script src="craftyslide.js"></script>
<script>
$(document).ready(function(){
	$("#id名").craftyslide({
	  'width': 600, //画像幅
	  'height': 200, //画像高さ
	  'pagination': true, //ページネーションつけるかどうか
	  'fadetime': 500, //フェード時間
	  'delay': 2500 //表示時間(paginationがfalseの場合)
	});
});
</script>
あとは下記のように画像を記述すれば完成です。

<div id="slideshow">
	<ul>
		<li><img src="画像パス" /></li>
		<li><img src="画像パス" /></li>
		<!-- 以下画像分 -->
	</ul>
</div>

サンプル


Javascriptサンプルページ一覧
skuare.net

sponsors