Lyteboxはフォトギャラリーなどをスライドショーで表示できるスクリプト。
Lightboxとほとんど同じですが、Lyteboxは軽量で自動スライドショーができます。
※ iframeでHTMLコンテンツも表示できます。
使用方法
1）Lyteboxをダウンロード Lytebox v3.22 (2010/02/07)Release
2）解凍したフォルダをディレクトリーにアップロード
3）head内にjavascriptやCSSを記述
4）以下のようにrel属性を追加
グループ画像・・rel属性「rel=”lytebox”」
スライドショー・・rel属性「rel=”lyteshow”」
HTMLコンテンツ・・rel属性「rel=”lyteframe”」
DEMO・・HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>lytebox-DEMO</title>
<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />
</head>
<style>
#lytebox_slideshow{
text-align: left;
float: left;
width: 500px;
}
div.thumb{
float:left;
padding:8px;
}
a:hover img{
opacity:0.8;
filter: alpha(opacity=80);
}
</style>
<body>
<div id="lytebox_slideshow">
<div class="thumb"><a href="images/penguin1.jpg" rel="lyteshow" title="野毛山動物園のペンギン"><img src="images/penguin1_tn.jpg" border="0" /></a></div>
<div class="thumb"><a href="images/penguin2.jpg" rel="lyteshow" title="野毛山動物園のペンギン"><img src="images/penguin2_tn.jpg" border="0" /></a></div>
<div class="thumb"><a href="images/penguin3.jpg" rel="lyteshow" title="野毛山動物園のペンギン"><img src="images/penguin3_tn.jpg" border="0" /></a></div>
</div>
</body>
</html>
※ IE8で背景、「CLOSE」などの画像表示がでない場合、lytebox.js内81行目あたりを修正
こちらを参照： Lytebox Tips IE8対応 & 画面close後の遷移