lightbox.js の正しい設置方法

こんな感じですが、オリジナルサイトからダウンロードしたままでは
こうはならないので注意して下さい。

※ lightbox.on.coocan.jp では、rel="ligthbox_1" に変更しています

※ ダウンロードは個別に右クリックで一つづつダウンロードします


以下は、設置用のコードサンプルです。

<link rel="stylesheet" href="http://lightbox.on.coocan.jp/js/lightbox_1/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://lightbox.on.coocan.jp/js/lightbox_1/lightbox.js"></script>

<a 
	href="http://lh6.ggpht.com/_IzfbcNjqGuE/S1jkKM952HI/AAAAAAAAAPU/CheJ6YkRGPM/s720/b15architecture_exteriors014.jpg"
	rel="lightbox_1"
	title="my caption"
><img
	src="http://lh3.ggpht.com/_IzfbcNjqGuE/TPzJxQkpL5I/AAAAAAAABFQ/A4uYtKe14-0/b15architecture_exteriors014.jpg"
	style='border:solid 1px #000000;' 
></a>

まず CSS を変更します。( 追加です )
そうしないと、オリジナルページのように右下の閉じるリンクが美しくなりません

#lightbox{
	background-color:#eee;
	padding: 10px;
	border-bottom: 2px solid #666;
	border-right: 2px solid #666;
	}
#lightboxDetails{
	font-size: 0.8em;
	padding-top: 0.4em;
	}	
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#closeButton{ top: 5px; right: 5px; }

#lightbox img{ border: none; clear: both;} 
#overlay img{ border: none; }

#overlay{ background-image: url(overlay.png); }

* html #overlay{
	background-color: #333;
	back\ground-color: transparent;
	background-image: url(blank.gif);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
}

kbd{
	color: #555;
	background-color: #ddd;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	font-size: inherit;
	font-family: inherit;
	padding: 0 3px 2px 4px;
}

#keyboardMsg a {
	font-weight: bold;
	color: #303030;
	text-decoration: none;
}

あと、当然ですが、.js 内の画像の URL はホスティングしている場所を
http から記述する必要があります。

var loadingImage = 'http://lightbox.on.coocan.jp/js/lightbox_1/loading.gif';
var closeButton = 'http://lightbox.on.coocan.jp/js/lightbox_1/close.gif';

lightbox.js には、バージョン2 があって、そちらはアニメーションする上に
複数の画像をギャラリーとして表示できます。

関連する記事

Facebox v1.3 の正しい設置方法と使用方法