アクアラングウエスタンver.9.2

日記ならぬ月記あるいは年記さもなくば…

Lightbox2 設置方法

当ブログにLightboxを導入すべく
設置手順をのせてみた。

先ず Lightbox2のサイト からファイルをダウンロード。

現在は Lightbox v2.05 だ。


【1】
lightbox2.05.zip を解凍しファイルを選別。

使うファイル
 cssフォルダ内
 ・lightbox.css 1点

 imagesフォルダ内
 ・closelabel.gif
 ・loading.gif
 ・nextlabel.gif
 ・prevlabel.gif 計4点

 jsフォルダ内
 ・builder.js
 ・effects.js
 ・lightbox.js
 ・prototype.js
 ・scriptaculous.js 計5点

上記以外のファイルは使わないので捨ててOK。


【2】
gifデータのアップロード。

imagesフォルダ内
・closelabel.gif
・loading.gif
・nextlabel.gif
・prevlabel.gif

以上4点をアップロードしパスをメモる。

(パスの例)
http://blog–imgs–69.fc2.com/a/b/c/crabcancan/nextlabel.gif
(だいたい青字箇所をコピペすることが多い。)


【3】
データの書き換え。

cssフォルダ内
・lightbox.css

上記の lightbox.css をテキストで開き
赤字箇所を青字箇所の例のように
【2】でメモったパスに書き換える。

16行目 #prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }

17行目 #nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

                      ↓

16行目 #prevLink:hover, #prevLink:visited:hover { background: url(http://blog–imgs–69.fc2.com/a/b/c/crabcancan/prevlabel.gif) left 15% no-repeat; }

17行目 #nextLink:hover, #nextLink:visited:hover { background: url(http://blog–imgs–69.fc2.com/a/b/c/crabcancan/nextlabel.gif) right 15% no-repeat; }


続いて

jsフォルダ内
・lightbox.js

上記の lightbox.js をテキストで開き
赤字箇所を青字箇所の例のように
【2】でメモったパスに書き換える。

49行目 fileLoadingImage: 'images/loading.gif',

50行目 fileBottomNavCloseImage: 'images/closelabel.gif',

                      ↓

49行目 fileLoadingImage: 'http://blog–imgs–69.fc2.com/a/b/c/crabcancan/loading.gif',

50行目 fileBottomNavCloseImage: 'http://blog–imgs–69.fc2.com/a/b/c/crabcancan/closelabel.gif',


【4】
cssファイルとjsファイルをアップロード。

cssフォルダ内
・lightbox.css

jsフォルダ内
・builder.js
・effects.js
・lightbox.js
・prototype.js
・scriptaculous.js

以上6点のファイルをアップロードしパスをメモる。

(パスの例)
http://blog–imgs–69.fc2.com/a/b/c/crabcancan/lightbox.js
(だいたい青字箇所をコピペすることが多い。)


【5】
テンプレートのHTMLを書き換える。

先ず 下記の命令文の
赤字箇所を青字箇所の例のように
【4】でメモったパスに書き換える。

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<script type="text/javascript" src="js/prototype.js"></script>

<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>

<script type="text/javascript" src="js/lightbox.js"></script>

                      ↓

<link rel="stylesheet" href="http://blog–imgs–69.fc2.com/a/b/c/crabcancan/lightbox.css" type="text/css" media="screen" />

<script type="text/javascript" src="http://blog–imgs-–69.fc2.com/a/b/c/crabcancan/prototype.js"></script>

<script type="text/javascript" src="http://blog–imgs–69.fc2.com/a/b/c/crabcancan/scriptaculous.js?load=effects,builder"></script>

<script type="text/javascript" src="http://blog–imgs–69.fc2.com/a/b/c/crabcancan/lightbox.js"></script>

以上4文の書き換えが済んだら
テンプレートのHTML編集で
<head> ~ </head> 内の
任意の行へ挿入し書き換える。


【6】
記事のタグを書き換える。

記事に載せた画像をLightboxで表示させるよう
赤字箇所を青字箇所の例のように
rel="lightbox" に書き換える。

<a href="http://blog–imgs.fc2.com/crabcancan/photo1.jpg" target="_blank>photo1</a>

                      ↓

<a href="http://blog–imgs.fc2.com/crabcancan/photo1.jpg" rel="lightbox">photo1</a>


画像を連続して表示させたい場合は
データ名を統一グループ化させる。

<a href="http://blog–imgs.fc2.com/crabcancan/photo1.jpg" rel="lightbox[photo]">photo1</a>

<a href="http://blog–imgs.fc2.com/crabcancan/photo2.jpg" rel="lightbox[photo]">photo2</a>

<a href="http://blog–imgs.fc2.com/crabcancan/photo3.jpg" rel="lightbox[photo]">photo3</a>


表示させた画像にコメントも載せたい場合は
青字箇所の例のように
title="載せたいコメント" を挿入し書き換える。

<a href="http://blog–imgs.fc2.com/crabcancan/photo1.jpg" rel="lightbox" title="載せたいコメント">photo1</a>


これでLightboxが稼動すると思う。 → Lightbox適用ブログ参照ページ


今回はFC2ブログでLightbox2を導入してみたが
稀にLightboxが起動しなかったり
巧く表示されないことがある。

エラーの原因で多いのは
だいたいが 書き換えの間違い だが
これは再確認して直せばすぐ済むのでOK。

他のscriptとの衝突 の場合は
テンプレートのHTMLで
bodyタグを確認し
onload属性があった場合は
青字箇所の例のように
initLightbox() を挿入し書き換える。

<body onload="MM_preloadImages(‘/images/menu_on.gif’)…;">

                      ↓

<body onload="MM_preloadImages(‘/images/menu_on.gif’)…;initLightbox()">


以上がLightboxの設置手順だ。
参考になれば幸いだ。
  1. 2011/05/22(日)|
  2. PC・WEB関連

カウンター

プロフィール

カニ缶船長

管理者:カニ缶船長
おそらく食玩やプライズ、フィギュア
等のホビー系の話題が多い私事の
閑話綴りになると思う。
気ままな更新のため気長によろしく。

検索フォーム

カテゴリー

HOBBY関連 (142)
EVANGELION (35)
MACROSS (11)
PC・WEB関連 (5)
壁紙 (3)
GAME関連 (1)
飲食 (21)
視聴 (18)
閑話 (12)

月別アーカイブ

リンク

RSSリンクの表示

カニチェック