lightbox 应该是最流行的图片浏览效果了,常具有功能包括:自动根据窗口的大小缩放图片,模式窗口,幻灯片方式播放,内容预加载,渐变等效果。现在跟大家分享的是lightBox2.6的最新版本,以前的版本都要写下面这种调用代码,现在的的2.6版本可以不用再写调用代码直接添加相应的标签属性即可使用,大大提高了这个使用性。
$(function() {
$('#gallery a').lightBox({fixedNavigation:true});
});
功能使用说明:
lightbox的主要功能是由于显示单张放大显示图片与多张图片组的展示。
1.引入CSS与JS文件
<link rel="stylesheet" href="css/lightbox.css" media="screen"/>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
2.内容添加
<a href="img/demopage/image-3.jpg" data-lightbox="example-set" title="文字说明信息">
<img class="example-image" src="img/demopage/thumb-3.jpg" width="150" height="150"/></a>
data-lightbox就是我们要设置的属性,可以肯定自己的需要进行命名,如果要实现图片相册上一张与下一张的功能就把它的名字都写在相同的,lightbox插件会自动识别进行归类。
lightbox老版本:http://leandrovieira.com/projects/jquery/lightbox/