jQuery灯箱插件——Lightbox

发布时间:2014/6/10 标签: jQuery插件 分类:jQuery

做为一名前端开发人员,图片展示是经常遇到的问题!如何让图片直观,简单,漂亮的展现出来,一直是我所追求的!

今天为大家推荐一款历史悠久的灯箱jQuery插件——Lightbox.此框架已经8岁了,功能强大,易用!是我常用的jQuery插件之一。

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

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

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

在线DEMO

如何使用Lightbox

1.下载并引用jquery和lightbox插件

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

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

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

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

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

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

现代浏览器推荐

做为一名前端人员,您有责任且有义务让用户升级浏览器拥有完美的浏览体验,与国际接轨,同时让更多的前端人员不再苦逼! 本站将不再支持IE9以下的版本!

QQ交流群

学习使人进步,交流让人提高!

Bootstrap/HTML5/CSS3交流群:233808496

Orchard/Nopcommerce/Umbraco交流群:187502451

Bootstrap/HTML5/CSS3交流二群:385480040