- 浏览: 320664 次
- 性别:
- 来自: 上海
文章分类
最新评论
lightbox基于jquery1.3版(附件1)
具体用法参见http://warren.mesozen.com/jquery-lightbox/
Part 1 - Setup
- jQuery lightbox v0.5 uses the jQuery Library. You will need to include these two Javascript files in your header.
<script type="text/javascript" src="js/jquery-1.3.min.js"></script> <script type="text/javascript" src="js/jquery.lightbox.js"></script>
- Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles).
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
- Check the CSS and make sure the referenced
prevlabel.gif
andnextlabel.gif
files are in the right location. Also, make sure theloading.gif
andcloselabel.gif
files as referenced near the top of thelightbox.js
file are in the right location.
Part 2 - Activate
- Add a
class="lightbox"
attribute to any link tag to activate the lightbox. For example:
Optional: Use the<a href="images/image-1.jpg" class="lightbox" title="my caption">image #1</a>
title
attribute if you want to show a caption. - If you have a set of related images that you would like to group,
follow step one but additionally include a group name in the rel
attribute. For example:
<a href="images/image-1.jpg" class="lightbox" rel="roadtrip">image #1</a> <a href="images/image-2.jpg" class="lightbox" rel="roadtrip">image #2</a> <a href="images/image-3.jpg" class="lightbox" rel="roadtrip">image #3</a>
lightbox基于prototype版 (附件2)
具体用法参见http://www.huddletogether.com/projects/lightbox2/
Part 1 - Setup
- Lightbox v2.0 uses the Prototype Framework and Scriptaculous
Effects Library. You will need to include these three Javascript files
in your header.
<script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script>
- Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles).
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
- Check the CSS and make sure the referenced
prevlabel.gif
andnextlabel.gif
files are in the right location. Also, make sure theloading.gif
andcloselabel.gif
files as referenced near the top of thelightbox.js
file are in the right location.
Part 2 - Activate
- Add a
rel="lightbox"
attribute to any link tag to activate the lightbox. For example:
Optional: Use the<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
title
attribute if you want to show a caption. - If you have a set of related images that you would like to group,
follow step one but additionally include a group name between square
brackets in the rel attribute. For example:
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a> <a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a> <a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
附件3是我写的测试例子。
- lightbox-jquery.zip (306.6 KB)
- 下载次数: 66
- lightbox-prototype.zip (96.3 KB)
- 下载次数: 28
- jquery-lightbox_demo_.zip (1.1 MB)
- 下载次数: 149
评论
2 楼
abushuia
2009-02-25
这个我用过。在我们的项目中的相册显示上。不过没有深看。我学东西老是够用为止。。
1 楼
supercode
2009-01-18
现在还勤奋地奉献着...
发表评论
-
遍历class
2010-11-14 22:03 1976一般国外的网站很注重细节,他们会把菜单或者button做成图片 ... -
简单的新闻滚动
2010-11-09 23:07 1407这里直接用jquey的animate函数做的滚动效果 ... -
上一张下一张
2010-11-09 22:12 3343预览照片的常用功能:上一张下一张 效果图(很喜欢的蒙奇 ... -
自动播放的jQuery幻灯片
2010-10-29 22:23 3124来看下效果图: <script src ... -
EasySlider
2009-11-16 21:58 1599Easy Slider 1.5 - The Easiest j ... -
Cookie Plugin for jQuery
2009-08-09 23:30 1948Cookie Plugin for jQuery ... -
价格过滤条
2009-04-03 10:18 1188写了一个价格过滤条: 重点是按钮的css定位要算好。 只能 ... -
js图片轮换效果(二)
2009-03-13 15:23 4787结构: <ul id="picture& ... -
jquery ui 日历插件(换色+类型)
2009-03-10 16:59 5603抽空把jquery ui 里的日历做了个整理,整合了换色和几 ... -
二级菜单效果(3)
2009-03-07 16:05 1546html代码结构: <li class=&quo ... -
jquery之Image Scroller插件
2009-02-23 21:10 2239jquery之Image Scroller插件 图片滚动插 ... -
jquery学习之—构建功能型表单(二)
2009-02-10 20:45 1367在构建功能型表单(一) 中介绍了一些适用于用户进行文本性输入的 ... -
很炫的图片循环效果(jquery改写版)
2009-02-08 21:18 3351以前我在博客中发表过这个图片循环效果,是用javascript ... -
用animate方法展示大图
2009-02-06 15:44 1276demo中点击按钮后div元素的几个不同属性一同变化 ... -
菜单伸缩动画
2009-02-06 13:41 1509方法: $(document).ready(funct ... -
sexy curls插件
2009-02-06 12:14 1214The sexy curls jquery plugin ... -
facebox插件
2009-01-19 14:03 3228在网上down下facebox1.2版的源码, 重新整理了下( ... -
thickbox插件用法
2009-01-13 22:47 1587最近发现一个不错的基于jquery的插件thickBox ,感 ... -
动态过滤填充input框和用弹出层替换select框
2008-12-23 23:21 3130左图是用keydown事件写的动态过滤填充input框 $ ... -
js图片轮换效果(一)
2008-12-15 21:39 7656常常在各大网站上看到如下图所示的图片轮换效果,有的是用flas ...
相关推荐
Lightbox图片插件(图片大小调节)很实用,可以轻松实现图片显示功能包括上一张 下一张
<title>jQuery Lightbox插件点击弹出大图全屏展示特效</title> </head>...jQuery Lightbox插件是一款响应速度快的基于jquery.swipebox插件实现的点击小图弹出大图全屏展示特效代码。
Prototype 实现的局部放大图像带播放的Lightbox插件Prototype 实现的局部放大图像带播放的Lightbox插件Prototype 实现的局部放大图像带播放的Lightbox插件
LC Lightbox是一款强大的图片画廊式jquery Lightbox插件。LC Lightbox采用响应式设计,功能强大,支持移动手机,支持缩略图等,是现代网页设计的首选lightbox插件。
Swipebox是一款支持桌面、移动触摸手机和平板电脑的jquery Lightbox插件。该lightbox插件支持手机的触摸手势,支持桌面电脑的键盘导航,并且支持视频的播放。
这是一款支持移动触摸设备的简洁jQuery图片Lightbox插件。该LightBox插件可以在移动手机和桌面设备中运行,它具有响应式,预加载图片,键盘支持等特点,非常实用。
perfundo是一款纯CSS3 lightbox插件。它可以创建单张或多张图片的弹出lightbox层效果,也可以和js结合一起使用。
ColorBox是一款功能强大的轻量级jQuery Lightbox插件。ColorBox支持图片展示、图片分组、幻灯片、行内样式和iframe内容。该lightbox插件的兼容性极好,可以兼容IE7+的IE浏览器。
ViewBox是一款jQuery lightbox插件。ViewBox可以显示图片,也可以显示HTML内容。它使用简单,是一款不错的jquery Lightbox插件。
这是一款使用jQuery和CSS3制作的图片画廊Lightbox插件。该lightbox插件中使用CSS3来为图片制作阴影和旋转效果,并使用jQuery来在点击图片的时候制作淡入淡出的图片放大效果。
支持全屏缩放下载功能lightbox插件是一款支持图片,视频,iframe等多种媒体。
响应速度快的jQuery Lightbox插件实现源码.zip 响应速度快的jQuery Lightbox插件实现源码.zip 响应速度快的jQuery Lightbox插件实现源码.zip
jQuery Lightbox插件点击弹出大图全屏展示特效
jQuery响应式LightBox插件可以设置两种图像的显示方式,contain和cover。lightbox中的图像可以放大和平移,还可以全屏显示。
html5 LightBox插件手机端图片幻灯片代码
这是一款支持图片,视频,iframe等多种媒体全屏缩放下载功能的lightbox插件。
Galpop是一款jquery响应式lightbox插件。该jquery响应式lightbox插件可以用于展示图片,HTML内容,iframe和ajax内容等,功能非常强大。
好用的lightbox插件 非lightbox哦 可全屏 可缩放
这是一款使用jQuery制作的画廊图片预览lightbox插件。该Lightbox插件小巧、简单、易用,效果也非常炫酷。它在图片放大和属性时有很酷的淡入淡出动画效果。