JavaScript Lightview JSで画像の拡大表示－ Esprit's Style －エンジニアの足つぼ

Lightviewを使ってみよう！

〆おしゃれな画像表示JavaScript Lightview

上のサムネールをクリックしてみてください。
ウィンドウ上におしゃれな拡大画像を表示する Lightview です。
設置方法は簡単。このURLからファイルをコピーしてHTMLのヘッダーに少し追記するだけ。
LightBox, Highslide JS, Slim, Box GreyBoxにはないスライドショー機能があります。
LigthBoxと同じJSのライブラリを利用していますが、そのライブラリは別途、
ダウンロードする必要があります。
prototype.js,　 scriptaculous.js, effects.jsから入手してください。

@lightviewsample.html

<head><title>....</title>
<link rel="stylesheet" type="text/css" href="/lightview1.0.4/css/lightview.css" />
<script type='text/javascript' src='/lightview1.0.4/js/prototype.js'></script>
<script type='text/javascript' src='/lightview1.0.4/js/scriptaculous.js?load=effects'>
        </script>
<script type='text/javascript' src='/lightview1.0.4/js/lightview.js'></script>

</head>

<body>

･･･
<!-- 画像をグループ化する場合 -->
<a href="big001.jpg" rel="lightview[myset]" title="Title::Comment">
    <img src="thumbnail001.jpg" />
</a>
<a href="big002.jpg" rel="lightview[myset]" title="Title::Comment">
    <img src="thumbnail002.jpg" />
</a>

<!-- 画像をグループ化しない場合 -->
<a href="big003.jpg" rel="lightview" title="Title::Comment">
    <img src="thumbnail003.jpg" />
</a>

･･･

</body>