
Lightbox 2-一款很酷的图片弹出放大显示特效,这个效果在网站使用中是特别常用的也是产品放大显示的一个比较好的插件
使用方法:
1:单个图片屏幕前端放大显示,导入如下js
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
然后导入如下css文件
<link href="css/lightbox.css" rel="stylesheet" />
再找到如下图片:close.png, loading.gif, prev.png, next.png,这些图片是默认的效果图片
然后添加一个data-lightbox属性的图像链接激活data-lightbox。该属性的值,请使用一个唯一的名称为每个图像。例如:
<a href="img/image-1.jpg" data-lightbox="image-1" title="My caption">image #1</a>
可选:如果你要显示的标题可以设置title属性。
如果你有一组相关的图片,你想组合成一组,设置所有图像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>
这样就可以很好的使用这个效果了,如果还有什么不明白的可以留言给我