×

Lightbox-展示完美图片的jQuery插件

作者:admin2014.07.04来源:Web前端之家浏览:4910评论:0
关键词:LightboxJQuery
微信公众号

微信公众号

在做产品图片展示的时候,我们经常会接到这样的需求:需要点击小图,弹出大图,并且大图还可以直接点击按钮进行前后切换。其实这样的效果很多插件都可以实现,今天主要是推荐一款常用且简单的,大伙且用收藏吧。

这款插件就是:Lightbox。据说出来已经8年左右了,功能强大,易用。

主要特点:开源简洁小巧,易用,支持响应式,动画效果也不错!

官网地址:http://lokeshdhakar.com/projects/lightbox2/

gitHub地址:https://github.com/lokesh/lightbox2

使用方法:

1. 下载并引用jquerylightbox插件:

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

  2. <script src="js/lightbox.min.js"></script>  

2. 引入插件所需的css样式:

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

3. 为你所需要展示的图片添加data-lightbox="roadtrip"属性:

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

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

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

注意:如果插件已经运行了,但不显示关闭,和下一页的按纽,请检查CSS和和图片的路径是否正确!

我们可以具体的demo:猛戳这里

总结:

Lightbox这款插件一直都很受欢迎,简单,易用,且功能又强大,个人很喜欢的一款插件,当然他是开源的,我们可以进行二次开发,如果您有什么好的方法,可以留言给我,谢谢!

温馨提示:本文作者系admin ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
http://jiangweishan.com/article/Lightbox.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 访客

    代码不可以用...

  • asidl

    这个DEMO应该再细点更好。。。...

  • 今天头条

    文章不错非常喜欢...

  • admin

    可以交换链接~...

  • 周松松博客

    确实不会用...

  • 便宜vps

    https://www.yd631.com/(便宜vps)申请交换链接,不知可否?联系邮箱:...

  • 访客

    我是里奥梅西,现在荒的一逼!!!...

  • qlong

    mailAutoComplete插件好用。...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2013-2018 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero