オシャレ~なサイトさんで見かけて、気になっていたLightboxJS。
サムネイルをクリックすると、ぼわーんぼわーんて出てきて、
何枚か写真があると、NEXTとかPREVとかで連続してみることができるのです。
オーバーレイを施しているから、写真やイラストを右クリ保存できないし。
持ち出し対策にも使えますね。
■LightboxJS2.0←配布サイト(英語)
どんなんになるのかの例は、↑のEXAMPLEで見てください。
上はひとつずつ開いて閉じるタイプ。下は、いくつかの画像を続けて見られるタイプ。
(記述仕方でどちらにも切り替えられます)
□セットアップ。
1・
使いたいページの<head>~</head>内に、
と、
を入れる。
2・
配布サイトの下のほうにあるDOWNLOADから、DLする。(zipファイル)
lightbox.cssを開いて prev.gif、nextgifのパスを修正する。
#prevLink:hover, #prevLink:visited:hover { background: url(http://www.xxx.com/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://www.xxx.com/images/nextlabel.gif) right 15% no-repeat; }
http://~のパスを書くと確実。
lightbox.jsを開き、
loading.gifとclose.gifのパスを修正。
//
// Configuration
//
var fileLoadingImage = “http://www.xxx.com/images/loading.gif”;
close.gifは、imgタグの中にひとつ。Ctrl+Fで探してください;
3・
index.html
└/css/
└/js/
└/images/
と配置する。(トップディレクトリの直下)
※ 私なんかは、すでにimagesディレクトリがあったのでそこの中にぶちまけちゃいました(笑)
□使い方。
1・
<a href=”(表示させたい画像)” rel=”rightbox”><img src=”(サムネイル)”></a>
と、リンク先にrel=”rightbox”を追加。
2・
写真のグループをNEXTやPREVで数枚見せる場合は、
上記の場所にrel=”rightbox[(グループ名)]”と入れる。
OK。
追記。
2010年現在、SuZ912.comはlightboxを使用していません。
Wordpress移行時にLightboxプラグインを入れて愛用していたのですが、
いちいちタグを入れなくてもいい「FancyBox」というプラグインを見つけたので、
現在はそちらを使用しています。