支持触屏的jQuery响应式幻灯片展示插件Image Lightbox

来源：互联网发布：java json解析string 编辑：程序博客网时间：2024/05/01 07:41

支持触屏的jQuery响应式幻灯片展示插件Image Lightbox，非常不错的幻灯片图片展示插件，
支持移动端图片的展示，图片自适应任意大小的屏幕，轻量级插件只有4k，有很好插件可扩
展性和配置，兼容jQuery 1.x和2.x，提前预加载图片，使用了CSS3的转换和过渡，如果浏览器
不支持CSS3会自动切换left right 模式。

使用方法：

1.加载jQuery.js和imagelightbox.js

1<script src="jquery.js"></script>
2<script src="imagelightbox.js"></script>

2.加载CSS

1#imagelightbox
2{
3    position: fixed;
4    z-index: 9999;
5}

3.HTML内容

1<img src="picture.jpg" id="imagelightbox" />

4.函数调用

1<script>
2    $( function()
3    {
4        $( '#imagelightbox' ).imageLightbox();
5    });
6</script>

详细参数调用配置

view source
print?
01$('#imagelightbox').imageLightbox(
02{
03    selector:       'id="imagelightbox"',   // string;
04    allowedTypes:   'png|jpg|jpeg|gif',     // string;
05    animationSpeed: 250,                    // integer;
06    preloadNext:    true,                   // bool;            silently preload the next image
07    enableKeyboard: true,                   // bool;            enable keyboard shortcuts (arrows Left/Right and Esc)
08    quitOnEnd:      false,                  // bool;            quit after viewing the last image
09    quitOnImgClick: false,                  // bool;            quit when the viewed image is clicked
10    quitOnDocClick: true,                   // bool;            quit when anything but the viewed image is clicked
11    onStart:        false,                  // function/bool;   calls function when the lightbox starts
12    onEnd:          false,                  // function/bool;   calls function when the lightbox quits
13    onLoadStart:    false,                  // function/bool;   calls function when the image load begins
14    onLoadEnd:      false                   // function/bool;   calls function when the image finishes loading
15});

0 0