<< 2006年3月 | Main | 2007年1月 >>
Top ＞ Lightbox JS ＞ 2006年7月
2006年7月 7日

Litebox 1.0 をブログに適用する

July 7,2006 1:35 AM
Tag：[, ]
Permalink

Lightbox JS v2.0 の後継版、Litebox が出ていました。ということで v2.0 はエントリーし損ないましたが、今回は Litebox をブログに適用するカスタマイズを紹介します。

Lightbox の時代からそうなのですが、このツールは画像を表示するページのパスが変化した場合のケースまで考慮されていません。つまりブログではインデックスページや各アーカイブページのパスがそれぞれ異なることため、提供されているファイルに対し、各ページから同様の振る舞いをさせるための修正が必要になります。

下記に修正を施したサンプルを作りました。トップページと、そこからリンクされている記事ページでも動作するようになっています。

Litebox のブログ適用サンプル

サンプルでは Movable Type を利用していますが、他のブログでもカスタマイズのタグ部分を適宜読み替えて頂ければ適用可能と思われます。また Movable Type についてはテンプレート機能を利用した方法も併せて紹介しています。

注：ページ内に U2B Player を設定していると litebox は動作しませんのでご注意ください。 → 不具合解消されています（参考：U2B Playerに新機能「Link2B」追加）。

画像表示方法

カスタマイズの前に、記事に画像を設定する方法を説明しておきます。
すでにご存知と思われますが、Lightbox 同様、a 属性に青色 *1 で示す rel="lightbox" を設定します。

<a href="http://domain/path/to/images/hogehoge.jpg" rel="lightbox"><img src="http://domainpath/to/images/hogehoge_thumb.jpg" /></a>

グループ化する場合は rel 属性値に "[]" を付与します。

<a href="http://domain/path/to/images/hogehoge1.jpg" rel="lightbox[example]"><img src="http://domainpath/to/images/hogehoge1_thumb.jpg" /></a>
<a href="http://domain/path/to/images/hogehoge2.jpg" rel="lightbox[example]"><img src="http://domainpath/to/images/hogehoge2_thumb.jpg" /></a>
<a href="http://domain/path/to/images/hogehoge3.jpg" rel="lightbox[example]"><img src="http://domainpath/to/images/hogehoge3_thumb.jpg" /></a>

"[]" 内の文字列が同じものについては画像に前後リンクが付与されて連続で開くことができます。

また、rel 属性を自動付与するカスタマイズも色々出回っているようですので、適用できるかもしれません。

１．アーカイブのダウンロード

Litebox のサイト後方にある Download の litebox-1.0.zip のリンクをクリックしてダウンロードします。

ダウンロードアーカイブを解凍して、その中から下記のファイルを利用します。

litebox-1.0/css/lightbox.css
litebox-1.0/images/blank.gif
litebox-1.0/images/closelabel.gif
litebox-1.0/images/loading.gif
litebox-1.0/images/nextlabel.gif
litebox-1.0/images/prevlabel.gif
litebox-1.0/js/litebox-1.0.js
litebox-1.0/js/moo.fx.js
litebox-1.0/js/prototype.lite.js

その他のファイルや画像はサンプル用ですので不要です。

以下、Movable Type のテンプレート機能を利用する方法と、利用しない方法に分けて説明します。Movable Type 以外のブログの場合はテンプレート機能を利用しない方を参考にしてください。

２．ファイルの修正

２．１ テンプレート機能を利用しない場合

SereneBach や FC2ブログ等はこちらの解説を参考にしてください。

２．１．１ lightbox.css の修正

lightbox.css にある下記の赤色部分（3ヶ所）

#prevLink, #nextLink{
    width: 49%;
    height: 100%;
    background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
    display: block;
    }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#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; }

を

#prevLink, #nextLink{
    width: 49%;
    height: 100%;
    background: transparent url(http://domain/path/to/images/blank.gif) no-repeat; /* Trick IE into showing hover */
    display: block;
    }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(http://domain/path/to/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://domain/path/to/images/nextlabel.gif) right 15% no-repeat; }

と、ご自身のブログのURLに修正します。

２．１．２ litebox-1.0.js の修正

litebox-1.0.js の下記の部分に、青色で示した「ドキュメントルートからのパス」を設定します。

//
//    Configuration
//
var fileLoadingImage = "/path/to/images/loading.gif";
var fileBottomNavCloseImage = "/path/to/images/closelabel.gif";

２．２ テンプレート機能を利用する場合

ファイルを修正する際にMTタグを利用し、そのファイルをテンプレートとして登録することで修正箇所を自動変換します。テンプレートに登録するのは修正する2ファイルのみです。

２．２．１ lightbox.css の修正

lightbox.css にある下記の赤色部分

#prevLink, #nextLink{
    width: 49%;
    height: 100%;
    background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
    display: block;
    }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#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; }

を

#prevLink, #nextLink{
    width: 49%;
    height: 100%;
    background: transparent url(<$MTBlogURL$>images/blank.gif) no-repeat; /* Trick IE into showing hover */
    display: block;
    }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(<$MTBlogURL$>images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(<$MTBlogURL$>images/nextlabel.gif) right 15% no-repeat; }

に修正します。
そしてこのファイルをインデックステンプレートとして登録します。

方法は管理メニューの「テンプレート」→右上「テンプレートを新規作成」をクリックして、次のページで下記のように設定してください。

テンプレート名：lightbox用CSS（何でもいいです）
出力ファイル名：lightbox.css
このテンプレートにリンクするファイル：（設定不要）
再構築オプション：チェックを外す
テンプレートの内容：lightbox.css の中身を丸ごとコピー

設定が完了したら保存・再構築してください。

２．２．２ lightbox-1.0.js の修正

lightbox.css の下記の部分に、青色で示したMTタグを設定します。

//
//    Configuration
//
var fileLoadingImage = "<$MTBlogRelativeURL$>images/loading.gif";
var fileBottomNavCloseImage = "<$MTBlogRelativeURL$>images/closelabel.gif";

そしてこのファイルもインデックステンプレートとして登録します。

方法は管理メニューの「テンプレート」→右上「テンプレートを新規作成」をクリックして、次のページで下記のように設定してください。

テンプレート名：lightbox用JS（何でもいいです）
出力ファイル名：litebox-1.0.js
このテンプレートにリンクするファイル：（設定不要）
再構築オプション：チェックを外す
テンプレートの内容：litebox-1.0.js の中身を丸ごとコピー

設定が完了したら保存・再構築してください。

３．ファイルのアップロード

index.html があるディレクトリに

css/lightbox.css
images/blank.gif
images/closelabel.gif
images/loading.gif
images/nextlabel.gif
images/prevlabel.gif
js/litebox-1.0.js
js/moo.fx.js
js/prototype.lite.js

という構成になるようにアップロードします。２．２項のテンプレート機能を利用する場合は、lightbox.css と litebox-1.0.js のアップロードは行わないでください。
またブログサービスの制約等で、この構成でアップロードできない場合、ファイルを同じディレクトリにアップロードして、４項の src 属性を適宜修正してください。

４．テンプレートの修正（head 部分）

メインページ／カテゴリー・アーカイブ／日付アーカイブ／エントリー・アーカイブの <head>～</head> の間の任意の行に下記を追加します。

Movable Type でテンプレート機能を利用しない場合

<link rel="stylesheet" href="<$MTBlogURL$>css/lightbox.css" type="text/css" media="screen" />
　　　　　　　　　　　　　：
　　　　　　　　　　　　（略）
　　　　　　　　　　　　　：
<script type="text/javascript" src="<$MTBlogURL$>js/prototype.lite.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>js/moo.fx.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>js/litebox-1.0.js"></script>

Movable Type でテンプレート機能を利用する場合

<link rel="stylesheet" href="<$MTBlogURL$>lightbox.css" type="text/css" media="screen" />
　　　　　　　　　　　　　：
　　　　　　　　　　　　（略）
　　　　　　　　　　　　　：
<script type="text/javascript" src="<$MTBlogURL$>js/prototype.lite.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>js/moo.fx.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>litebox-1.0.js"></script>

その他のテンプレートで利用する場合

<link rel="stylesheet" href="http://domain/path/to/css/lightbox.css" type="text/css" media="screen" />
　　　　　　　　　　　　　：
　　　　　　　　　　　　（略）
　　　　　　　　　　　　　：
<script type="text/javascript" src="http://domain/path/to/js/prototype.lite.js"></script>
<script type="text/javascript" src="http://domain/path/to/js/moo.fx.js"></script>
<script type="text/javascript" src="http://domain/path/to/litebox-1.0.js"></script>

５．テンプレートの修正（スクリプト起動の追加）

５．１ メインページ／カテゴリー・アーカイブ／日付アーカイブ／その他のブログ

body 要素に青色の onload 属性を追加します。

<body class="layout-two-column-right main-index" onload="initLightbox()">

５．２ エントリー・アーカイブ（Movable Type のみ）

body 要素に、すでに onload 属性が存在する場合の記述方法です。ここでは2通りの方法を紹介します。

ひとつめは、body 要素の onload 属性に追加する方法です。

<body class="layout-two-column-right individual-entry-archive" onload="individualArchivesOnLoad(commenter_name);initLightbox();">

もうひとつは </body> の直前に追加する方法です。

<script type="text/javascript">
<!--
initLightbox();
//-->
</script>
</body>

2006.07.11 追記
２．１．２項の記述が誤っていたため修正しました。

2006.10.12 追記
４項の記述を修正しました。

2006.10.25 追記
U2B Player について追記しました。

2007.04.15 追記
U2B Player の不具合解消について追記しました。

*1：色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください。IEではグレースケール表示され、青色部分が下線表示、赤色部分が二重下線で表示されます。Firefox／Opera ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。

Comments [134] | Trackbacks [52]
Now loading...
QRcode

現在停止中です
携帯電話からこのQRcodeを撮影することで携帯用URLを取得することができます

URI for cellular phones
ギターに入った猫
Styles
Font Size
＜ Default ＞
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by：FeedBurner

loading ...
BlogPeople
Now loading...
Syndicate this site
FeedBurner（RSS1.0/RSS2.0/Atom）
Counter
これまでのアクセス
クリエイティブ・コモンズ・ライセンス
Powered by
Movable Type 4.1
 
List Me!