lightbox相册插件jquery-rebox js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 lightbox相册插件jquery-rebox js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>lightbox�����jquery-rebox</title>
<link rel="stylesheet" href="css/jquery-rebox.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery-rebox.js"></script>
<style>
.gallery {
	width:640px;
	margin:0 auto;
}
</style>
</head>
<body>
<!-- ���� ��ʼ -->
<div id="gallery2" class="gallery">
	<a href="images/sample_a.jpg" title="Caption for image A"><img src="images/sample_a_thumb.jpg"></a>
	<a href="images/sample_b.jpg" title="Caption for image B"><img src="images/sample_b_thumb.jpg"></a>
	<a href="images/sample_c.jpg" title="Caption for image C"><img src="images/sample_c_thumb.jpg"></a>
	<a href="images/sample_d.jpg" title="Caption for image D"><img src="images/sample_d_thumb.jpg"></a>
</div>
<script>
$('#gallery2').rebox({ selector:'a' });
</script>
<!-- ���� ���� -->
</body>
</html>

JS代码(jquery-rebox.js):

/* * jQuery Rebox [http://trentrichardson.com/examples/jQuery-Rebox] * By:Trent Richardson [http://trentrichardson.com] * * Copyright 2014 Trent Richardson * Dual licensed under the MIT license. * http://trentrichardson.com/Impromptu/MIT-LICENSE.txt */
(function($){
	$.rebox = function($this,options){
	this.settings = $.extend(true,{
}
,$.rebox.defaults,options);
	this.$el = $this;
	// parent container holding itemsthis.$box = null;
	// the lightbox modalthis.$items = null;
	// recomputed each time its openedthis.idx = 0;
	// of the $items which index are we onthis.enable();
}
;
	$.rebox.defaults ={
	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 buttonnext:'&rarr;
	',// use an image,text,whatever for the next buttonloading:'%',// use an image,text,whatever for the loading notificationclose:'&times;
	',// use an image,text,whatever for the close buttonspeed:400,// speed to fade in or outzIndex:1000,// zIndex to apply to the outer containercycle:true,// whether to cycle through galleries or stop at endscaptionAttr:'title',// name of the attribute to grab the caption fromtemplate:'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="'+ settings.theme +'-content" />').load(callback);
}
}
}
;
	$.rebox.setDefaults = function(options){
	$.rebox.defaults = $.extend(true,{
}
,$.rebox.defaults,options);
}
;
	$.rebox.lookup ={
	i:0}
;
	$.extend($.rebox.prototype,{
	enable:function(){
	var t = this;
	return t.$el.on('click.rebox',t.settings.selector,function(e){
	e.preventDefault();
	t.open(this);
}
);
}
,open:function(i){
	var t = this;
	// figure out where to startt.$items = t.settings.selector === null? t.$el:t.$el.find(t.settings.selector);
	if(isNaN(i)){
	i = t.$items.index(i);
}
// build the reboxt.$box = $('<div class="'+ t.settings.theme +'" style="display:none;
	">'+'<a href="#" class="'+ t.settings.theme +'-close '+ t.settings.theme +'-button">'+ t.settings.close +'</a>' +'<a href="#" class="'+ t.settings.theme +'-prev '+ t.settings.theme +'-button">'+ t.settings.prev +'</a>' +'<a href="#" class="'+ t.settings.theme +'-next '+ t.settings.theme +'-button">'+ t.settings.next +'</a>' +'<div class="'+ t.settings.theme +'-contents"></div>'+'<div class="'+ t.settings.theme +'-caption"><p></p></div>' +'</div>').appendTo('body').css('zIndex',t.settings.zIndex).fadeIn(t.settings.speed).on('click.rebox','.'+t.settings.theme +'-close',function(e){
	e.preventDefault();
	t.close();
}
).on('click.rebox','.'+t.settings.theme +'-next',function(e){
	e.preventDefault();
	t.next();
}
).on('click.rebox','.'+t.settings.theme +'-prev',function(e){
	e.preventDefault();
	t.prev();
}
);
	// add some key hooks$(document).on('swipeLeft.rebox',function(e){
	t.next();
}
).on('swipeRight.rebox',function(e){
	t.prev();
}
).on('keydown.rebox',function(e){
	e.preventDefault();
	var key = (window.event) ? event.keyCode:e.keyCode;
	switch(key){
	case 27:t.close();
	break;
	// escape key closescase 37:t.prev();
	break;
	// left arrow to prevcase 39:t.next();
	break;
	// right arrow to next}
}
);
	t.$el.trigger('rebox:open',[t]);
	t.goto(i);
	return t.$el;
}
,close:function(){
	var t = this;
	if(t.$box && t.$box.length){
	t.$box.fadeOut(t.settings.speed,function(e){
	t.$box.remove();
	t.$box = null;
	t.$el.trigger('rebox:close',[t]);
}
);
}
$(document).off('.rebox');
	return t.$el;
}
,goto:function(i){
	var t = this,$item = $(t.$items[i]),captionVal = $item.attr(t.settings.captionAttr),$cap = t.$box.children('.'+ t.settings.theme +'-caption')[captionVal?'show':'hide']().children('p').text(captionVal),$bi = t.$box.children('.'+ t.settings.theme +'-contents'),$img = null;
	if($item.length){
	t.idx = i;
	$bi.html('<div class="'+ t.settings.theme +'-loading '+ t.settings.theme +'-button">'+ t.settings.loading +'</div>');
	$img = t.settings.templates[$item.data('rebox-template') || t.settings.template]($item,t.settings,function(content){
	$bi.empty().append($(this));
}
);
	if(t.$items.length == 1 || !t.settings.cycle){
	t.$box.children('.'+ t.settings.theme +'-prev')[i<=0 ? 'hide':'show']();
	t.$box.children('.'+ t.settings.theme +'-next')[i>=t.$items.length-1 ? 'hide':'show']();
}
t.$el.trigger('rebox:goto',[t,i,$item,$img]);
}
return t.$el;
}
,prev:function(){
	var t = this;
	return t.goto(t.idx===0? t.$items.length-1:t.idx-1);
}
,next:function(){
	var t = this;
	return t.goto(t.idx===t.$items.length-1? 0:t.idx+1);
}
,disable:function(){
	var t = this;
	return t.close().off('.rebox').trigger('rebox:disable',[t]);
}
,destroy:function(){
	var t = this;
	return t.disable().removeData('rebox').trigger('rebox:destroy');
}
,option:function(key,val){
	var t = this;
	if(val !== undefined){
	t.settings[key] = val;
	return t.disable().enable();
}
return t.settings[key];
}
}
);
	$.fn.rebox = function(o){
	o = o ||{
}
;
	var tmp_args = Array.prototype.slice.call(arguments);
	if (typeof(o) == 'string'){
	if(o == 'option' && typeof(tmp_args[1]) == 'string' && tmp_args.length === 2){
	var inst = $.rebox.lookup[$(this).data('rebox')];
	return inst[o].apply(inst,tmp_args.slice(1));
}
else return this.each(function(){
	var inst = $.rebox.lookup[$(this).data('rebox')];
	inst[o].apply(inst,tmp_args.slice(1));
}
);
}
else return this.each(function(){
	var $t = $(this);
	$.rebox.lookup[++$.rebox.lookup.i] = new $.rebox($t,o);
	$t.data('rebox',$.rebox.lookup.i);
}
);
}
;
}
)(window.jQuery || window.Zepto || window.$);

