jQuery: plugin example

In an earlier post I covered the theory behind the jQuery plugin development. Now it's time to create a practical example. Let's say that we have an image gallery made up of different image sets, each one containing three images. We want the side images to be smaller than the main image, which must be centered and larger. Further, we need a repeated animation that switches images so that the side images will always be the same, but with an alternate opacity, and the main image should always change. In practice, we should have an effect like: 1-(2/3-3/2)-1. Let's start with our HTML structure:

<div id="slider">
 <img src="1.jpg" alt="Image 1" />
 <img src="2.jpg" alt="Image 2" />
 <img src="3.jpg" alt="Image 3" />
</div>

Now jQuery. First, we create the plugin wrapper:

(function($) {

  $.fn.slideshow = function(options) {
  
    // plugin body
    
    
  };
  
})(jQuery);

Second, we need to create an internal reference to the current element:

(function($) {

  $.fn.slideshow = function(options) {
  
    var that = this;
  
    // plugin body
    
    
  };
  
})(jQuery);

Third, we define our default options:

(function($) {

  $.fn.slideshow = function(options) {
  
    var that = this;
    
    var defaults = {
    
    
       wrapperStyles: {
       
         width: '600px',
         height: '300px',
         overflow: 'hidden',
         position: 'relative',
         margin: '0 auto',
         padding: '2em 0'
       
       
       },
       
       mainImgStyles: {
       
         width: '300px',
         height: '200px',
         position: 'absolute',
         top: '50%',
         left: '50%',
         margin: '-100px 0 0 -150px'
       
       
       },
       
       firstImgStyles: {
       
         width: '120px',
         height: '100px',
         position: 'absolute',
         top: '50%',
         left: 0,
         marginTop: '-50px',
         cursor: 'pointer'
       
       
       },
       
       lastImgStyles: {
       
         width: '120px',
         height: '100px',
         position: 'absolute',
         top: '50%',
         right: 0,
         marginTop: '-50px',
         cursor: 'pointer'
       
       
       },
       
       
       first: that.find('img:first'),
       
       last: that.find('img:last'),
       
       main: that.find('img:first + img'),
       
       speed: 1000
    };
    
    
    options = $.extend(defaults, options);
    

  
    // plugin body
    
    
  };
  
})(jQuery);

As you can see, we use the that reference to access the jQuery methods of the current element. Then we can define our plugin body:

// plugin body

return this.each(function() {
    
      var element = $(this);
      
      element.css(options.wrapperStyles);
      options.first.css(options.firstImgStyles);
      options.last.css(options.lastImgStyles);
      options.main.css(options.mainImgStyles);
      
      
      var src = {
      
        firstSrc: options.first.attr('src'),
        mainSrc: options.main.attr('src'),
        lastSrc: options.last.attr('src')
      
      
      };
      
      
      var interval = window.setInterval(function() {
      
        
      
        options.first.animate({
          opacity: '0.5'
        }, options.speed, function() {
        
          options.first.attr('src', src.mainSrc);
          options.main.attr('src', src.firstSrc);
          
          $(this).animate({opacity: 1});
          
          options.last.animate({
          
            opacity: '0.5'
          
          
          }, options.speed, function() {
          
          
            options.last.attr('src', src.mainSrc);
            options.main.attr('src', src.lastSrc);
            
            $(this).animate({opacity: 1});
          
          
          
          });
        
        
        });
        
       
        
        
      
      }, options.speed * 2);
         
});

In our plugin body we do the following:

1. we apply the CSS styles defined in our options
2. we store the src attribute values of each image in an object literal for later use
3. we create our repeated animation by using the JavaScript setInterval() function

Example:

$(document).ready(function() {

  $('#slider').slideshow();


});

You can see the demo below.

Demo

Live demo