jQueryを使ったシンプルでかっこいいイメージギャラリー Simple Controls Gallery

なかなか味のある一品。
画像にマウスポインタを合わせるとしたからにょきっとコントローラが現れる仕組み。

詳細は以下で。

サンプルデモとダウンロード

簡易ドキュメント

var mygallery=new simpleGallery({
wrapperid: "simplegallery1", //ID of main gallery container,
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
imagearray: [
["pool.jpg", "http://en.wikipedia.org/wiki/Summer", "_new"],
["cave.jpg", "http://en.wikipedia.org/wiki/Winter", ""],
["fruits.jpg", "", ""],
["autumn.jpg", "", ""]
],
autoplay: true,
persist: false,
pause: 2500, //pause between slides (milliseconds)
fadeduration: 500, //transition duration (milliseconds)
oninit:function(){ //event that fires when gallery has initialized/ ready to run
},
onslide:function(curslide, i){ //event that fires after each slide is shown
//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
}
})

wrapperid:
html側で指定するdivのID名。

dimensions:
画像のサイズを指定。画像自体、このサイズで作るようにする事。

imagearray:
[画像の場所][リンク先][リンクした時newなら別窓表示]

autoplay:
自動的にスライドショーを開始するかどうか。するならfalse、しないならtrue。

persist:
ブラウザのセッションに、最後に見た画像を記憶させるかどうか。
するならfalse、しないならtrue。

pause:
スライドショーの間隔。ミリ秒単位。

fadeduration:
画像が切り替わるフェードアウト、フェードインにかかる時間。ミリ秒単位。


以下はコントローラー部。

var simpleGallery_navpanel={
panel: {height:'45px', opacity:0.5, paddingTop:'5px', fontStyle:'bold 11px Verdana'}, //customize nav panel container
images: [ 'left.gif', 'play.gif', 'right.gif', 'pause.gif'], //nav panel images (in that order)
imageSpacing: {offsetTop:[-4, 0, -4], spacing:10}, //top offset of left, play, and right images, PLUS spacing between the 3 images
slideduration: 500 //duration of slide up animation to reveal panel
}

ボタン画像の変更や、不透明度なんかも変更できます。

なかなかシンプルでいいですね。
Dynamic Drive DHTML Scripts- Simple Controls Gallery

それでは、また。