随机文章

文章分类

站点统计

  • 分类总数: 13 个
  • 文章总数: 145 篇
  • 评论总数: 35 条
  • 附件总数: 59 个
  • 建站日期: 2008-08-18
  • 访问总数: 387354 人次
  • RSS订阅: 文章|评论

最新评论

赞助商

友情链接

LyteBox -另一个LightBox效果库

Admin 于 2008-09-30 01:29:53 发表JavaScript

订阅: http://www.kaiyuan8.org/Feed/Article_99.aspx
引用: 点这里获取地址 (UTF-8)
IronPython 2.0 beta 5 已经发布 < LyteBox -另一个LightBox效果库 > 使用了Mono.Cecil的一些项目

Lightbox的效果类似于WinXP操作系统的注销/关机对话框，除去屏幕中心位置的对话框，其他的区域都以淡出的效果逐渐变为银灰色以增加对比度，此时除了对话框内的表单控件，没有其他区域可以获取焦点。 Lightbox的作用则相当于从前只在IE中被支持的"Modal Dialog"；现在在FireFox也可用window.open(url, name, " modal=yes ");来实现同样的效果。使用"Modal Dialog"将限制用户的操作于弹出的对话框中，只有完成设定好的操作后方才关闭。在一些逻辑敏感的应用中强制吸引用户的注意力以防止用户的误操作导致程序逻辑淆乱。
最流行的LightBox库是Lokesh Dhakar (http://www.huddletogether.com)的基于prototype.js、effects.js和scriptaculous.js的实现，LightBox2 Demo：http://www.cnbruce.com/test/lightbox/ 。而LyteBox（http://dolem.com/lytebox/）只需在网页中引用lytebox.js脚本文件就足够了。Lytebox不仅能支持图像展示，还比Lightbox2多了“自动播放图像”的功能，当然最主要的是Lytebox支持弹出网页的效果。

使用方法

1、下载Lytebox最新的版本： LyteBox v3.2

2、在页面<head>...</head>中加入：

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

3、根据实际需要在链接上添加相应的rel值：
    ①、对于图像应用而言，Lytebox提供了三种方案，即：单张图像的显示，多张图像的翻页显示和多种图像以自动播放的幻灯式显示。分别在超级连接中以 rel="lytebox" 、 rel="lytebox[vacation]" 和 rel="lyteshow[vacation]" 来表示。
    ②、对于网页应用而言，Lytebox提供了两种方案，即：单页面和可以翻页的多页面效果。分别在超级链接中用 rel="lyteframe" 和 rel="lyteframe[catalog]" 来表示，还可以定义窗口大小和滚动条的显示状况：rev="width: 400px; height: 300px; scrolling: no;"。

 配置

   Single Image Example:

  1. <a href="images/image-1.jpg" rel="lytebox" title="Image Description">Image #1</a> 

    Grouped Images Example:

  1. <a href="images/image-1.jpg" rel="lytebox[vacation]" title="Mom and Dad">Mom and Dad</a> 
  2. <a href="images/image-2.jpg" rel="lytebox[vacation]" title="My Sister">My Sister</a> 

    Slideshow Example (note the use of lyteshow instead of lytebox):

  1. <a href="images/image-1.jpg" rel="lyteshow[vacation]" title="Mom and Dad">Mom and Dad</a> 
  2. <a href="images/image-2.jpg" rel="lyteshow[vacation]" title="My Sister">My Sister</a> 

    HTML Content Example (note the use of lyteframe instead of lytebox):

  1. <a href="http://www.google.com" rel="lyteframe" title="Search Google" 
  2.    rev="width: 400px; height: 300px; scrolling: no;">Google Search</a> 
  3.  
  4. <a href="catalog1.htm" rel="lyteframe[catalog]" title="Summer Catalog">Summer Catalog</a> 
  5. <a href="catalog1.htm" rel="lyteframe[catalog]" title="Winter Catalog">Winter Catalog</a> 

注意
1、使用“Lyteframe”特性时，通过链接的REV属性控制弹出窗口的高、宽及滚动条，如果没有设置REV属性，默认值为：高400px、宽400px、scrolling属性为auto。
2、如果链接所在页面为iFrame，则需要在iFrame的父级页面中引用lytebox.css而在iFrame页面中引用lytebox.js
3、下载包含完整注释的代码：点击下载

 浏览器兼容

IE 5.0、IE 5.5 、IE 6.0 、IE 7.0、Opera 9.23、Firefox 1.5+、Safari、Google Chrome。对于IE，如果页面右边出现小的缝隙在页面中添加如下样式即可： body { margin: 0 auto; }

更多配置：http://dolem.com/lytebox/_configurations.htm

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


 

被阅1314次, 0票 投一票LyteBox LightBox
  • 看完了要说点啥么？
  • 昵称 (不填说不了话)
  • 信箱地址 (不会被公开，但是不填也说不了话)
  • 网址 (这个不填也成)
Powered by MiniBoke v2.0.0.8 Build 0828

Copyright © 2008 开源吧！. All rights reserved.

粤ICP备07500939号