jQuery img box

lightweight jQuery plugin to display images and html (lightbox alternative) includes:
  • custom animation effects
  • dynamic size
  • supports links to image and html files

Example:


Default:
image
error
image with title
Caption, fixed size and no close button:
image
error
imagen with title
Custom animation:
image
error
imagen with title
Custom animation 2:
image
error
imagen with title
div default

div animation

div html

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>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="box.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
	Defaul:<br>
	<a href="1.jpg" class="default">
		image
	</a><br>
	<a href="error.jpg" class="default">
		error
	</a><br>
	<a href="1.jpg" title="some title" class="default">
		image with title
	</a><br>
	
	Caption, fixed size and no close button:<br>
	<a href="1.jpg" class="caption">
		image
	</a><br>
	<a href="error.jpg" class="caption">
		error
	</a><br>
	<a href="1.jpg" title="some title" class="caption">
		imagen with title
	</a><br>
	
	Custom animation:<br>
	<a href="1.jpg" class="customAnimation">
		image
	</a><br>
	<a href="error.jpg" class="customAnimation">
		error
	</a><br>
	<a href="1.jpg" title="some title" class="customAnimation">
		imagen with title
	</a><br>
	
	Custom animation 2:<br>
	<a href="1.jpg" class="customAnimation2">
		image
	</a><br>
	<a href="error.jpg" class="customAnimation2">
		error
	</a><br>
	<a href="1.jpg" title="some title" class="customAnimation2">
		imagen with title
	</a><br>
	
	<div class="div1">
		div default
	</div><br>
	<div class="div2">
		div animation
	</div><br>
	<div class="div3">
		div html
	</div>
