jQuery-Rebox是一个简单的、轻量级的、响应和移动友好的jQuery 灯箱插件。很简单,不需要任何图像。
创建一个单一的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 =默认情况下所有的“视频”。
使用这个函数模板的方法你能做你的文章创建工作的新内容。
$('#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: '←', // use an image, text, whatever for the previous button
next: '→', // use an image, text, whatever for the next button
loading: '%', // use an image, text, whatever for the loading notification
close: '×', // 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 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' });