instead of animating the gallery with "spacegallery: 20", animates each image to the next position stored in an array.
the user can change the perspective on the X axis and the autoplay direction.
the border property is only needed on css.
Options:
perspective:140, //Perspective height
minScale:0.2, //Minimum scale
duration:800, //Animation duration
loadingClass:null, //CSS class of the element while loading
imageWidth:200, //Max width of the images
scroll:false, //Control gallery on mousewheel
buttons:false, //Next,Prev,Play buttons
direct:false, //Control gallery on image click
before: function(){return false},//Callback before
after: function(){return false},//Callback after
play:false, //Autoplay
pause:5000, //Autoplay pause
alpha:false //opacity of the images
direction:"forward", //Autoplay direction
perspectivex:0 //X axis perspective
Example:
$("#mygallery").spacegallery({
imageWidth:240,
scroll:true,
buttons:true,
direct:true,
play:true,
alpha:true,
duration:1000,
direction:"backward",
perspectivex:-140,
loadingClass:"loading"
});
$("#mygallery").spacegallery({
imageWidth:300,
scroll:false,
buttons:false,
direct:true,
play:false,
alpha:false,
duration:2000,
perspectivex:0,
loadingClass:"loading"
});
/**
*
* Spacegallery
* Author: Stefan Petre www.eyecon.ro
*
*/
$.fn.spacegallery=function(method){
var defaults={
perspective:140,
minScale:0.2,
duration:800,
loadingClass:null,
imageWidth:200,
scroll:false,
buttons:false,
direct:false,
before: function(){return false},
after: function(){return false},
play:false,
pause:5000,
alpha:false,
direction:"forward",
perspectivex:0
};
var methods={
init:function(opt){
opt.imageWidth=opt.imageWidth||$(this).width();
opt=$.extend({},defaults,opt||{});
return this.each(function(){
var el=this;
el.spacegalleryCfg=opt;
$(el).addClass(el.spacegalleryCfg.loadingClass);
el.spacegalleryCfg.imgs=$(el).find("img");
el.spacegalleryCfg.images=el.spacegalleryCfg.imgs.length;
el.spacegalleryCfg.loaded=0;
el.spacegalleryCfg.asin=Math.asin(1);
el.spacegalleryCfg.asins={};
el.spacegalleryCfg.tops={};
el.spacegalleryCfg.lefts={};
el.spacegalleryCfg.increment=parseInt(el.spacegalleryCfg.perspective/el.spacegalleryCfg.images);
el.spacegalleryCfg.incrementx=el.spacegalleryCfg.perspectivex/el.spacegalleryCfg.images;
var left=el.spacegalleryCfg.perspectivex;
var top=0;
el.spacegalleryCfg.dif=(el.spacegalleryCfg.imageWidth-el.spacegalleryCfg.imageWidth*el.spacegalleryCfg.minScale);
el.spacegalleryCfg.imgs.each(function(index){
var imgEl=new Image();
imgEl.src=this.src;
this.spacegallery={};
el.spacegalleryCfg.asins[index]=1-Math.asin((index+1)/el.spacegalleryCfg.images)/el.spacegalleryCfg.asin;
top+=parseInt(el.spacegalleryCfg.increment-el.spacegalleryCfg.increment*el.spacegalleryCfg.asins[index]);
this.spacegallery.width=parseInt(el.spacegalleryCfg.imageWidth-el.spacegalleryCfg.dif*el.spacegalleryCfg.asins[index]);
left-=el.spacegalleryCfg.incrementx;
if(el.spacegalleryCfg.perspectivex>0){
el.spacegalleryCfg.lefts[index]=parseInt(((el.spacegalleryCfg.imageWidth-this.spacegallery.width)))+left;
}
else if(el.spacegalleryCfg.perspectivex<0){
el.spacegalleryCfg.lefts[index]=parseInt(((el.spacegalleryCfg.imageWidth-el.spacegalleryCfg.imageWidth))/2)+left;
}
else{
el.spacegalleryCfg.lefts[index]=parseInt(((el.spacegalleryCfg.imageWidth-this.spacegallery.width))/2);
}
el.spacegalleryCfg.tops[index]=top;
$(this).width(el.spacegalleryCfg.imageWidth).css({"position":"absolute"});
if (imgEl.complete) {
el.spacegalleryCfg.loaded++;
if (el.spacegalleryCfg.loaded == el.spacegalleryCfg.images){
$(el).spacegallery("positionImages");
}
}
else {
imgEl.onload=function(){
el.spacegalleryCfg.loaded++;
if (el.spacegalleryCfg.loaded == el.spacegalleryCfg.images) {
$(el).spacegallery("positionImages");
}
}
}
});
el.spacegalleryCfg.asins[el.spacegalleryCfg.images]=el.spacegalleryCfg.asins[0]*.7;
el.spacegalleryCfg.tops[el.spacegalleryCfg.images]=parseInt(el.spacegalleryCfg.tops[0]*.7);
el.spacegalleryCfg.asins[el.spacegalleryCfg.images+1]=el.spacegalleryCfg.asins[el.spacegalleryCfg.images-1]*1.3;
el.spacegalleryCfg.tops[el.spacegalleryCfg.images+1]=parseInt(el.spacegalleryCfg.tops[el.spacegalleryCfg.images-1]*1.3);
if(el.spacegalleryCfg.scroll==true){
$(el).bind((/Firefox/i.test(navigator.userAgent))?"DOMMouseScroll":"mousewheel",function(e){
var evt=window.event||e;
evt=evt.originalEvent?evt.originalEvent:evt;
var delta=evt.detail?evt.detail*(-40):evt.wheelDelta;
if(el.spacegalleryCfg.interval){
el.spacegalleryCfg.interval=clearInterval(el.spacegalleryCfg.interval);
}
if(delta > 0) {
$(el).spacegallery("prev");
}
else{
$(el).spacegallery("next");
}
});
}
if(el.spacegalleryCfg.buttons==true){
$(el).append("<div class='prev'></div>").append("<div class='next'></div>").append("<div class='play'></div>");
$(el).find(".prev").bind("click",function(){
if(el.spacegalleryCfg.interval){
el.spacegalleryCfg.interval=clearInterval(el.spacegalleryCfg.interval);
}
$(el).spacegallery("prev");
});
$(el).find(".next").bind("click",function(){
if(el.spacegalleryCfg.interval){
el.spacegalleryCfg.interval=clearInterval(el.spacegalleryCfg.interval);
}
$(el).spacegallery("next");
});
$(el).find(".play").bind("click",function(){
$(el).spacegallery("play");
});
if(el.spacegalleryCfg.play==false){
$(el).find(".play").addClass("pause");
}
}
if(el.spacegalleryCfg.loaded==el.spacegalleryCfg.images){
$(el).spacegallery("positionImages");
if(el.spacegalleryCfg.play==true){
el.spacegalleryCfg.interval=setInterval(function(){
if(el.spacegalleryCfg.direction=="backward"){
$(el).spacegallery("prev");
}
else{
$(el).spacegallery("next");
}
}, el.spacegalleryCfg.pause);
}
}
});
},
positionImages:function(){
return this.each(function(){
var el=this;
el.spacegalleryCfg.animated=false;
$(el).find("img").removeAttr('height').each(function(index){
this.spacegallery.width=parseInt(el.spacegalleryCfg.imageWidth-el.spacegalleryCfg.dif*el.spacegalleryCfg.asins[index]);
$(this).css({
"opacity":function(){
if(el.spacegalleryCfg.alpha==true){
return 1 - el.spacegalleryCfg.asins[index];
}
else{
return 1;
}
},
"width":this.spacegallery.width,
"top":el.spacegalleryCfg.tops[index],
"margin-left":el.spacegalleryCfg.lefts[index]
});
if(el.spacegalleryCfg.direct==true){
$(this).off('click').click(function(){
clearInterval(el.spacegalleryCfg.interval);
$(el).spacegallery("to",index);
});
}
if(index!=0){
this.spacegallery.prev=el.spacegalleryCfg.asins[index-1];
this.spacegallery.prevTop=el.spacegalleryCfg.tops[index-1];
this.spacegallery.prevleft=el.spacegalleryCfg.lefts[index-1];
}
else{
this.spacegallery.prev=el.spacegalleryCfg.asins[el.spacegalleryCfg.images];
this.spacegallery.prevTop=el.spacegalleryCfg.tops[el.spacegalleryCfg.images];
this.spacegallery.prevleft=el.spacegalleryCfg.lefts[el.spacegalleryCfg.images-1];
}
if(index==el.spacegalleryCfg.images-1){
this.spacegallery.next=el.spacegalleryCfg.asins[el.spacegalleryCfg.images+1];
this.spacegallery.nextTop=el.spacegalleryCfg.tops[el.spacegalleryCfg.images+1];
this.spacegallery.nextleft=el.spacegalleryCfg.lefts[0];
}
else{
this.spacegallery.next=el.spacegalleryCfg.asins[index+1];
this.spacegallery.nextTop=el.spacegalleryCfg.tops[index+1];
this.spacegallery.nextleft=el.spacegalleryCfg.lefts[index+1];
}
this.spacegallery.origTop=el.spacegalleryCfg.tops[index];
this.spacegallery.increment=el.spacegalleryCfg.asins[index]-this.spacegallery.next;
this.spacegallery.nextwidth=el.spacegalleryCfg.imageWidth-el.spacegalleryCfg.dif*this.spacegallery.next;
this.spacegallery.prevwidth=el.spacegalleryCfg.imageWidth-el.spacegalleryCfg.dif*this.spacegallery.prev;
});
$(el).removeClass(el.spacegalleryCfg.loadingClass);
});
},
next:function(num){
return this.each(function(){
var el=this;
if(el.spacegalleryCfg.animated==false){
el.spacegalleryCfg.animated=true;
el.spacegalleryCfg.before.apply();
var c=0;
$(el).find('img').each(function(nr){
var newWidth=this.spacegallery.nextwidth;
var newLeft=this.spacegallery.nextleft;
var opacity=1;
if(el.spacegalleryCfg.alpha==true){
opacity=1-this.spacegallery.next;
}
if(nr==el.spacegalleryCfg.images-1){
newWidth=this.spacegallery.width*this.spacegallery.nextTop/this.spacegallery.origTop;
opacity=0;
newLeft=-((newWidth-this.spacegallery.width)/2);
newLeft=newLeft-el.spacegalleryCfg.incrementx*2;
}
$(this).stop(true).animate({
"top":this.spacegallery.nextTop,
"width":parseInt(newWidth),
"margin-left":newLeft,
"opacity":opacity
},
el.spacegalleryCfg.duration,
function(){
c++;
if(c==el.spacegalleryCfg.images){
var last=$(el).find('img:last');
$(last).prependTo(el);
if(el.spacegalleryCfg.alpha==true){
$(last).animate({"opacity":1-el.spacegalleryCfg.asins[0]});
}
else{
$(last).animate({"opacity":1});
}
$(el).spacegallery("positionImages");
$(last).css({"opacity":0});
el.spacegalleryCfg.after.apply();
if(num>1){
num--;
$(el).spacegallery("next",num);
}
else if((el.spacegalleryCfg.play==true&&num==1)||(el.spacegalleryCfg.play==true&&!num&&!el.spacegalleryCfg.interval)){
el.spacegalleryCfg.interval=setInterval(function(){
if(el.spacegalleryCfg.direction=="backward"){
$(el).spacegallery("prev");
}
else{
$(el).spacegallery("next");
}
},el.spacegalleryCfg.pause);
}
}
}
);
});
}
});
},
prev:function(num){
return this.each(function(){
var el=this;
if(el.spacegalleryCfg.animated==false){
el.spacegalleryCfg.animated=true;
el.spacegalleryCfg.before.apply();
var c=0;
$(el).find('img').each(function(nr){
var newWidth = this.spacegallery.prevwidth;
var opacity=1;
var newLeft=this.spacegallery.prevleft;
if(el.spacegalleryCfg.alpha==true){
opacity=1-this.spacegallery.prev;
}
if(nr==0){
newWidth=this.spacegallery.width*this.spacegallery.prevTop/this.spacegallery.origTop;
opacity=0;
newLeft=((el.spacegalleryCfg.imageWidth-newWidth)/2);
newLeft=newLeft+el.spacegalleryCfg.perspectivex*1.8;
}
$(this).stop(true).animate({
"top":this.spacegallery.prevTop,
"width":parseInt(newWidth),
"margin-left":newLeft,
"opacity":opacity
},
el.spacegalleryCfg.duration,
function(){
c++;
if(c==el.spacegalleryCfg.images){
$(el).find('img:first').appendTo(el).css({"opacity":0,"margin-left":0}).animate({"opacity":1});
$(el).spacegallery("positionImages");
el.spacegalleryCfg.after.apply();
if(num>1){
num--;
$(el).spacegallery("prev",num);
}
else if((el.spacegalleryCfg.play==true&&num==1)||(el.spacegalleryCfg.play==true&&!num&&!el.spacegalleryCfg.interval)){
el.spacegalleryCfg.interval=setInterval(function(){
if(el.spacegalleryCfg.direction=="backward"){
$(el).spacegallery("prev");
}
else{
$(el).spacegallery("next");
}
},el.spacegalleryCfg.pause);
}
}
}
);
});
}
});
},
to:function(num){
return this.each(function(){
var el=this;
if(num!=el.spacegalleryCfg.images-1){
var dif=0;
if(num<=parseInt((el.spacegalleryCfg.images-1)/2)){
dif=el.spacegalleryCfg.images-(el.spacegalleryCfg.images-1-num);
$(el).spacegallery("prev",dif);
}
else{
dif=el.spacegalleryCfg.images-1-num;
$(el).spacegallery("next",dif);
}
}
});
},
play:function(){
return this.each(function() {
var el=this;
if(el.spacegalleryCfg.play==false){
el.spacegalleryCfg.play=true;
$(el).find(".play").removeClass("pause");
if(el.spacegalleryCfg.animated==false){
el.spacegalleryCfg.interval=setInterval(function(){
if(el.spacegalleryCfg.direction=="backward"){
$(el).spacegallery("prev");
}
else{
$(el).spacegallery("next");
}
},el.spacegalleryCfg.pause);
}
}
else{
if(el.spacegalleryCfg.interval){
el.spacegalleryCfg.interval=clearInterval(el.spacegalleryCfg.interval);
el.spacegalleryCfg.play=false;
$(el).find(".play").addClass("pause");
}
}
});
}
};
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.spacegallery');
}
};
0 Comments
Publicar un comentario