Lytebox - 自動再生スライドショー機能付け画像ギャラリー
LyteboxはLightboxを参照して作り出された画像ギャラリーJavaScriptライブラリです。Lightboxと違い「軽量、自動再生スライドショー機能付け」がLyteboxの最大の特徴でもあります。
◇ 画像ギャラリー。
◇ スライドショー。自動で画像を切り替える機能
◇ HTMLコンテンツ表示
◇ ライセンス:Creative Commons Attribution 3.0 License
1)Lyteboxをダウンロード
2)ウェブページの<head></head>の間にダウンロードしたjavascriptやCSSを追加
3)表示
■ 単一画像の場合
■ 複数画像の場合
■ スライドショー(自動で画像を切り替える)
■ HTMLコンテンツ
機能・特徴
◇ 画像ギャラリー。
◇ スライドショー。自動で画像を切り替える機能
◇ 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>