今使ってる、ココ、忍者ブログでlightboxを使いたくなったのでJQueryを入れてみた。
※ ホールの写真クリックで同じ画面内に拡大表示。
やることは、そんな複雑なことじゃない……はず。
jquery.js、jquery.lightbox-0.5.js、jquery.lightbox-0.5.css を読み込むようにブログのテンプレートを修正。
画像を表示させるところで、
<a href="image1.jpg" class="lightBox" title="img1">
<img src="thumb_image1.jpg" width="72" height="72" alt="" />
</a>
みたいにすればＯＫだと思ってた。
……けど、そんな単純じゃなかったよ。
まず、js・cssをアップロードされる場所は別サーバになっちゃうから、ヘッダの記述はフルのURLで記載。
lightboxが使う画像データのパスも異なるから、jsファイルの修正。
それから、<a>にclass="lightBox"指定するだけじゃ足りなくって、
画像表示の部分を<div id="gallery"> でくくった。その、id="gallery" の部分の動作を記載したコードをヘッダに追加。ヘッダにjavascriptのfunctionを適切に追加すれば、class="lightbox"を書くだけで有効になる。
ちゃんと配布元のドキュメント読まないとダメだね。
と、まぁ、たっぷり2時間はかかったな。
自分はこれで満足だけど、さらにデザイン的な調整も加えようとするとかなりの手間が必要になりそうだ。
しかし、やっぱFTP使えるとこの方が楽だよなー
sakuraへの引越し、真剣に考えようかな……。
PR