<script>
$(document).ready(function(){
	$(".default").click(function(e){
		e.preventDefault();
		$(this).box();
	});
	$(".caption").click(function(e){
		e.preventDefault();
		$(this).box({
			width:500,
			height:300,
			closebutton:false,
			caption:true
		});
	});
	$(".customAnimation").click(function(e){
		e.preventDefault();
		$(this).box({
			width:500,
			height:300,
			closebutton:true,
			caption:true,
			onStart:function(e){
				var defered=new $.Deferred();
				$(e.container).css({"display":"none"});
				$(e.overlay).css("opacity","0").animate({"opacity":"1"},300,function(){defered.resolve();});
				return defered.promise();
			},
			onLoad:function(e){
				$(e.container).css({"display":""});
				$(e.image).css({"width":"0px"}).animate({"width":"100%"},2000);
			},
			onClose:function(e){
				var defered=new $.Deferred();
				if(e.image){
					$(e.image).animate({"width":"0px"},2000,function(){
						$(e.overlay).stop().animate({"opacity":"0"},1000,function(){defered.resolve();});
					});
				}
				else{
					$(e.overlay).stop().animate({"opacity":"0"},1000,function(){defered.resolve();});
				}
				return defered.promise();
			}
		});
	});
	$(".customAnimation2").click(function(e){
		e.preventDefault();
		var ele=$(this);
		var x=ele.offset().left-$(window).scrollLeft(),y=ele.offset().top-$(window).scrollTop(),w=ele.width(),h=ele.height();
		ele.box({
			closebutton:true,
			caption:true,
			onStart:function(e){
				var defered=new $.Deferred();
				$(e.container).css({"opacity":"0"});
				$(e.overlay).css("opacity","0").animate({"opacity":"1"},1000,function(){defered.resolve();});
				return defered.promise();
			},
			onLoad:function(e){
				$(e.closebutton).css({"opacity":"0"});
				var x1=$(e.container).position().left,y1=$(e.container).position().top,w1=$(e.container).width(),h1=$(e.container).height();
				$(e.container).css({"opacity":"1","position":"absolute","left":x,"top":y,"width":w,"height":h})
								.animate({"left":x1,"top":y1,"width":w1,"height":h1},2000,function(){
									$(this).css({"position":"relative","left":"0"});
									$(e.closebutton).animate({"opacity":"1"},1000);
								});
			},
			onClose:function(e){
				var defered=new $.Deferred();
				if($(e.container).find(".close").is("span")){
					$(e.closebutton).animate({"opacity":"0"},1000);
				}
				if(e.image){
					$(e.image).animate({"width":"0px"},2000,function(){
						$(e.overlay).stop().animate({"opacity":"0"},1000,function(){defered.resolve();});
					});
				}
				else{
					$(e.overlay).stop().animate({"opacity":"0"},1000,function(){defered.resolve();});
				}
				return defered.promise();
			},
			onError:function(e){
				$(e.container).html("custom error<a href='#'>link</a>").css({"color":"#aa0000","display":"","opacity":"1"});
			}
		});
	});
	$(".div1").click(function(){
		$(this).box({
			ref:"1.jpg",
			title:"some title",
			caption:true
		});
	});
	$(".div2").click(function(){
		var ele=$(this);
		ele.box({
			ref:"1.jpg",
			title:"some title",
			caption:false,
			onStart:function(e){
				var defered=new $.Deferred();
				$(e.container).css({"opacity":"0"});
				$(e.overlay).css({"top":-$(e.overlay).height()}).animate({"top":$(window).scrollTop()},1000,function(){defered.resolve();});
				return defered.promise();
			},
			onLoad:function(e){
				$(e.closebutton).css({"opacity":"0"});
				$(e.title).css({"opacity":"0"});
				var x1=$(e.container).position().left,y1=$(e.container).position().top,w1=$(e.container).width(),h1=$(e.container).height();
				$(e.container).css({"opacity":"1","position":"absolute","top":-h1,"left":x1})
								.animate({"top":y1},2000,function(){
									$(this).css({"position":"relative","left":"0"});
									$(e.closebutton).animate({"opacity":"1"},1000);
									$(e.title).animate({"opacity":"1"},1000);
								});
			},
			onError:function(e){
				$(e.container).html("Error").addClass("error");
				$(e.container).css({"display":""});
				$(e.container).css({"opacity":"1"});
				var msgh=$(e.container).height()/2;
				$(e.container).css({"top":function(){return ($(window).height()/2)-msgh}});
				if(e.closebutton){
					var close=$("<span class='close'></span>");
					$(e.container).append(close);
					e.closebutton=close;
					close.click(function(){
						$(e.overlay).remove();
					});
				}
				$(window).resize(function(){
					$(e.container).css({"top":function(){return ($(window).height()/2)-msgh}});
				});
			},
			onClose:function(e){
				var defered=new $.Deferred();
				if(e.closebutton){
					$(e.closebutton).animate({"opacity":"0"},1000);
				}
				if(e.title){
					$(e.title).animate({"opacity":"0"},1000);
				}
				if(e.image){
					$(e.container).animate({"top":$(e.overlay).height()},2000,function(){
						$(e.overlay).stop().animate({"top":$(e.overlay).height()+$(window).scrollTop()},1000,function(){defered.resolve();});
					});
				}
				else{
					$(e.overlay).stop().animate({"opacity":"0"},1000,function(){defered.resolve();});
				}
				return defered.promise();
			}
		});
	});
	$(".div3").click(function(){
		$(this).box({
			ref:"1.html",
			title:"some title",
			caption:true,
			type:"html",
			onStart:function(e){
				var defered=new $.Deferred();
				$(e.container).css({"width":"70%","height":"100%","background":"#ffffff","color":"#000000","opacity":"0","position":"relative","word-break": "break-all","text-align":"center"});
				$(e.overlay).css("opacity","0").animate({"opacity":"1"},3000,function(){defered.resolve();});
				return defered.promise();
			},
			onLoad:function(e){
				$(e.container).animate({"opacity":"1"},3000);
				$(e.title).removeClass("caption").css({"position":"absolute","bottom":"0px","left":"0px"});
			}
		});
	});
});
</script>
</body>
</html>

