ユニークなエフェクトがある画像ギャラリーJavaScript「COIN SLIDER」
[ 2分で読めて簡単導入できます]
画像ギャラリーのJavaScriptがあふれる中、少しでも特徴感を出したいものです。
Coin Slider: jQuery Image Slider Plugin with Unique Effectsは少し変わった切り替えエフェクトを持つ、プラグインです。
これを利用して、オリジナル感を出してみてはいかがでしょうか。
使用方法
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>
ユニークなエフェクトがある画像ギャラリーJavaScript「COIN SLIDER」サンプル
記事作成：2010年04月13日
