InWebsite top>>webテク>>Lightbox2

Lightbox2


おしゃれチックな画像拡大javascript。最近、本当に良く見ますね（＾＾；

ex.1）


ex.2）

わかりやすい解説サイトのmemo...
CSS Lecture

"LightBox表示調整
lightbox.jsの231行目
var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
の数値を小さくすることで下に移動。"

"背景の色を変更
lightbox.cssの一番下に記述してある#overlayのbackground-color: #000;となっている「#000」を任意の色に変更"

"画像周りの色を変更
lightbox.cssの上から4つ目に指定してある#outerImageContainerと下から7つ目に指定してある#imageDataContainerのbackground-colorの色を任意の色に変更。 (変更した場合はCLOSEの画像は白のままなので、この画像を指定した色にあわせて作り直す事)"

"NEXTとPREVの位置を変える
NEXTとPREVが指定してある部分は lightbox.css の16 17行目になります。
#prevLink:hover, #prevLink:visited:hover { background: url(../image/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../image/nextlabel.gif) right 15% no-repeat; }
↓
#prevLink:hover, #prevLink:visited:hover { background: url(../image/prevlabel.gif) left 95% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../image/nextlabel.gif) right 95% no-repeat; }
※下部に移動させた場合"



ex.3）

titleが空欄の場合、前回表示したtitle表示を引きずってしまうので注意。

-
-
-
▲PAGE TOP
-