次は縦移動!スクロールギャラリープラグイン「jquery.easyScrollGallery.js」の紹介

Javascript

2010.05.11

前回作成した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;
}

ダウンロード

  1. Web-Parkのホーム > 
  2. Javascript > 
  3. 次は縦移動!スクロールギャラリープラグイン「jquery.easyScrollGallery.js」の紹介
オススメ本(既読)
読んでみたい本(未読)

Warning: count(): Parameter must be an array or an object that implements Countable in /home/markcrest/web-park.org/public_html/wordpress/wp-includes/class-wp-comment-query.php on line 405

COMMENT PLEASE!!

トラックバック

「次は縦移動!スクロールギャラリープラグイン「jquery.easyScrollGallery.js」の紹介」のトラックバックURL

Warning: Use of undefined constant display - assumed 'display' (this will throw an Error in a future version of PHP) in /home/markcrest/web-park.org/public_html/wordpress/wp-content/themes/default/single.php on line 105
http://web-park.org/javascript/easyscrollgallery100510.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