Litebox
Litebox- Same great taste, less calories
最近、話題らしいサムネイルをクリックすると
画面の推移なしに大きい画像を表示するスクリプトです。
比較的簡単にWordPressでも使う事が出来たので導入方法を書いておきます。
最初に配布元サイトからlitebox-1.0.zipをダウンロードします。
litebox-1.0.zipを展開したら以下のファイルを編集していきます。
css/lightbox.css 48行目付近
background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }を
background: transparent url(/WordPressのディレクトリ/wp-content/themes/現在のテーマ/images/blank.gif) no-repeat; /* Trick IE into showing hover */
#prevLink:hover, #prevLink:visited:hover { background: url(/WordPressのディレクトリ/wp-content/themes/現在のテーマ/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(/WordPressのディレクトリ/wp-content/themes/現在のテーマ/images/nextlabel.gif) right 15% no-repeat; }
js/litebox-1.0.js 23行目付近
var fileLoadingImage = "images/loading.gif";
var fileBottomNavCloseImage = "images/closelabel.gif";を
var fileLoadingImage = "/WordPressのディレクトリ/wp-content/themes/現在のテーマ/images/loading.gif";
var fileBottomNavCloseImage = "/WordPressのディレクトリ/wp-content/themes/現在のテーマ/images/closelabel.gif";のように相対パスから絶対パスに変更しておきます。
最後に現在使用しているテーマのheader.php <head>～</head>内に
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/lightbox.css" title="CSS" type="text/css" media="all" />
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/prototype.lite.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/moo.fx.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/litebox-1.0.js"></script>を追加
<body>タグにonload="initLightbox();"を追加します。
<body onload="initLightbox();">あとは展開したLiteboxのファイルをwp-content/themes/現在のテーマ/にコピーして終わりです。
これで記事投稿時に画像の<a>又は<img>タグにrel="lightbox"を挿入すればLiteboxを使う事が出来ます。
またrel="lightbox[foobar]"のようにすることで同じfoobarを設定した画像をグループ化して戻る進むボタンで移動が出来るようになります。
