LyteBox JS ライブラリーについて
http://www.dolem.com/lytebox/ Lytebox Slides Show Example
概 要
Lyteboxは、Lokesh Dhakar（http://www.huddletogether.com）が作成したLightbox系から作りました。
目的は、prototype.js、effects.jsとscriptaculous.jsの依存を取り除いた完全独立のスクリプトを書くことでした。
Lytebox（それは、iFrameをサポートしリリースしました）のオリジナル版からの、大きな修正は、Lyteboxのルック＆フィールをカスタマイズすることができる「スライドショー」をサポートし、HTMLコンテンツを支援（ちょうどイメージに対して）そして、より多くの設定可能なオプションと同様にパフォーマンスを向上しました。
これらの修正はユーザー情報の結果として加えましたので、あなたはこの新機能についての良いアイデアを感じるなら、Lytebox掲示版を訪問し、それらを理解する事ができるでしょう！
新しくそして改良されたLyteboxの実例から、以下の表示タイプのうちから1つ、イメージを選んでください：
１ シングル・イメージ
２ グループ分けされたイメージ
３ スライドショー（Lyteshow特徴）
４ HTML内容（Lyteframe特徴）
M31 ― アンドロメダ銀河系 検索Google ！
M42 ― オリオン星雲 コンタクト形 ―
使用法
ステップ1：Lytebox v3.22をダウンロード
ステップ2：あなたのドキュメントの<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 href="images/image-1.jpg" rel="lytebox" title="Image Description">Image #1</a>
集められたイメージ例：
<a href="images/image-1.jpg" rel="lytebox[vacation]" title="Mom and Dad">Mom and Dad</a>
<a href="images/image-2.jpg" rel="lytebox[vacation]" title="My Sister">My Sister</a>
スライドショー例（Note:lyteboxの代わりにlyteshowを使用）：
<a href="images/image-1.jpg" rel="lyteshow[vacation]" title="Mom and Dad">Mom and Dad</a>
<a href="images/image-2.jpg" rel="lyteshow[vacation]" title="My Sister">My Sister</a>
HTML内容例（Note:lyteboxの代わりにlyteframeを使用）：
<a href="http://www.google.com" rel="lyteframe" title="Search Google" rev="width: 400px; height: 300px; scrolling: no;">Google Search</a>
<a href="catalog1.htm" rel="lyteframe[catalog]" title="Summer Catalog">Summer Catalog</a>
<a href="catalog1.htm" rel="lyteframe[catalog]" title="Winter Catalog">Winter Catalog</a>
Note：「Lyteframe」特徴を用いるとき、Rev属性は幅（高さ）をコントロールするのに用いられます、そして、ウインドウのスクロールします。
Rev属性が省略されるならば、デフォルトで、幅/高さは400pxにセットされます、そして、スクロールはautoにセットされます。
構成：下記は設定可能なLyteboxオプションの完全なリストです。
Lyteboxは、主なJavaScriptファイル（lytebox.js）を編集することによって構成されることができます。
設定可能なlytebox.jsの変数は、下記に示します。
コメント（//に続く文）はかなり明確ですので、私はこれ以上詳細に立ち入りません。
Lytebox can be configured by editing the main JavaScript file, lytebox.js.
Shown below are the lines in lytebox.js which are configurable.
The comments (text following the "//" characters) are fairly self-explanatory, so I won't go into any further detail.
/*** Start Global Configuration ***/
this.theme = 'grey'; // themes: grey (default), red, green, blue, gold
this.hideFlash = true; // controls whether or not Flash objects should be hidden
this.outerBorder = false; // controls whether to show the outer grey (or theme) border
this.resizeSpeed = 8; // controls the speed of the image resizing (1=slowest and 10=fastest)
this.maxOpacity = 80; // higher opacity = darker overlay, lower opacity = lighter overlay
this.navType = 1; // 1 = "Prev/Next" buttons on top left and left (default), 2 = "<< prev | next >>" links next to image number
this.autoResize = true; // controls whether or not images should be resized if larger than the browser window dimensions
this.doAnimations = true; // controls whether or not "animate" Lytebox, i.e. resize transition between images, fade in/out effects, etc.
this.borderSize = 12; // if you adjust the padding in the CSS, you will need to update this variable -- otherwise, leave this alone...
/*** End Global Configuration ***/
/*** Configure Slideshow Options ***/
this.slideInterval = 10000; // Change value (milliseconds) to increase/decrease the time between "slides" (10000 = 10 seconds)
this.showNavigation = true; // true to display Next/Prev buttons/text during slideshow, false to hide
this.showClose = true; // true to display the Close button, false to hide
this.showDetails = true; // true to display image details (caption, count), false to hide
this.showPlayPause = true; // true to display pause/play buttons next to close button, false to hide
this.autoEnd = true; // true to automatically close Lytebox after the last image is reached, false to keep open
this.pauseOnNextClick = false; // true to pause the slideshow when the "Next" button is clicked
this.pauseOnPrevClick = true; // true to pause the slideshow when the "Prev" button is clicked
/*** End Slideshow Configuration ***/
Lytebox Configuration
iFrames：あなたがiFrame環境でLyteboxを使う予定ならば、あなたはlytebox.cssをペアレントページに含める必要があります、その一方で、lytebox.jsをiFrameページに含みます。
ソースコード：JavaScriptファイル（lytebox.js）が最適化目的のために分解された（削除されるコメント）ダウンロードに含めます。
コメントされたソースコードは、ここで利用できます。
サポート：Lyteboxの問題を抱えていること？
Lytebox掲示版を訪問して、そして、あなたの答えを見つけてください。
誰かがすでに掲示版にThreadsしている事があるので、必ずポスティングの前にＦＡＱを読むようにしてください。
ブラウザー互換性
ブラウザー互換性が最初に考えられますが、全てのブラウザーがテストに利用できるというわけではありませんでした。
これらのブラウザーには、KonquererのようなLinux-onlyのブラウザー、Netscapeそしてサファリを含みます。
テストされた主なブラウザーは使用中におよそ98%のブラウザーをカバーしますので、
かなり重大な問題が起こらないと言ってさしつかえないです。
IEだけに関係のある「特別な」問題が、あります。
たまに、ページの右側は、overlayedされない小さな領域を持っています。
これは、IEがそれがマージンであることを測る方法に起因します。
この問題を解決するために、以下のスタイルをページに追加します。
（しかし、それはまた、全てのページの様子に影響を及ぼします）：body｛margin：0 auto;｝
以下のブラウザーは、このスクリプトでテストされました：
IE 5.01 SP2−漸移効果は働きません、しかし、背景は暗いです（完全に）。
IE 5.5 SP2 ― 既知の問題点はなし。
IE 6.0 SP2−lytebox.cssの修飾範囲を超えて正しく機能しないテーマがあります。詳細は掲示版で読んでください。
IE 7.0 ― 既知の問題点はなし。
オペラ9.23 ― 既知の問題点はなし。
Firefox 1.5+ ― 既知お問題点はなし、もちろん。
許可
この仕事は、3.0が認可する創造的なコモンズ帰属の下で認可されます。