前回作成したjquery.easySlideGallery.jsはスライドでしたが今度は縦にスライドする画像ギャラリープラグインを作成しました。

サンプル

前回と同じサンプル内容を掲載しました。

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

導入方法

ほとんど前回と同じです。id名とpagenation名を変更しています。

Javascript

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

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

HTML

<div id="gallery">
	<ul id="scrollImg">
		<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 class="pagenation">
		<p class="up">up</p>
		<p class="down">down</p>
	</div>
</div>

CSS

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

#scrollGallery {
	position: relative;
	margin: 0 auto;
	width: 967px;
	height: 544px;
	background: url(../img/bg.jpg) no-repeat;
}

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

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

#scrollImg li.a {
	width: 400px;
	height: 300px;
}

#scrollImg li a {
	position: absolute;
}

.pagenation {
	position: absolute;
	width: 967px;
	height: 544px;
	top: 0;
	left: 483px;
	z-index: 100;
}

.pagenation p {
	padding: .5em;
	background: #ccc;
}

.up {
	position: absolute;
	top: 0;
	cursor: pointer;
}

.down {
	position: absolute;
	bottom: 0;
	cursor: pointer;
}

ダウンロード

• プラグイン(4KB)

1. Web-Parkのホーム > 
2. Javascript > 
3. 次は縦移動！スクロールギャラリープラグイン「jquery.easyScrollGallery.js」の紹介