こないだ見かけたlightbox js V2.0とやらを導入。
クリックしてみるべし
参考にしたのは
[Mac＆Lovers]:byPlanting Field 2ndさんの
lightbox js V2.0導入
ハムスターの写真・飼い方/Hamster-Santaさんの
Lightbox JS v2.0の使い方と設置
blog@slightlyblueさんの
rel属性無しでLightbox JS v2.02
lightbox js V2.0からlightbox2.02.zipをゲット。
いらないものを削除
index.html
images/image-1.jpg
images/thumb-1.jpg
jsフォルダ内のlightbox.jsの相対パスを絶対パスに書き換えた方がいいらしいので書き換えますが、
blog@slightlyblueさんのとこのlightbox.jsを使いますので
ここからlightbox.jsをゲット。
css、images、jsの各フォルダを任意の場所にアップします。
lightbox.js内の68行目あたりの
var fileLoadingImage = "images/loading.gif";
var fileBottomNavCloseImage = "images/closelabel.gif";
を自分のサーバーに合わせて絶対パスに書き換えます。
var fileLoadingImage = "http://funnysoul.com/***/***/loading.gif";
var fileBottomNavCloseImage = "http://funnysoul.com/***/***/closelabel.gif";
各テンプレートの<head>～</head>の間に下記を記述します。
<link rel="stylesheet" href="http://funnysoul.com/***/***/lightbox.css" type="text/css" />
<script type="text/javascript" src="http://funnysoul.com/***/***/prototype.js"></script>
<script type="text/javascript" src="http://funnysoul.com/***/***/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://funnysoul.com/***/***/lightbox.js"></script>
赤字の部分は自分のサーバーに合うように書き換えてください。
俺の場合は各テンプレートに直接書かないでモジュール化してテンプレートに埋め込みました。
エントリーを書くときには
<a href="大きく表示させる画像のURL" title="***"><img src="サムネイルのURL" alt="" /></a>
こんな感じで記述すればおっけー
コメントする(半角英数のみのコメントはできません)