LightWindow:支持多种媒体显示的Lightbox灯箱特效
时间:2010-05-24 来源:酷站代码
二、举例
1. 实例化任何一个窗口,仅仅是在超链接内加入一个"lightwindow"类,再为这个类做一再相关的设置,例如:
<a href=http://www.5icool.org/uploadfile/2011/0703/20110703112149967.jpg class="lightwindow">5icool.org</a>
即在5icool.org这个超链接内加入了一个lightwindow类,使得通过点击它可以调出一个lightwindow来显示那幅jpg图片。
2.不同的媒体类型
Movie
<a href="http://images.apple.com/movies/newline/the_number_23/the_number_23-tlr1_h.640.mov" class="lightwindow" params="lightwindow_width=640,lightwindow_height=290" >链接名称</a>
SWF
<a href="gallery/header.swf?You-could-put-a-GET-string-here-for-your-flashvars" class="lightwindow" params="lightwindow_width=800,lightwindow_height=345" title="Preview: Doesn't your masthead look perdy?" >链接名称</a>
<a href="http://www.5icool.org/sampleplan.pdf" class="lightwindow">Link Name</a>
如果要使该媒体类型得到正常显示,你的电脑里要装有pdf阅读器。或者你可以使用Flash Paper代替。
External (i.e. A Website)
该类型是一个扩展类型,窗口显示的是一个网页,所以在属性中我们又加入了title和caption用来说明该网页。
<a href="http://www.5icool.org/" class="lightwindow" title="Ruby on Rails" caption="One of my favorites, and really it should be one of yours.">链接名称</a>
Images
画廊用到了一个rel标签,格式为:画廊名[类名]。图片在页面中显示的位置会依此来判断。
single image(单张)
<a href="images/image-5.jpg" class="lightwindow" title="What is this Plant?" author="Unknown" caption="Whatever it is, it is still a pretty cool picture. .">链接名称</a>
a gallery(组图)
<a href="gallery/0-sushi.jpg" class="lightwindow" rel="Random[Sample Images]" title="Left Behind" caption="Look's super tasty!" author="Unknown">image #1</a>
<a href="gallery/1-sushi.jpg" class="lightwindow" rel="Random[Sample Images]" title="Beware of warewolves..." caption="I shouldn't be doing this when I am hungry" author="Unknown">image #2</a>
<a href="gallery/2-sushi.jpg" class="lightwindow" rel="Random[Sample Images]" title="That was good!" caption="Take that sushi!" author="Unknown">image #3</a>
- 栏目搜索>>分类导航
-
Flash幻灯
jQuery幻灯
JS幻灯
Flash相册
jQuery相册
图片特效
导航菜单
广告代码
在线客服
表单按钮
其它特效
-
HTML
CSS
JavaScript
Dreamweaver
Fireworks
设计分享
-
建站教程
网站运营
实用工具
网页模板
网页素材
- CSS酷站 网上购物 设计团队 设计博客

