Thursday, March 5, 2015

Simple jQuery plugin

Hello everybody Welcome,

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.


  1. 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);