The original code for spacegallery
Changes:
Include Javascript
<script type="text/javascript" src="spacegallery.js"></script>
Invocation code:
$('#myGallery').spacegallery(); //Or
$('#myGallery').spacegallery(options);
$('#myGallery').spacegallery("method"); //String method name
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
Example:
<html>
<body>
<div id="myGallery" class="loading">
<img src="spacegallery/images/bw3.jpg" alt="" />
<img src="spacegallery/images/lights3.jpg" alt="" />
<img src="spacegallery/images/bw2.jpg" alt="" />
<img src="spacegallery/images/lights2.jpg" alt="" />
<img src="spacegallery/images/bw1.jpg" alt="" />
<img src="spacegallery/images/lights1.jpg" alt="" />
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="spacegallery.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
$("#myGallery").spacegallery({
imageWidth:240,
scroll:true,
buttons:true,
direct:true,
play:true,
alpha:true,
duration:5000,
loadingClass:"loading"
});
});
</script>
</body>
</html>
spacegallery.js
/**
*
* 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
};
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.increment = parseInt(el.spacegalleryCfg.perspective/el.spacegalleryCfg.images,10);
var top = 0;
el.spacegalleryCfg.imgs.each(function(index){
var imgEl = new Image();
imgEl.src = this.src;
this.spacegalleryCfg={};
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]);
el.spacegalleryCfg.tops[index]=top;
$(this).width(el.spacegalleryCfg.imageWidth).css({"position":"absolute"});
this.spacegalleryCfg.origWidth=el.spacegalleryCfg.imageWidth;
if (imgEl.complete) {
el.spacegalleryCfg.loaded++;
this.spacegalleryCfg.origHeight = imgEl.height
if (el.spacegalleryCfg.loaded == el.spacegalleryCfg.images) {
$(el).spacegallery("positionImages");
}
}
else {
imgEl.onload = function() {
el.spacegalleryCfg.loaded++;
this.spacegalleryCfg.origHeight = imgEl.height
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("").append("").append("");
$(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() {
$(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.spacegalleryCfg.width=parseInt(this.spacegalleryCfg.origWidth-(this.spacegalleryCfg.origWidth-this.spacegalleryCfg.origWidth*el.spacegalleryCfg.minScale)*el.spacegalleryCfg.asins[index]);
this.spacegalleryCfg.left=parseInt((el.spacegalleryCfg.imageWidth-this.spacegalleryCfg.width)/2);
$(this).css({
"opacity":function(){
if(el.spacegalleryCfg.alpha==true){
return 1 - el.spacegalleryCfg.asins[index];
}
else{
return 1;
}
},
"width":this.spacegalleryCfg.width+"px",
"margin-left":this.spacegalleryCfg.left+"px",
"top":el.spacegalleryCfg.tops[index]+"px"
});
if(el.spacegalleryCfg.direct==true){
$(this).off('click').click(function(){
clearInterval(el.spacegalleryCfg.interval);
$(el).spacegallery("to",index);
});
}
if(index!=0){
this.spacegalleryCfg.prev=el.spacegalleryCfg.asins[index-1];
this.spacegalleryCfg.prevTop=el.spacegalleryCfg.tops[index-1];
}
else{
this.spacegalleryCfg.prev=el.spacegalleryCfg.asins[el.spacegalleryCfg.images];
this.spacegalleryCfg.prevTop=el.spacegalleryCfg.tops[el.spacegalleryCfg.images];
}
if(index==el.spacegalleryCfg.images-1){
this.spacegalleryCfg.next=el.spacegalleryCfg.asins[el.spacegalleryCfg.images+1];
this.spacegalleryCfg.nextTop=el.spacegalleryCfg.tops[el.spacegalleryCfg.images+1];
}
else{
this.spacegalleryCfg.next=el.spacegalleryCfg.asins[index+1];
this.spacegalleryCfg.nextTop=el.spacegalleryCfg.tops[index+1];
}
this.spacegalleryCfg.origTop=el.spacegalleryCfg.tops[index];
this.spacegalleryCfg.zindex=1000-index;
this.spacegalleryCfg.increment=el.spacegalleryCfg.asins[index]-this.spacegalleryCfg.next;
this.spacegalleryCfg.current=el.spacegalleryCfg.asins[index];
});
$(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();
$(el).css('spacegallery', 0).animate({spacegallery:20},{
easing:'easeOut',
duration: el.spacegalleryCfg.duration,
complete: function() {
var last=$(el).find('img:last');
$(last).prependTo(el).css({"opacity":0});
if(el.spacegalleryCfg.alpha==true){
$(last).animate({"opacity":1-el.spacegalleryCfg.asins[0]});
}
else{
$(last).animate({"opacity":1});
}
$(el).spacegallery("positionImages");
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() {
$(el).spacegallery("next");
}, el.spacegalleryCfg.pause);
}
},
step: function(now) {
$('img', this).each(function(nr){
var newWidth, top, next;
if (nr == el.spacegalleryCfg.images-1) {
top = this.spacegalleryCfg.origTop - ((this.spacegalleryCfg.origTop-this.spacegalleryCfg.nextTop )* now /20);
newWidth = this.spacegalleryCfg.width * top / this.spacegalleryCfg.origTop;
$(this).css({
top: parseInt(top) + 'px',
marginLeft: - parseInt((newWidth-el.spacegalleryCfg.imageWidth)/2, 10) + 'px',
width:parseInt(newWidth)+"px",
opacity:1-now/20
});
} else {
top = this.spacegalleryCfg.origTop - ((this.spacegalleryCfg.origTop-this.spacegalleryCfg.nextTop )* now /20);
next = this.spacegalleryCfg.current - (this.spacegalleryCfg.current-this.spacegalleryCfg.next) * now /20;
newWidth = this.spacegalleryCfg.origWidth - (this.spacegalleryCfg.origWidth - this.spacegalleryCfg.origWidth * el.spacegalleryCfg.minScale)*next;
$(this).css({
top: parseInt(top)+ 'px',
marginLeft: - parseInt((newWidth-el.spacegalleryCfg.imageWidth)/2, 10) + 'px',
width:parseInt(newWidth)+"px",
opacity:function(){
if(el.spacegalleryCfg.alpha==true){
return 1 -next;
}
else{
return 1;
}
}
});
}
});
}
});
}
});
},
prev : function(num) {
return this.each(function() {
var el=this;
if(el.spacegalleryCfg.animated==false){
el.spacegalleryCfg.animated=true;
el.spacegalleryCfg.before.apply();
$(el).css('spacegallery', 0).animate({spacegallery:20},{
easing:'easeOut',
duration: el.spacegalleryCfg.duration,
complete: function() {
$(el).find('img:first').appendTo(el).css({"opacity":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() {
$(el).spacegallery("next");
}, el.spacegalleryCfg.pause);
}
},
step: function(now) {
$('img', this).each(function(nr){
var newWidth, top, next;
if (nr == 0) {
top = this.spacegalleryCfg.origTop - ((this.spacegalleryCfg.origTop-this.spacegalleryCfg.prevTop )* now /20);
newWidth = this.spacegalleryCfg.width * top / this.spacegalleryCfg.origTop;
$(this).css({
top: parseInt(top) + 'px',
marginLeft: - parseInt((newWidth-el.spacegalleryCfg.imageWidth)/2, 10) + 'px',
width:parseInt(newWidth)+"px",
opacity:function(){
if(el.spacegalleryCfg.alpha==true){
return 1 -this.spacegalleryCfg.current-now/20;
}
else{
return this.spacegalleryCfg.current-now/20;
}
}
});
} else {
top = this.spacegalleryCfg.origTop - ((this.spacegalleryCfg.origTop-this.spacegalleryCfg.prevTop )* now /20);
next = this.spacegalleryCfg.current - (this.spacegalleryCfg.current-this.spacegalleryCfg.prev) * now /20;
newWidth = this.spacegalleryCfg.origWidth - (this.spacegalleryCfg.origWidth - this.spacegalleryCfg.origWidth * el.spacegalleryCfg.minScale)*next;
$(this).css({
top: parseInt(top)+ 'px',
marginLeft: - parseInt((newWidth-el.spacegalleryCfg.imageWidth)/2, 10) + 'px',
width:parseInt(newWidth)+"px",
opacity:function(){
if(el.spacegalleryCfg.alpha==true){
return 1 -next;
}
else{
return 1;
}
}
});
}
});
}
});
}
});
},
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() {
$(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' );
}
};
$.extend($.easing,{
easeOut:function (x, t, b, c, d) {
return -c *(t/=d)*(t-2) + b;
}
});
0 Comments
Publicar un comentario