Lytebox--可以单张，成组，播放的LightBox_友诺网--SOHO乐园，工作社区

lytebox是一个媲美lightbox2的图片效果展示，甚至于超过了lightbox2.它主要功能：Lytebox不仅能支持图像展示，还比Lightbox2多了“自动播放图像”的功能，当然最主要的是Lytebox支持弹出网页的效果。

下面我们来看看lytebox的详细用法：

Lytebox最新的版本为v3.22 官方网址 http://dolem.com/lytebox/

使用方法是：

1，下载 Lytebox v3.22的源码及相关图像素材lytebox_v3.22.zip

2，把如下代码拷贝到网页的<head>和</head> 之间.

<script type="text/javascript" language="javascript" src="lytebox.js"></script> 
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />

3，最后，就可以增加一个Lytebox显示实例了。

LyteBox提供三种显示，请参考此页的演示：点击打开页面的三组图片即可。

官方演示页面友诺本地演示页

单个图像例句：

<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>

成组图像翻页+播放例句：（ 注意lyteshow而不是lytebox使用）

<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网页内容示例：

<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>

注意：当使用“Lyteframe”功能，该活的属性是用来控制宽度，高度和窗口的滚动。 If the REV attribute is omitted, then by default width/height is set to 400px and scrolling is set to auto.如果活属性被省略，则默认宽度/高度设置为400像素和滚动设置为自动。

配置：如需配置Lytebox选项，请点击这里的完整列表。
下面是谷歌翻译的配置说明：

Lytebox can be configured by editing the main JavaScript file, lytebox.js. Lytebox可以配置主要通过编辑JavaScript文件，lytebox.js。 Shown below are the lines in lytebox.js which are configurable.下面显示的是lytebox.js的线，可配置的。 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.theme ='灰色'; / /主题：灰色（默认），红，绿，蓝，金  
    this.hideFlash        = true;   // controls whether or not Flash objects should be hidden this.hideFlash =真; / /控制是否Flash对象应该是隐藏  
    this.outerBorder      = false;  // controls whether to show the outer grey (or theme) border this.outerBorder =假; / /控制是否显示外部灰色（或主题）边界  
    this.resizeSpeed      = 8;      // controls the speed of the image resizing (1=slowest and 10=fastest) this.resizeSpeed = 8; / /控制图像的大小速度（1 =最慢，10 =最快）  
    this.maxOpacity       = 80;     // higher opacity = darker overlay, lower opacity = lighter overlay this.maxOpacity = 80; / /高不透明度=黑暗覆盖，降低不透明度=打火机覆盖  
    this.navType          = 1;      // 1 = "Prev/Next" buttons on top left and left (default), 2 = "<< prev | next >>" links next to image number this.navType = 1; / / 1 =“上一页/下一页”的左上方和左（默认），2 =“”“上一页|下一页”“”链接旁边的图像数字按键  
    this.autoResize       = true;   // controls whether or not images should be resized if larger than the browser window dimensions this.autoResize =真; / /控制是否应调整大小的图像，如果浏览器窗口比体积较大  
    this.doAnimations     = true;   // controls whether or not "animate" Lytebox, ie resize transition between images, fade in/out effects, etc. this.doAnimations =真; / /控制是否“动画”Lytebox，即图像间的调整转型，进行淡入效果等/  
    this.borderSize       = 12;     // if you adjust the padding in the CSS, you will need to update this variable -- otherwise, leave this alone... this.borderSize = 12; / /如果调整的CSS填充，则需要更新这个变量-否则，请将此单...  
/*** End Global Configuration ***/ / ***完全局配置*** /  
 
/*** Configure Slideshow Options ***/ / ***配置幻灯片放映选项*** /  
    this.slideInterval    = 10000;  // Change value (milliseconds) to increase/decrease the time between "slides" (10000 = 10 seconds) this.slideInterval = 10000; / /变化值（毫秒），以增加/减少之间的“幻灯片”（10000 = 10秒）  
    this.showNavigation   = true;   // true to display Next/Prev buttons/text during slideshow, false to hide this.showNavigation =真; / /真正显示下一页/上一页按钮/文本幻灯片演示期间，虚假隐藏  
    this.showClose        = true;   // true to display the Close button, false to hide this.showClose =真; / /真正显示关闭按钮，虚假隐藏  
    this.showDetails      = true;   // true to display image details (caption, count), false to hide this.showDetails =真; / /正确显示图像细节（标题，数），假隐藏  
    this.showPlayPause    = true;   // true to display pause/play buttons next to close button, false to hide this.showPlayPause =真; / /真正显示暂停/播放按钮旁边的关闭按钮，虚假隐藏  
    this.autoEnd          = true;   // true to automatically close Lytebox after the last image is reached, false to keep open this.autoEnd =真; / /真正的自动关闭后，最后达成的形象Lytebox，假以保持开放  
    this.pauseOnNextClick = false;  // true to pause the slideshow when the "Next" button is clicked this.pauseOnNextClick =假; / /真实暂停幻灯片时，“下一步”按钮被点击  
    this.pauseOnPrevClick = true;   // true to pause the slideshow when the "Prev" button is clicked this.pauseOnPrevClick =真; / /真实暂停幻灯片时，“上一页”按钮被点击  
/*** End Slideshow Configuration ***/ / ***完幻灯片配置*** /

iFrames: If you plan to use Lytebox in an iFrame environment, then you need to include lytebox.css in the parent document, while including lytebox.js in the iFrame document.
iFrame中：如果您计划使用的iframe环境Lytebox，那么您需要包括在父文件lytebox.css，而包括在iFrame的文件lytebox.js。
Source Code: The JavaScript file (lytebox.js) that is included in the download has been stripped down (comments removed) for optimization purposes.
源代码：JavaScript文件（lytebox.js）是包含在下载已经被剥夺了（评论取消了优化的目的）。 The commented source code is available HERE .源代码的注释可这里。

以上文字三原色创作并整理官方网站文字，并配合谷歌翻译。

友诺网--SOHO乐园，工作社区

搜索

热门标签

Lytebox--可以单张，成组，播放的LightBox