ついにプラグインを作成しました！
ハードルが高いと思い敬遠していましたが、何とかリリースすることができました。

jquery.easySlideGallery.jsとは

今回作成したのはスライドする画像ギャラリーです。
サイト内の画像紹介ページなどに利用できればと思い作成しました。

• ノーマルサンプルを見る
• 情報掲載サンプルを見る

導入方法

簡単に実装できますが、javascript以外にhtmlとcssにも特定のソースを記述する必要があります。

Javascript

まずはjqueryを読み込ませその次にイージースライドギャラリーのプラグインを読み込ませます。
他のプラグインと衝突させないためjQuery.noConflict();を指定してますので引数に($)が必要です。

<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript" src="js/lib/jquery.easySlideGallery.js"></script>
<script type="text/javascript">
jQuery(function($){
	$("#gallery").easySlideGallery();
});
</script>

HTML

スライドする画像をid=”slideImg”の子要素に入れます。
サンプルソースはul、li要素ですが、divの親子要素でも問題ございません。
id=”pagenation”内のid=”previous”とid=”next”はスライドさせるためのボタン(矢印)になります。

<div id="gallery">
	<ul id="slideImg">
		<li><a href="#"><img src="../img/001.jpg" /></a></li>
		<li><a href="#"><img src="../img/002.jpg" /></a></li>
		<li><a href="#"><img src="../img/003.jpg" /></a></li>
		<li><a href="#"><img src="../img/004.jpg" /></a></li>
	</ul>
	<div id="pagenation">
		<p id="previous">Previous</p>
		<p id="next">Next</p>
	</div>
</div>

CSS

CSSは下記ソースが必須になります。

#gallery {
	position: relative;
	margin: 0 auto;
}

ul#slideImg {
	position: relative;
	margin: 0 auto;
	width: 100%;
	height: 100%;
}

ul#slideImg li {
	position: absolute;
	width: 300px;
	height: 250px;
}

div#pagenation {
	position: absolute;
}

p#previous {
	position: absolute;
	cursor: pointer;
}

p#next {
	position: absolute;
	cursor: pointer;
}

各種設定

このプラグインには「幅」「高さ」「速さ」を設定できます。

幅

スライド画像の表示領域のwidthを設定します。

高さ

スライド画像の表示領域のheightを設定します。

速さ

スライドするスピード設定します。

左から順に「幅」「高さ」「速さ」を入力します。

<script type="text/javascript">
$(function($){
	$("#gallery").easySlideGallery(600,500,300);
});
</script>

簡単な解説

このプラグインは、表示領域のちょうど真ん中にくるようになっています。
しかも、スライドする画像サイズがバラバラでもちゃんと真ん中に表示します。
また、ul、li要素でなくてもid=slideImg内であればどんな要素にも対応しています。
※ブロック要素に限ります。

ダウンロード

• プラグイン(4KB)

今回初めてプラグインを作成したので不備がございましたら、ご連絡頂けると幸いです。

更新履歴

2010.04.23

#slideImgの子要素にposition:abslotuteを追加
(IE6対策)

2010.04.23

サンプルの「next」「previous」を逆に変更

2010.04.23

他のコードと衝突させないため、「$」をjQuery.noConflict()で「jQuery」に変更
そのためこのプラグインを読み込む際は$(function($){と引数に「$」が必要になります。

2010.04.23

情報掲載サンプルを追加

1. Web-Parkのホーム > 
2. Javascript > 
3. 簡単実装！スライドギャラリープラグイン「jquery.easySlideGallery.js」の紹介