One Wish... Litebox -

Litebox

October 14, 2006 8:33pm
litebox and WordPress
1Comment

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();"を追加します。