昨日、サイトテンプレート素材をアップしました。とりあえず、ひとつだけ、試しにといった感じです。
ついでに今日、サイトの同じ箇所に有名な"LightBox2"を使用してみました。こちらも試しに、です。微調整は今後必要になると思います。
とても綺麗に拡大画像が表示されるので、こういうスクリプト好きです。使い方は色んなサイトで紹介されているので、興味のある人は検索してみてください。
ちなみに"LightBox2"はLokesh Dhakar氏のサイトからDL可能です。
▲当サイトでの使用例。サムネイルをクリックすると、こんな風に拡大表示されます。
導入は簡単です。
解凍したファイルをアップロードし、<head>～</head>の部分に以下のタグを入れます。
<link rel="stylesheet" href="css/lightbox.css" type="text/css" 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>
次に以下のようにlightboxを適用したい<img />タグを<a></a>でくくってrel属性を挿入します。
<a href="画像のパス" rel="lightbox"> <img src="画像のパス" /> </a>
これだけです。場合によってはjsやcssへのパスはそれぞれのサイトのものに変更しなくてはいけませんし、lightbox.jsやlightbox.css内の画像へのパスを変更しなくてはいけない場合もありますが、そういうのが苦手な人はgif画像を呼び出している箇所を「Ctrl+F」で検索して探し出し、絶対パスを入れておけば十分だと思います。
▲ダウンロードサイト。Lightbox v.2.03.2と書かれているところをクリックするとDLできます。
![[Valid Atom 1.0]](http://www.tyto-style.com/mt/images/linkbanner/valid-atom.png "Validate my Atom 1.0 feed")
コメントする