box.js
$.fn.box=function(method){
	var defaults={
		width:0,
		height:0,
		ref:false,
		title:false,
		closebutton:true,
		type:"img",
		caption:false,
		onStart:false,
		onLoad:false,
		onClose:false,
		onError:false
	}
	var methods={
		init:function(opt){
			opt=$.extend({},defaults,opt||{});
			return this.each(function(){
				var el=this;
				opt.ref=$(el).attr("href")||opt.ref;
				opt.title=$(el).attr("title")||opt.title;
				var win=$(window),loading=$("<div class='loading'>"),overlay=$("<div class='box'>"),image=$(Image()),container=$("<div class='boxcontent'>"),close=$("<span class='close'>"),title=$("<p class='caption'>"+opt.title+"</p>");
				el.box=opt;
				if($("body").css("overflow")==""){
					if($("body").css("overflow-x")!=""){
						el.overflowx=$("body").css("overflow-x");
					}
					if($("body").css("overflow-y")!=""){
						el.overflowy=$("body").css("overflow-y");
					}
				}
				else{
					el.overflow=$("body").css("overflow");
				}
				$("body").append(overlay).css({"overflow":"hidden"});
				overlay.css({"top":win.scrollTop(),"left":win.scrollLeft()});
				overlay.click(function(){
					$(el).box("close");
				});
				el.box.overlay=overlay;
				overlay.append(loading);
				loading.css({"display":"block","position":"absolute","left":(win.width()/2)-(loading.width()/2),"top":(win.height()/2)-(loading.height()/2)});
				loading.click(function(e){
					e.stopPropagation();
				});
				win.resize(function(){
					loading.css({"left":(win.width()/2)-(loading.width()/2),"top":(win.height()/2)-(loading.height()/2)});
				});
				el.box.loading=loading;
				overlay.append(container);
				container.click(function(e){
					e.stopPropagation();
				});
				el.box.container=container;
				if($.isFunction(opt.onStart)){
					var defered=opt.onStart(el.box);
				}
				if(opt.type=="img"){
					image.load(function(){
						loading.fadeOut("fast",function(){$(this).remove();});
						container.append(image); 
						el.box.image=image;
						if(opt.closebutton){
							container.append(close);
							el.box.closebutton=close;
							close.click(function(){
								$(el).box("close");
							});
						}
						if(opt.caption&&opt.title){
							container.append(title);
							el.box.title=title;
						}
						var mheight=win.height()/2;
						if(el.box.width==0&&el.box.height==0){
							el.box.width=this.width;
							el.box.height=this.height;
							if(win.width()win.height()){
									container.css({"height":"90%","top":function(){return mheight-(container.height()/2)}});
									image.css({"height":"100%","width":"auto"});
									container.css({"width":image.width()});
								}
							}
							else if(win.height()win.width()){
									container.css({"width":"90%","height":"auto"});
									image.css({"width":"100%","height":"auto"});
									container.css({"top":function(){return mheight-(container.height()/2)}});
								}
							}
							else{
								container.css({"width":el.box.width,"height":el.box.height,"top":function(){return mheight-(el.box.height/2)}});
								image.css({"width":"100%","height":"100%"});

							}
							win.resize(function(){
								mheight=win.height()/2;
								if(win.width()win.height()){
										container.css({"height":"90%","top":function(){return mheight-(container.height()/2)}});
										image.css({"height":"100%","width":"auto"});
										container.css({"width":image.width()});
									}
								}
								else if(win.height()win.width()){
										container.css({"width":"90%","height":"auto"});
										image.css({"width":"100%","height":"auto"});
										container.css({"top":function(){return mheight-(container.height()/2)}});
									}
								}
								else{
									container.css({"width":el.box.width,"height":"auto","top":function(){return mheight-(el.box.height/2)}});
								}
							});
						}
						else{
							image.css({"width":function(){if(el.box.width!=0)return el.box.width; else return "auto"},"height":function(){if(el.box.height!=0)return el.box.height; else return "auto"}});
							container.css({"width":image.width(),"height":image.height()});
							overlay.css({"overflow":"auto"});
							if(container.height()>win.height()){
								container.css({"top":"0px"});
							}
							else{
								container.css({"top":function(){return mheight-(container.height()/2)}});
							}
						}
						if(defered&&defered.promise){
							defered.done(function(){
								if($.isFunction(opt.onLoad)){
									opt.onLoad(el.box);
								}
							});
						}
						else{
							if($.isFunction(opt.onLoad)){
								opt.onLoad(el.box);
							}
						}
						
					}).attr({
						src: opt.ref
					}).error(function(){
						loading.fadeOut("fast",function(){$(this).remove();});
						if($.isFunction(el.box.onError)){
							el.box.onError(el.box);
						}
						else{
							container.html("Error").addClass("error");
							container.css({"display":""});
							var msgh=$(this).height()/2;
							container.css({"top":function(){return (win.height()/2)-msgh}});
							if(opt.closebutton){
								container.append(close);
								el.box.closebutton=close;
								close.click(function(){
									$(el).box("close");
								});
							}
							win.resize(function(){
								container.css({"top":function(){return (win.height()/2)-msgh}});
							});
						}
					});
				}
				else if(opt.type="html"){
					if(opt.closebutton){
						container.append(close);
						el.box.closebutton=close;
						close.click(function(){
							$(el).box("close");
						});
					}
					var wrap=$("<span>");
					container.append(wrap);
					wrap.load(opt.ref, function(response, status, xhr) {
						loading.fadeOut("fast",function(){$(this).remove();});
						if (status == "error") {							
							var msg = "Sorry but there was an error: ";
							wrap.html(msg + xhr.status + " " + xhr.statusText);
						}
						if(defered&&defered.promise){
							defered.done(function(){
								if($.isFunction(opt.onLoad)){
									opt.onLoad(el.box);
								}
							});
						}
						else{
							if($.isFunction(opt.onLoad)){
								opt.onLoad(el.box);
							}
						}
					});
					if(opt.caption&&opt.title){
						container.append(title);
						el.box.title=title;
					}
				}
			});
		},
		close:function(){
			return this.each(function(){
				var el=this;
				if($.isFunction(el.box.onClose)){
					var defered=el.box.onClose(el.box);
					if(defered&&defered.promise){
						defered.done(function(){
							if(el.overflow){
								$("body").css({"overflow":el.overflow});
							}
							else{
								$("body").css({"overflow-x":el.overflowx,"overflow-y":el.overflowy});
							}
							el.box.overlay.remove();
						});
					}
					else{
						$("body").css({"overflow":"auto"});
						el.box.overlay.remove();
					}
				}
				else{
					if(el.overflow){
						$("body").css({"overflow":el.overflow});
					}
					else{
						$("body").css({"overflow-x":el.overflowx,"overflow-y":el.overflowy});
					}
					el.box.overlay.remove();
				}
			});
		}
	};
	if(methods[method]){
		return methods[method].apply(this,Array.prototype.slice.call(arguments,1));
	}else if(typeof method==='object'||!method){
		return methods.init.apply(this,arguments);
	}else{
		$.error('Method '+method+' does not exist on jQuery.box');
	}
};

