注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

原版图片效果插件Jquery Lightbox2

jQuery插件 fishcity 2202浏览

Jquery Lightbox2

jquery Lightbox插件是现下最流行的图片浏览效果了,具有功能:自动根据窗口的大小缩放图片,模式窗口,幻灯片方式播放,内容预加载,渐变等效果。八年的老品牌,作者一直在更新,让lightbox变得更强大,今天分享的这款Lightbox2,是在lightbox的基础上修正与更新的,功能更强大,性能更优化。

jquery实例教程:如何使用jquery lightbox2

引入核心库文件

<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.min.js"></script>

引入CSS文件

<link href="css/lightbox.css" rel="stylesheet" />

请把下载文件包内的图片close.png, loading.gif, prev.png, 和next.png拷贝到img文件夹下,这是默认样式lightbox.css需要用到的,如果你不是放到img文件夹中,请修改lightbox.css内的图片路径。

接下来就是在你需要实现效果的图片a链接加上data-lightbox属性,便于激活lightbox效果。请用唯一值作为属性值,以便区别各图片,具体代码如下:

<a href="img/image-1.jpg" data-lightbox="image-1" data-title="My caption">Image #1</a>

如果你想显示标题,请加上data-title属性。

如果你有一组相关的图片,你想把它们合并为一组,那么请在所有图像a链接使用相同的data-lightbox属性值。代码如下:

<a href="img/image-2.jpg" data-lightbox="roadtrip">Image #2</a>
<a href="img/image-3.jpg" data-lightbox="roadtrip">Image #3</a>
<a href="img/image-4.jpg" data-lightbox="roadtrip">Image #4</a>

OK,就这么简单的完成了整个效果,无需写入JS代码,爽吧!

转载请注明:jQ酷 » 原版图片效果插件Jquery Lightbox2

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。