Shadowbox JSの設定方法（いろいろな表示方法）

シンプルにShadowbox JSを表示させる方法。

◇シンプル表示

<a href=”image.jpg” rel=”shadowbox”>Image</a>

◇画像表示

<a href=”image.jpg” rel=”shadowbox”><img src=”http://image.jpg” /></a>

シンプルに表示させるだけだと rel=”shadowboxを記入するだけです(　＾∀＾)

ポップアップした後のサイズを指定したい場合は、
shadowboxの後ろに;width=400;height=300を記入してやれば表示をコントロールできます。

<a href=”image.jpg” rel=”shadowbox;width=400;height=300”>Image</a>

カテゴリで分けて１つのリンクで複数表示させる方法。

◇カテゴリ表示
image１
image２

<a href=”image.jpg” rel=”shadowbox[abc]” class=”option”>カテゴリ表示</a>
<a href=”image.jpg” rel=”shadowbox[abc]” class=”hidden”>image１</a>
<a href=”image.jpg” rel=”shadowbox[abc]” class=”hidden”>image２</a>

◇画像表示

image１
image２

<a href=”image.jpg” rel=”shadowbox[abc]” class=”option”><img src=”http://image.jpg” /></a>
<a href=”image.jpg” rel=”shadowbox[abc]” class=”hidden”>image１</a>
<a href=”image.jpg” rel=”shadowbox[abc]” class=”hidden”>image２</a>

カテゴリで分けるにはshadowboxの後ろに[　]で囲んで名前を指定してやるだけです。

1つのリンクで複数表示させるには、class=”option”とclass=”hidden”を記入します。

class=”option”＝表示
class=”hidden”＝隠す

これをすべてclass=”option”と記入するとこうなります。

◇カテゴリ表示
◇image１
◇image２

画像表示だと

　　

カテゴリで分けてスライドショーで表示させる方法。

スライドショーで表示させる方法です。
カテゴリで分けて１つのリンクで表示させる方法が進化した感じです。

◇ギャラリー（スライドショー）
imege１
imege２
◇画像表示

imege１
imege２

<a href=”image.jpg” rel=”shadowbox[abc];options={slideshowDelay:3}” class=”option”>ギャラリー</a> <a href=”image.jpg” rel=”shadowbox[abc];options={slideshowDelay:5}” class=”hidden”>image１</a> <a href=”image.jpg” rel=”shadowbox[abc]” class=”hidden”>image２</a>

スライドショーで表示させる方法は、
shadowbox[カテゴリ]の後ろに;options={slideshowDelay:5}を記入してやればいいです。

slideshowDelay:5の　５のところが何秒後に移動するか指定できます。

５と指定していたら5秒後に次の画像に移動します。
10と指定したら10秒後という感じです。