"Lytebox"とはhtmlページで動く写真のアルバム、スライドショーの表示用ジャヴァスクリプトです。
手動送りやオートスライドショーもできます。 hhttp://lytebox.com にて配布されています。
1= まず「Lytebox v3.22」 (May 2009)zipファイルをダウンロード、解凍、保存します。
フォルダーには「 javascriptファイル」 「cssカスケードスタイルシート ドキュメント」 「 images 画像ファイル」が含まれ、すべてそのままサーバーのhtmlと同じディレクトリーにアップします。
同じでないとimagesのURIが変わってしまうためcssの編集等のカスタマイズが必要になります。
2= 以下の javascript(.js)と スタイルシート(.css)のリンクの記述をhead内に記入。
<script type="text/javascript" language="javascript" src="lytebox.js"></script> <link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />
3= 以下の例のように、それぞれの目的に合った rel属性を <a タグに記入する。
*A 単独画像としての使用例 aタグに rel="lytebox" を記入。 写真1枚を画面中央に表示。
<a href="img/0001.jpg" rel="lytebox" title="画像-0001">写真001ここをクリック</a>( title="画像-0001"は任意文字 写真の下に表示されます 写真001ここをクリックの文字リンクは画像の使用も可)
*B グループ画像としての使用例 aタグに rel="lytebox[groupphoto]" を記入。
手動送りのスライドショー。
<a href="img/0002.jpg" rel="lytebox[groupphoto]" title="グループ画像-002">グループ画像</a> <a href="img/0003.jpg" rel="lytebox[groupphoto]" title="グループ画像-003">グループ画像</a>( [groupphoto]の文字は任意文字 画像の枚数は何枚でも )
*C スライドショー画像としての使用例 aタグに rel="lyteshow[slidephoto]" を記入。
オートスライドショー、手動送りも可能。 インターバル時間変更はJSファイルを編集。
<a href="img/0005.jpg" rel="lyteshow[slidephoto]" title="スライドショー画像-0005">スライドショー画像</a> <a href="img/0006.jpg" rel="lyteshow[slidephoto]" title="スライドショー画像-0006">スライドショー画像</a>( [slidephoto]の文字は任意文字)
*D HTML内容としての使用例 aタグに rel="lyteframe" を記入。
インラインフレーム iframeのように別の htmlページを呼び出して中央表示。
<a href="http://**********myblog.jp" rel="lyteframe" title="Welcom my Blog" rev="width: 550px; height: 450px; scrolling: yes;">MY BLOG</a>( rev="*****" によって開くページの大きさを指定できる yesは noに変更も可 )