WordPress に Litebox を設置した

WordPress で運営中のブログに Lightbox 2 より動作が軽いらしい Litebox 1.0 を設置したのでメモ。

Litebox の動作イメージ

WordPress + wp.vicuna へ Litebox を設置する手順

私の場合、Litebox の関連ファイル ( css, js, images フォルダ ) は、wp.vicuna テーマフォルダ内に置きました。 WordPress のルートに置くと、WordPress のバージョンアップの時に間違って消してしまいそうなので…。

header.php 内の head 要素内に以下のコードを追加。

<!-- Litebox 1.0 / -->
<link rel="stylesheet" href="/wp-content/themes/wp.vicuna/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://bowz.info/wp-content/themes/wp.vicuna/js/prototype.lite.js"></script>
<script type="text/javascript" src="http://bowz.info/wp-content/themes/wp.vicuna/js/moo.fx.js"></script>
<script type="text/javascript" src="http://bowz.info/wp-content/themes/wp.vicuna/js/litebox-1.0.js"></script>
<!-- / Litebox 1.0 -->

single.php, index.php, category.php, archive.php, tag.php, search.php など、各テーマファイルの body 要素に以下の属性を加える。

<body onload="initLightbox()">

litebox-1.0.js の 23-24 行目を以下のように修正。

var fileLoadingImage = "/wp-content/themes/wp.vicuna/images/loading.gif";
var fileBottomNavCloseImage = "/wp-content/themes/wp.vicuna/images/closelabel.gif";

以上で設置は完了です。

Litebox の使い方

ひとつの画像だけで使う場合。

<a href="hoge.jpg" rel="lightbox"><img src="thumb-hoge.jpg" /></a>

複数の画像をイメージセット ( 前後の画像へのリンクが生成される ) として扱う場合。

<a href="hoge.jpg" rel="lightbox[fuga]"><img src="thumb-hoge.jpg" /></a>

Litebox の使い方は以上です。

コメントを残す

メールアドレスが公開されることはありません。