jquery灯箱插件Rebox

所属分类:UI-弹出层

 49084  316  查看评论 (5)
分享到微信朋友圈
X
jquery灯箱插件Rebox ie兼容8

例子

单一的初始化

创建一个单一的lightbox,分别在每个图片:

$('#gallery1 a').rebox();


画廊初始化

创建一个画廊风格lightbox:

$('#gallery2').rebox({ selector: 'a' });


动态添加图片后的事实

在页面交互可以添加到容器元素和新照片:

$('#gallery3').rebox({ selector: 'a' });
// don't worry about the following, it just injects a new img..
var counter = 0;
$('#gallery3Add').on('click', function(e){
    e.preventDefault();
    var images = ['a','b','c','d'],
        letter = images[counter++ % images.length];
    $('#gallery3').append(
        '<a href="media/sample_'+ letter +'.jpg" title="Image '+ letter +'">'+
            '<img src="media/sample_'+ letter +'_thumb.jpg" />'+
        '</a> '
        );
});

自定义内容

使用模板可以显示图片,视频,或任何东西。 默认情况下,只有“图像”模板实现。

首先,您需要添加一个模板类型。 每种类型是一个函数传递当前项需要(拇指图像)所示,当前Rebox设置,和一个回调时你必须调用创建新的jquery对象。 回调的范围必须是这个新元素。 如果你想立即回调执行只使用jquery's .each()。

接下来在您的画廊链接需要设置模板来使用与数据属性:data-rebox-template =默认情况下所有的“视频”。

使用这个函数模板的方法你能做你的文章创建工作的新内容。

/*
<div id="gallery4" class="gallery">
    <a href="media/sample_a.jpg" data-rebox-template="video" title="Caption for image A">
        <img src="media/sample_a_thumb.jpg" />
    </a>
</div>
*/
$('#gallery4 a').rebox({
    templates:{
        video: function($item, settings, callback){
            var url = $item.attr('href').replace(/\.\w+$/,'');
            return $('<video class="'+ settings.theme +'-content" controls preload="metadata" '+
                              'poster="'+url+'.jpg">'+
                        '<source src="'+url+'.webm" type="video/webm" />'+
                        '<source src="'+url+'.mp4" type="video/mp4" />'+
                        'Your browser does not support the HTML5 video tag'+
                    '</video>').on('loadeddata', callback);
        }
    }
});


事件的例子

点击画廊与您的控制台打开查看事件:

$('#gallery5').rebox({ selector: 'a' })
    .on('rebox:open', function(e, rx){ console.log(e.type, rx); })
    .on('rebox:close', function(e, rx){ console.log(e.type, rx); })
    .on('rebox:goto', function(e, rx, i, $item, $img){ console.log(e.type, rx, i, $item, $img); });

选项

{
    theme: 'rebox',        // class name parent gets (for your css)
    selector: null,        // the selector to delegate to, should be to the <a> which contains an <img>
    prev: '&larr;',        // use an image, text, whatever for the previous button
    next: '&rarr;',        // use an image, text, whatever for the next button
    loading: '%',          // use an image, text, whatever for the loading notification
    close: '&times;',      // use an image, text, whatever for the close button
    speed: 600,            // speed to fade in or out
    zIndex: 1000,          // zIndex to apply to the outer container
    cycle: true,           // whether to cycle through galleries or stop at ends
    captionAttr: 'title'   // name of the attribute to grab the caption from
    template: 'image',     // the default template to be used (see templates below)
    templates: {           // define templates to create the elements you need function($item, settings)
        image: function($item, settings, callback){ 
            return $('<img src="'+ $item.attr('href') +'" class="'+ s.theme +'-content" />').load(callback);
        }
    }
}

方法

//初始化一个rebox实例
$el.rebox({});
//启用rebox,一般你不必叫这个
//但是如果你想启用和禁用这可能是有用的
$el.rebox('enable');
//禁用rebox。你通常不需要这样
//但是如果你想启用和禁用这可能是有用的
$el.rebox('disable');
//进入下一个图像在队列中
$el.rebox('next');
//去prev形象在队列中
$el.rebox('prev');
//去一个特定的指数在队列中
$el.rebox('goto', 4);
//销毁rebox
$el.rebox('destroy');
//获取或设置一个选项。当价值提供了一组
//如果只有关键是检索的值将被提供
$el.rebox('option', key, value);
//如果一个对象是通过每个设置将被应用
$el.rebox('option', { speed: 500 });
//设置全局默认值
$.rebox.setDefaults({ theme: 'mytheme' });


事件

//控制时打开
$el.bind('rebox:open', function(e){});
//控制时关闭
$el.bind('rebox:close', function(e){});
//当控制改变形象,通过索引作为第二个参数
$el.bind('rebox:goto', function(e, i){});
//当控制是禁用的
$el.bind('rebox:disable', function(e){});
//当控制被摧毁
$el.bind('rebox:destroy', function(e){});


相关插件-弹出层

特别实用、调用简单的弹出层

特别实用、调用简单的弹出层。完全可以用样式控制,可以兼容的不同选择相应的效果
  弹出层
 40209  338

响应式模态框

简洁、弹出效果好的响应式模态框,适用移动端
  弹出层
 37332  436

表格鼠标移入同行同列变色(原创)

jQuery表格鼠标移入后同行同列变色
  弹出层
 27384  320

漂亮实用的提示框插件SweetAlert

漂亮实用的提示框插件SweetAlert
  弹出层
 64854  714

讨论这个项目(5)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    Regina_琳 0
    2018/5/10 22:10:27
    可以点击空白区域关闭吗? 回复
    SIN 0
    2017/4/19 17:14:19

    可以点击空白区域关闭吗?

    回复
    ⑤①⑥①①⑤⑧⑧⑦ 0
    2016/8/26 10:08:05

    弄了一个小时还弄不明白为什么会有  

    var $nav = $('.header ul'),
    $('pre.code').litelighter(); 
    $('.example-container > pre.ex').each(function(i){// eval($(this).data('llcode'));// });

    还好然后我直接删掉结构和对应的js代码,用

    $('#gallery2').rebox({ selector: 'a' });

    这个东西代替了,这目前看来也是个好插件吧,不知道图片有没有做自适应处理,还得测试

    回复
    心海 0
    2016/3/27 19:03:03
    滔滔 0
    2014/9/7 15:36:58
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复