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

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

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

  1. --/--/--(--)|
  2. スポンサー広告

Lightbox2 (v2.51) 設置方法

久しぶりに Lightbox を見たら
versionが随分と変わっていたので
改めて設置手順をのせたいと思う。

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

現在は Lightbox v2.51 だ。

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

使うファイル
 cssフォルダ内
 ・lightbox.css
 ・screen.css 計2点

 imagesフォルダ内
 ・close.png
 ・loading.gif
 ・next.png
 ・prev.png 計4点

 jsフォルダ内
 ・jquery-1.7.2.min.js
 ・jquery.smooth-scroll.min.js
 ・jquery-ui-1.8.18.custom.min.js
 ・lightbox.js 計4点

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


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

imagesフォルダ内
・close.png
・loading.gif
・next.png
・prev.png

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

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


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

cssフォルダ内
・lightbox.css

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

(目安 line 81) 114行目 background: url(../images/prev.png) left 48% no-repeat;

(目安 line 85) 119行目 background: url(../images/next.png) right 48% no-repeat;

                      ↓

(目安 line 81) 114行目 background: url(http://blog–imgs–69.fc2.com/a/b/c/crabcancan/prev.png) left 48% no-repeat;

(目安 line 85) 119行目 background: url(http://blog–imgs–69.fc2.com/a/b/c/crabcancan/next.png) right 48% no-repeat;


続いて

jsフォルダ内
・lightbox.js

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

51行目 this.fileLoadingImage = 'images/loading.gif';

52行目 this.fileCloseImage = 'images/close.png';

                      ↓

51行目 this.fileLoadingImage = 'http://blog–imgs–69.fc2.com/a/b/c/crabcancan/loading.gif';

52行目 this.fileCloseImage = 'http://blog–imgs–69.fc2.com/a/b/c/crabcancan/close.png';


【4】
ファイル名の書き換え。

FC2ブログはスラッシュ(/)やピリオド(.)が
付いたファイル名はアップロード出来ない為
以下3点のファイル名だけ
赤字箇所を青字箇所の例のように
ハイフン(-)に書き換える。
(ピリオド付きのファイル名のアップロードが可能な
他サイトの利用者は【5】へ進む。)

jsフォルダ内の計3点

・jquery-1.7.2.min.js → jquery-1-7-2-min.js

・jquery.smooth-scroll.min.js → jquery-smooth-scroll-min.js

・jquery-ui-1.8.18.custom.min.js → jquery-ui-1-8-18-custom-min.js


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

cssフォルダ内
・lightbox.css
・screen.css

jsフォルダ内
・jquery-1-7-2-min.js
・jquery-smooth-scroll-min.js
・jquery-ui-1-8-18-custom-min.js
・lightbox.js

以上6点のファイルをアップロードしてパスをメモしておく。
(今回は変更したファイル名もある為【6】での書き換え時は要留意。)


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

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

<link href="css/lightbox.css" rel="stylesheet" />

<script src="js/jquery-1.7.2.min.js"></script>

<script src="js/lightbox.js"></script>

                      ↓

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

<script src="http://blog–imgs–69.fc2.com/a/b/c/crabcancan/jquery-1-7-2-min.js"></script>

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

以上3文の書き換えが済んだら
テンプレートのHTMLを開き
(FC2ブログは 環境設定 → テンプレートの設定 → HTML編集)
<head> ~ </head> 内の
任意の行へ挿入し書き換える。


【7】
画像のリンク先の確認。

FC2ブログは記事に挿入する画像のリンク先が選べるが
アルバムページにリンクさせるとLightboxが利かないので
リンク先の設定を確認する。
(リンクが元画像に標準設定されている
他サイトの利用者は【8】へ進む。)

環境設定 → 環境設定の変更 → ブログの設定 → 投稿設定 → 画像のリンク

画像を記事に挿入する際に 元画像にリンクさせて 挿入 を選択。


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

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

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

                      ↓

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


画像を連続して表示させたい場合は
データ名を統一させてグループ化(統一させたデータ名を [ ] でくくる)させる。
画像を表示させる順番は データ名の末尾の番号 の順番に則る。
(下記の例の場合 photo1 でいうと photo統一させたデータ名1末尾の番号 になり
photo1 → photo2 → photo3 の順番に表示される。)

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

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

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


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

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


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


稀にLightboxを設置しても起動しなかったり
巧く表示されない時もあると思うが
エラーの原因として一番多いのは
書き換えの間違いだったりする。

パスの書き換えでパスをペーストする際に
誤って本文のアポストロフィ(')やピリオド(.)等まで
上書きして無くしてしまうと
それだけで巧く稼動しなくなる。

稼動しない時は書き換えたタグを再確認して直せば
だいたい解決すると思う。
(FC2ブログはアップロードしたファイルの
上書き及び削除が反映されるまで
しばらく時間がかかることもあるので要留意。)


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

カウンター

プロフィール

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

検索フォーム

カテゴリー

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

月別アーカイブ

リンク

RSSリンクの表示

カニチェック













    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。