- 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);
}