ホームページを作る人のネタ帳

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

jQueryをつかったシンプルなイメージギャラリー

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

詳細は以下で。

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


download

downloadナビ


簡易ドキュメント


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

それでは、また。
@yamada_nt
Posted by@yamada_nt
スポンサードリンク

Comments 0

There are no comments yet.

Leave a reply

Trackbacks 2

Click to send a trackback(FC2 User)
この記事へのトラックバック
  • 凡人が天才に勝つには会議する。なんて事がよく言われますが、ブログのネタであれ、...

    2008.12.15 (Mon) 20:28 | WEBマーケティング ブログ
  • なんだかいろんなところで紹介されている、 シンプルだけどかっこいいフォトギャラリー、 「Simple Controls Gallery」 使いやすいのかどうかも見るために使ってみることにした。 設定の仕方や注意点なども書いておいたので参考にしてください。

    2008.12.18 (Thu) 02:23 | THE HAM MEDIA