轻量级响应式jQuery图片灯箱插件jQuery-Rebox
jQuery-Rebox是一个简单的、轻量级的、响应和移动友好的jQuery 灯箱插件。
演示:http://www.jq22.com/Demo511
下载:http://pan.baidu.com/s/1pJBjNxL
例子
单一的初始化
创建一个单一的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: '←', // 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 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){});
原文:http://www.jq22.com/jquery-info511