ユニークなエフェクトがある画像ギャラリーJavaScript「COIN SLIDER」

画像ギャラリーのJavaScriptがあふれる中、少しでも特徴感を出したいものです。
Coin Slider: jQuery Image Slider Plugin with Unique Effectsは少し変わった切り替えエフェクトを持つ、プラグインです。
これを利用して、オリジナル感を出してみてはいかがでしょうか。

sponsors

使用方法

Coin Slider: jQuery Image Slider Plugin with Unique Effectsからファイルをダウンロードします。
また、jQueryからjquery.jsをダウンロードします。

<link rel="stylesheet" type="text/css" href="coin-slider-styles.css">
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="coin-slider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('#id名').coinslider({
		width: 400,  //画像幅
		height: 320, //画像高
		spw: 7,  //画像切替時の横四角数
		sph: 5,  //画像切替時の縦四角数
		effect: 'random', // エフェクト(random, swirl, rain, straight)
	});
});
</script>
上記記述後、下記ルールで画像を書いていきます。

<div id="id名">
	<!-- ここから1画像 -->
	<a href="#" target="_blank">
		<img src="画像パス">
		<span>
			画像キャプション
		</span>
	</a>
	<!-- ここまで1画像 -->
	<!-- 繰り返し -->
</div>

サンプル

Description for img01 Description for imgN Description for imgN Description for imgN

sponsors


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