style.css
.div1{
	background: none repeat scroll 0 0 #0055F0;
	border: 3px solid #0022FF;
	border-radius: 5px 5px 5px 5px;
	color: #FFFFFF;
	display: block;
	font-weight: bolder;
	padding: 15px;
	text-align: center;
	width: 100px;
}
.div2{
	background: none repeat scroll 0 0 #0055F0;
	border: 3px solid #0022FF;
	border-radius: 5px 5px 5px 5px;
	color: #FFFFFF;
	display: block;
	font-weight: bolder;
	padding: 15px;
	text-align: center;
	width: 100px;
}
.div3{
        width:100px;
	padding:15px;
	background:#aa0000;
	display:block;
	border:3px solid #550000;
	border-radius:5px;
	text-align:center;
	color:#ffffff;
	font-weight:bolder;
}
.box{
	background: url("bg.png");
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	padding:0;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}
.box .caption{
	position:relative;
	top:-15px;
}
.box .boxcontent{
	position:relative;
	margin:0 auto;
	color:#ffffff;
	font-weight:bolder;
	font-size:22px;
	text-align: center;
	text-shadow: 1px 1px 2px #000000;
	-moz-user-select: text;
	-khtml-user-select: text;
	-webkit-user-select: text;
	user-select: text;
}
.box .loading{
	position:relative;
	margin:0 auto;
	background:url("loader.gif");
	width:16px;
	height:16px;
	display:block;
}
.box .boxcontent img{
	-moz-box-shadow: 1px 7px 7px rgba(0, 0, 0, 0.7);
	-webkit-box-shadow: 1px 7px 7px rgba(0, 0, 0, 0.7);
	box-shadow: 1px 7px 7px rgba(0, 0, 0, 0.7);
}
.box .error{
	background:#ffffff;
	color:#000000;
	padding:10px;
	width:200px;
	text-shadow:0px 0px 0px;
	-moz-box-shadow: 1px 7px 7px rgba(0, 0, 0, 0.7);
	-webkit-box-shadow: 1px 7px 7px rgba(0, 0, 0, 0.7);
	box-shadow: 1px 7px 7px rgba(0, 0, 0, 0.7);
}
.box .boxcontent .close{
	position:absolute;
	right:-10px;
	top:-10px;
	width:20px;
	height:20px;
	background:url("close.png");
	cursor:pointer;
	-moz-box-shadow: 1px 2px 7px rgba(0, 0, 0, 0.7);
	-webkit-box-shadow: 1px 2px 7px rgba(0, 0, 0, 0.7);
	box-shadow: 1px 2px 7px rgba(0, 0, 0, 0.7);
}
Etiquetas:

0 Comments

Fb Comments




Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)
footer