CSS代码(jquery-rebox.css):

.rebox{cursor:pointer;position:fixed;width:100%;height:100%;top:0;left:0;z-index:1000;-webkit-filter:none !important;background:rgb(0,0,0);/* IE Fallback (Solid Colour) */
 background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAIElEQVQ4T2NkYGDYDMRkA8ZRAxhGw4BhNAyA+WAYpAMAIFgLQfO9BoEAAAAASUVORK5CYII=);background:rgba(0,0,0,0.7);}
.rebox *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0;}
.rebox-contents{position:absolute;top:5%;left:5%;text-align:center;width:90%;height:90%;}
.rebox-contents .rebox-content{border:5px solid #fff;box-shadow:0 0 20px #000;border-radius:1px;max-width:100%;max-height:100%;}
.rebox-loading{width:31px;height:31px;margin:-16px 0 0 -16px;position:absolute;top:48%;left:50%;}
.rebox-caption{display:none;position:absolute;left:0;bottom:0;width:100%;text-align:center;z-index:1000;background:#000;background:rgba(0,0,0,0.7);}
.rebox-caption p{margin:0 auto;max-width:70%;display:inline-block;*display:inline;*zoom:1;padding:10px;color:#fff;font-size:12px;line-height:18px;}
.rebox-button{position:absolute;z-index:9999;min-width:40px;height:40px;line-height:40px;background:rgb(0,0,0);opacity:0.4;text-decoration:none;font-size:24px;color:#fff;text-align:center;vertical-align:middle;-webkit-border-radius:32px;-moz-border-radius:32px;-ms-border-radius:32px;border-radius:32px;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;}
.rebox-button:hover,.rebox-button:focus{opacity:1;-webkit-transform:scale(1.4);-moz-transform:scale(1.4);-ms-transform:scale(1.4);transform:scale(1.4);}
.rebox-close{right:10px;top:10px;}
.rebox-next{right:10px;top:48%;}
.rebox-prev{left:10px;top:48%;}
.rebox-loading{left:50%;top:48%;-webkit-animation-name:spin;-webkit-animation-duration:2000ms;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-moz-animation-name:spin;-moz-animation-duration:2000ms;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear;-ms-animation-name:spin;-ms-animation-duration:2000ms;-ms-animation-iteration-count:infinite;-ms-animation-timing-function:linear;animation-name:spin;animation-duration:2000ms;animation-iteration-count:infinite;animation-timing-function:linear;}
@-ms-keyframes spin{from{-ms-transform:rotate(0deg);}
to{-ms-transform:rotate(360deg);}
}
@-moz-keyframes spin{from{-moz-transform:rotate(0deg);}
to{-moz-transform:rotate(360deg);}
}
@-webkit-keyframes spin{from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(360deg);}
}
@keyframes spin{from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}

附件:下载该文件资源,减少时间成本(增值服务)