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

サンプル

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

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

導入方法

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

Javascript

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



[/sourcecode]

HTML

[sourcecode language=’html’]

[/sourcecode]

CSS

CSSは下記ソースが必須になります。
[sourcecode language=’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;
}
[/sourcecode]

ダウンロード

• プラグイン(4KB)

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