Codice PHP:
/* ==========================================================
* MobilySlider
* date: 20.1.2010
* author: Marcin Dziewulski
* last update: 02.02.2011
* web: [url]http://www.mobily.pl[/url] or [url]http://playground.mobily.pl[/url]
* email: [email]hello@mobily.pl[/email]
* Free to use under the MIT license.
* ========================================================== */
(function($){
$.fn.mobilyslider=function(options){
var defaults={
content:".sliderContent",
children:"div",
transition:"horizontal",
animationSpeed:300,
autoplay:false,
autoplaySpeed:3000,
pauseOnHover:false,
bullets:true,
arrows:true,
arrowsHide:true,
prev:"prev",
next:"next",
animationStart:function(){},
animationComplete:function(){}
};
var sets=$.extend({},defaults,options);
return this.each(function(){
var $t=$(this),item=$t.children(sets.content).children(sets.children),l=item.length-1,w=item.width(),h=item.height(),step=0,play,bullets,arrows,z,active,bullet;
var slider={
init:function(){
slider.data();
if(sets.bullets){
slider.bullets.create()
}
if(sets.arrows){
slider.arrows.create()
}
if(sets.autoplay){
slider.autoplay()
}
slider.triggers()
},
data:function(){
item.each(function(i){
$(this).css("z-index",-(i-l))
});
if(sets.transition=="fade"){
item.hide().eq(0).show()
}
},
zindex:{
prev:function(){
step==l?item.eq(0).css("z-index",l+3):item.css("z-index",l+1);
item.eq(step).css("z-index",l+4).next(item).css("z-index",l+2)
},
next:function(){
item.css("z-index",l+1).eq(step).css("z-index",l+3).prev(item).css("z-index",l+2)
},
bullets:function(){
item.css("z-index",l+1).eq(active).css("z-index",l+2);
item.eq(step).css("z-index",l+3)
},
trigger:function(){
if(z==1){
slider.zindex.next()
}else{
if(z==-1){
slider.zindex.prev()
}else{
if(z==0){
slider.zindex.bullets()
}
}
}
}
},
slide:{
left:function(sign){
sets.animationStart.call(this);
item.eq(step).animate({
left:sign+"="+w
},sets.animationSpeed,function(){
slider.zindex.trigger()
}).animate({
left:0
},sets.animationSpeed+200,function(){
sets.animationComplete.call(this)
})
},
top:function(sign){
sets.animationStart.call(this);
item.eq(step).animate({
top:sign+"="+h
},sets.animationSpeed,function(){
slider.zindex.trigger()
}).animate({
top:0
},sets.animationSpeed+200,function(){
sets.animationComplete.call(this)
})
},
fade:function(){
sets.animationStart.call(this);
item.fadeOut(sets.animationSpeed).eq(step).fadeIn(sets.animationSpeed,function(){
sets.animationComplete.call(this)
})
}
},
animation:{
previous:function(){
step==0?step=l:step--;
z=-1;
switch(sets.transition){
case"horizontal":
slider.slide.left("-");
break;
case"vertical":
slider.slide.top("+");
break;
case"fade":
slider.slide.fade();
break
}
},
next:function(){
step==l?step=0:step++;
z=1;
switch(sets.transition){
case"horizontal":
slider.slide.left("+");
break;
case"vertical":
slider.slide.top("-");
break;
case"fade":
slider.slide.fade();
break
}
}
},
autoplay:function(){
play=setInterval(function(){
slider.animation.next();
if(sets.bullets){
setTimeout(function(){
slider.bullets.update()
},sets.animationSpeed+300)
}
},sets.autoplaySpeed)
},
pause:function(){
clearInterval(play)
},
bullets:{
create:function(){
$t.append($("<div />").addClass("sliderBullets"));
bullets=$t.find(".sliderBullets");
for(i=0;i<=l;i++){
bullets.append($("<a />").attr({
href:"#",
rel:i
}).text(i))
}
},
trigger:function(){
bullet=bullets.find("a");
bullet.eq(0).addClass("active");
bullet.click(function(event){
event.preventDefault();
var b=$(this),rel=b.attr("rel");
active=bullet.filter(".active").attr("rel");
step=rel;
sign=rel>active?"+":"-";
z=0;
if(!b.hasClass("active")){
switch(sets.transition){
case"horizontal":
slider.slide.left(sign);
break;
case"vertical":
slider.slide.top(sign);
break;
case"fade":
slider.slide.fade();
break
}
}
bullet.removeClass("active");
b.addClass("active");
return false;
})
},
update:function(){
bullet.removeClass("active").eq(step).addClass("active")
}
},
arrows:{
create:function(){
$t.append($("<div />").addClass("sliderArrows"));
arrows=$t.find(".sliderArrows");
arrows.append($("<a />").attr("href","#").addClass(sets.prev).text("Previous"));
arrows.append($("<a />").attr("href","#").addClass(sets.next).text("Next"))
},
trigger:function(){
arrows.find("."+sets.prev).click(function(event){
event.preventDefault();
slider.animation.previous();
if(sets.bullets){
slider.bullets.update()
}
return false;
});
arrows.find("."+sets.next).click(function(event){
event.preventDefault();
slider.animation.next();
if(sets.bullets){
slider.bullets.update()
}
return false;
});
if(sets.arrowsHide){
arrows.hide();
$t.hover(function(){
arrows.show()
},function(){
arrows.hide()
})
}
}
},
triggers:function(){
if(sets.arrows){
slider.arrows.trigger()
}
if(sets.bullets){
slider.bullets.trigger()
}
if(sets.pauseOnHover){
$t.hover(function(){
slider.pause()
},function(){
slider.autoplay()
})
}
}
};
slider.init()
})
}
}(jQuery));
Per l'aggiunta dei link all'immagine, fai così:
Rispondi quotando
