こんな感じですが、オリジナルサイトからダウンロードしたままでは
こうはならないので注意して下さい。
※ 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 の正しい設置方法と使用方法
posted by
at 2010-12-19 16:32
|
小ネタ
|

|