簡単実装!スライドギャラリープラグイン「jquery.easySlideGallery.js」の紹介

Javascript

2010.04.22

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

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内であればどんな要素にも対応しています。
※ブロック要素に限ります。

ダウンロード

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

更新履歴

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」の紹介
オススメ本(既読)
読んでみたい本(未読)

COMMENT!!

ご指摘ありがとうございます。
jQueryでposition:absoluteを指定するとIE6だと認識してないみたいです。
cssに記述しないと駄目みたいですね。
バグ修正ができましたら報告いたします!

コメントありがとうございます。
もっとサンプルを充実させて、このプラグインのできることを紹介したいと思います。

素敵なプラグインを作成して頂いてありがとうございます。
こちらのプラグインを1ページに複数に使用するにはどうすれば宜しいでしょうか?

ご検討宜しくお願いします。

サイトさん、コメントありがとうございます!

申し訳ありません。基本的に1ページ1つの考えで作成しておりました。
でもせっかくコメント頂いたので、別のエントリーで1ページに複数作成出来るプラグインを考えます!

少々お待ち下さい。

COMMENT PLEASE!!

トラックバック

「簡単実装!スライドギャラリープラグイン「jquery.easySlideGallery.js」の紹介」のトラックバックURL
http://web-park.org/javascript/easyslidegallery100421.html/trackback
about me

Manabu Kushimoto

Welcome to WEB-PARK.ORG!!
This domain was made since 2008 February.

Gender
Male
Birth year
1982
From
Osaka,Japan
  • はてな?ブックマーク
  • delicious
  • facebook