|
|---|
lightboxのjavascriptのソースは、ここからダウンロードできます。
ダウンロードファイルの中には、index.htmlのファイルと、css、images、jsフォルダがあります。
css、images、jsのフォルダを同じディレクトリ内に置く場合は、このままで問題ないのですが
それぞれ別の場所に置く場合は、少しファイルを変更する必要があります。
まずcssフォルダ内のlightbox.cssの
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
の色が付いているところを、このcssファイルから画像ファイルまでの相対パスに変更します。
次にjsフォルダ内のlightbox.jsの
fileLoadingImage: 'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',
色が付いているところを、このjsファイルから画像ファイルまでの相対パスに変更します。
画像のファイルパスの変更は以上ですが、これだどFirefoxでは、うまく表示されないので
194行目(2.04の場合)に
event.stop();
if (!target.rel) target.rel=Element.readAttribute($(target), "rel");
this.start(target);
の色が付いている行を追加します。
この辺は、ネットで拾ってきたのでどういう意味なのかはよく分かっていません。
これで設定は終わりなので実際の使い方です。
head要素の内容に
<link href="css/lightbox.css" type="text/css" rel="stylesheet" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
と記述します。ファイルパスは実際の環境のファイルパスにします。
クリックした場合に拡大させる対象のimg要素をa要素の内容にして、そのa要素のrel属性にlightboxと記述するだけです。
今回やりたいのはイメージのある部分をクリックした場合なので、クリッカブルマップを使います。
だからarea要素のrel属性にlightboxと記述しました。
出来たのがこれです。
表示はされるけど、なんとなく表示が遅いのが気になります。
そんな理由でjquery+fancyboxも試しました。
これについては、また明日書きます。
この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。
コメント 0