※本ページはプロモーションが含まれています。
かまたま
ご訪問ありがとうございます！WordPress でこのブログを書いている管理人の『かまたま』です！ゆっくりしていってね！
ブログランキング参加中！応援よろしくお願いします！
ブログランキング参加中！応援よろしくお願いします！
WordPress で運営中のブログに Lightbox 2 より動作が軽いらしい Litebox 1.0 を設置したのでメモ。
この記事の目次 非表示
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="/wp-content/themes/wp.vicuna/js/prototype.lite.js"></script>
<script type="text/javascript" src="/wp-content/themes/wp.vicuna/js/moo.fx.js"></script>
<script type="text/javascript" src="/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 の使い方は以上です。