「Lightbox JS v2.0の使い方と設置」

2006.04.18

cssファイル内の画像相対パスも絶対パスに変更しておいたほうが無難かもしれません。
（当サイトでは行ってません）

imagesフォルダ内のサンプルイメージ（image-1とthumb-1）は不要なので削除しておきます

●アップロード

css、images、jsの各フォルダを
sb/Serene Bachのindex.htmlと同じディレクトリにアップロードします。

●テンプレートへの追記

<head>～</head>部分に下記を追記します

<script type="text/javascript" src="{site_top}js/prototype.js"></script>
<script type="text/javascript" src="{site_top}js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="{site_top}js/lightbox.js"></script>
<link rel="stylesheet" href="{site_top}css/lightbox.css" type="text/css" media="screen" />

●表示の方法

画像ひとつだけ、ひとつづつのみLightboxで表示させたい場合
「 rel="lightbox" 」をリンクタグに追記します。

<a href="元の画像（Lightboxで表示させる画像）のURL" rel="lightbox" title="□□□"><img src="小さい画像（サムネイル）のURL" alt="" /></a>

□□□に記入した文がLightbox内で表示されます。

複数の画像をスライドショー的に表示させたい場合
「 rel="lightbox[▲▲▲]" 」をリンクタグに追記します。

<a href="画像１の元画像URL" rel="lightbox[▲▲▲]">画像１</a>
<a href="画像２の元画像URL" rel="lightbox[▲▲▲]">画像２</a>
<a href="画像３の元画像URL" rel="lightbox[▲▲▲]">画像３</a>

▲▲▲は統一した半角英数字で指定して下さい。

例えば下記の例では「okura」、上記の例では「sample」としてあります。
画像１

[7] << [9] >>
comments (18)

<< 「Clipnow」
「悲劇」 >>
【0】TOP

PC版Hamster-Santa

(C)Hamster-Santa
--Serene Bach--