LightBox2.xをpplog系へ導入
2007/01/07 2007/01/07
広告
LightBoxとは何という方は、、、下の画像をクリックしてください。
こんな感じで画像を表示できるのがLightBoxです。
LightBox2.xをpplog系に適用するやり方です。
1. LightBoxをここからダウンロードする。
2. 解凍する。
3. 解凍すると、lightbox2.02という名前でフォルダができるのでlightboxと変更する。
4. lightboxフォルダの中にjs/css/imagesと3つあるのを確認する。
5. jsの中のlightbox.jsをテキストエディタで開く。
6. var fileLoadingImageで検索し、その横の値をご自身の環境に合わせ変更
7. すぐ下のvar fileBottomNavCloseImageも同様に変更する。
8. lightbox.jsを保存
9. cssフォルダの中のlightbox.cssをテキストエディタで開く
10.#prevLinkで検索し下記3カ所のurl(・・・)部分を変更する。
11.lightbox.cssを保存
12.FTPツールを使って、pplog(またはpplog2)直下にlightboxフォルダごとアップロードする。
(lightbox直下のindex.htmlはいらないので削除しても良い)
13.各テンプレートへ、下記をhead内に追加する。(2行になってますが1行で。)
14.テンプレートの適用を行って動作するかを確認して終了。
こんな感じで画像を表示できるのがLightBoxです。
LightBox2.xをpplog系に適用するやり方です。
1. LightBoxをここからダウンロードする。
2. 解凍する。
3. 解凍すると、lightbox2.02という名前でフォルダができるのでlightboxと変更する。
4. lightboxフォルダの中にjs/css/imagesと3つあるのを確認する。
5. jsの中のlightbox.jsをテキストエディタで開く。
6. var fileLoadingImageで検索し、その横の値をご自身の環境に合わせ変更
e.g.)
var fileLoadingImage = "http://ご自身の環境/pplog2/lightbox/images/loadning.gif"
7. すぐ下のvar fileBottomNavCloseImageも同様に変更する。
e.g.)
var fileBottomNavCloseImage = "http://ご自身の環境/pplog2/lightbox/images/closelabel.gif"
8. lightbox.jsを保存
9. cssフォルダの中のlightbox.cssをテキストエディタで開く
10.#prevLinkで検索し下記3カ所のurl(・・・)部分を変更する。
e.g.)
url(http://ご自身の環境/pplog2/lightbox/images/blank.gif)
url(http://ご自身の環境/pplog2/lightbox/images/prevlabel.gif)
url(http://ご自身の環境/pplog2/lightbox/images/nextlabel.gif)
11.lightbox.cssを保存
12.FTPツールを使って、pplog(またはpplog2)直下にlightboxフォルダごとアップロードする。
(lightbox直下のindex.htmlはいらないので削除しても良い)
13.各テンプレートへ、下記をhead内に追加する。(2行になってますが1行で。)
e.g.)
14.テンプレートの適用を行って動作するかを確認して終了。
