Rebox - jquery全屏大图灯箱插件

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( ''+ ''+ ' ' );});使用模板可以显示图片,视频,或任何东西。 默认情况下,只有“图像”模板实现。首先,您需要添加一个模板类型。 每种类型是一个函数传递当前项需要(拇指图像)所示,当前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 $('').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 which contains an 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 $('').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' });

在线演示        积分下载        6毛下载        砍两刀下载