...タグ・小技・etc...
lightbox
セットの場合
[サンプル]
画像をクリック
[ファイルのダウンロード]
Lightbox v2.04をダウンロードします。 [画像をグループとして扱う場合]lightboxの後に [roadtrip]を記述します。
クリックした後に表示される画像の下のところに
グループ化した枚数が、「Image 1 of 10」と表示されます。
<a href="../images/image-1.jpg" rel="lightbox[roadtrip]" title="サンプル">
<img src="../images/thumb-1.jpg" alt="サンプル画像"
width="100" height="40" />
</a>
[
が表示されない場合]
赤い部分の画像ファイルのディレクトリを見直してみてください。
// Configurationl
LightboxOptions = Object.extend(｛
fileLoadingImage: '../images/loading.gif',
fileBottomNavCloseImage: '../images/closelabel.gif',
[メモ]
単体で指定する場合は、こちらをご覧ください。「CSS-lecture」 を参照させていただきました。
ソース
[ｈｅａｄの中]
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /><script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder"
type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
[ｂｏｄｙの中]
<a href="../images/画像ファイルa.jpg" rel="lightbox[roadtrip]" title="サンプル">
<img src="../images/ファイルa.jpg" alt="サンプル画像"
width="100" height="40" />
</a>
<a href="../images/画像ファイルa.jpg" rel="lightbox[roadtrip]" title="サンプル">
<img src="../images/ファイルa.jpg" alt="サンプル画像"
width="100" height="40" />
</a>
<a href="../images/画像ファイルa.jpg" rel="lightbox[roadtrip]" title="サンプル">
<img src="../images/ファイルa.jpg" alt="サンプル画像"
width="100" height="40" />
</a>
<a href="../images/画像ファイルa.jpg" rel="lightbox[roadtrip]" title="サンプル">
<img src="../images/ファイルa.jpg" alt="サンプル画像"
width="100" height="40" />
</a>