Last time i was design a theme for web site used with bootstrap and jQuery. in that case i have to add a landscape image slider to the background. So i do search many plugins, but sadly i fail to place with my current code. then i refresh my jQuery knowledge and build my own plugin (see the link Below).
Here The Link
I'm not the professional web developer but here i would like to share my knowledge with you.
JQuery
;(function($){
var option={
conts:[],
index:0,
imgs:null,
layout:null,
fadeinTime:1000,
displayTime:3500,
fadeoutTime:4500
};
$.extend($.fn,{
imageShower:function(){
option.layout=this;
option.imgs=this.find("img");
option.imgs.css("display","none");
option.imgs.each(function(index){
option.conts.push(this.src);
});
this.postition();
},
fade:function(){
option.layout.fadeIn(option.fadeinTime,function(){
setTimeout(function(){
option.layout.fadeOut(option.fadeoutTime,function(){
if(option.index==option.conts.length-1){
option.index=0;
}else{
option.index++;
}$.fn.postition();
});
},option.displayTime);
});
//this.postition();
},//end fade
postition:function(){
option.layout.css({
'background':'url('+option.conts[option.index]+')',
'background-size':'cover',
'height':'100%',
'width':'100%',
'display':'none'
});
this.fade();
}//end position
});
})(jQuery);
var option={
conts:[],
index:0,
imgs:null,
layout:null,
fadeinTime:1000,
displayTime:3500,
fadeoutTime:4500
};
$.extend($.fn,{
imageShower:function(){
option.layout=this;
option.imgs=this.find("img");
option.imgs.css("display","none");
option.imgs.each(function(index){
option.conts.push(this.src);
});
this.postition();
},
fade:function(){
option.layout.fadeIn(option.fadeinTime,function(){
setTimeout(function(){
option.layout.fadeOut(option.fadeoutTime,function(){
if(option.index==option.conts.length-1){
option.index=0;
}else{
option.index++;
}$.fn.postition();
});
},option.displayTime);
});
//this.postition();
},//end fade
postition:function(){
option.layout.css({
'background':'url('+option.conts[option.index]+')',
'background-size':'cover',
'height':'100%',
'width':'100%',
'display':'none'
});
this.fade();
}//end position
});
})(jQuery);