オープンソースコラム


2008/11/01 22:34Update

Lytebox - 自動再生スライドショー機能付け画像ギャラリー

TAGS: Lytebox | 画像 | イメージ | ギャラリー | スライドショー

スポンサード リンク


LyteboxはLightboxを参照して作り出された画像ギャラリーJavaScriptライブラリです。Lightboxと違い「軽量、自動再生スライドショー機能付け」がLyteboxの最大の特徴でもあります。



機能・特徴


◇ 画像ギャラリー。
◇ スライドショー。自動で画像を切り替える機能
◇ HTMLコンテンツ表示
◇ ライセンス:Creative Commons Attribution 3.0 License

使い方


1)Lyteboxをダウンロード
2)ウェブページの<head></head>の間にダウンロードしたjavascriptやCSSを追加
<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />


3)表示
■ 単一画像の場合
<a href="images/image-1.jpg" rel="lytebox">Image #1</a>
<a href="images/image-1.jpg" rel="lytebox"><img src="images/image-thumbnail1.jpg" /></a>


■ 複数画像の場合
<a href="images/image-1.jpg" rel="lytebox[vacation]">Mom and Dad</a>
<a href="images/image-2.jpg" rel="lytebox[vacation]">My Sister</a>


■ スライドショー(自動で画像を切り替える)
<a href="images/image-1.jpg" rel="lyteshow[vacation]">Mom and Dad</a>
<a href="images/image-2.jpg" rel="lyteshow[vacation]">My Sister</a>


■ HTMLコンテンツ
<a href="http://www.google.com" rel="lyteframe" 
   rev="width: 400px; height: 300px; scrolling: no;">Google Search</a>

<a href="catalog1.htm" rel="lyteframe[catalog]">Summer Catalog</a>
<a href="catalog1.htm" rel="lyteframe[catalog]">Winter Catalog</a>

Sponsored Link