サムネール画像をクリックしたときに、その場でステキに画像を表示させる方法。
WordPress用のプラグインでもいろいろとあるのですが、文中に写真をいれている場合はそれでいいのだとおもいますが、うちの環境(カスタムキーで、画像ファイルを指定して、テーマファイル内で呼び出し)では動かなかったので、ふつうにLightbox 2を導入してみることにしました。
まず、こちらからファイルをダウンロード。
解凍したものを、フォルダごとWordPress運用ディレクトリにアップします。フォルダ名は、lightbox2としました。
WordPressのテーマファイルのヘッダ部分に、
<!– lightbox –>
<script type="text/javascript" src="<?php bloginfo(‘url’); ?>/lightbox2/js/prototype.js"></script>
<script type="text/javascript" src="<?php bloginfo(‘url’); ?>/lightbox2/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="<?php bloginfo(‘url’); ?>/lightbox2/js/lightbox.js"></script>
<link rel="stylesheet" href="<?php bloginfo(‘url’); ?>/lightbox2/css/lightbox.css" type="text/css">
<!– lightbox –>
と追加。
これで、サムネール画像からのリンクタグにrel="lightbox"とすれば、拡大画像が表示できます。
ただ、この状態だとクローズボタンなどが、リンク切れになっているかもしれません。
その場合は、lightbox.jsファイルを開き、Configuration部分をいじりましょう。わたしは、httpからのフルパスで指定しました。
さて、だっこの拡大画像が、ちゃんと表示されるかな?
minami @ 20071224 13:10:29 | Comments(0)

