packetcode logo
Jquery Image Slider - Part 3

Jquery Image Slider - Part 3

1781 views 2 years ago Tutorials Javascript

This is the third instalment for the jquery image slider tutorial. In this we shall learn how to convert the jquery code to a plugin, so that it can be extended and distributed across. We shall also cover on the code standards to follow to make it more usable.

Before continuing further, it is advisible to go through the tutorial jquery image slider tutorial part 1 where we have covered the css positioning of images, jquery functions and effects then later in jquery image slide tutorial part 2 we have learned on how to add navigation with manual and auto functions. The above two articles would give an indepth understanding of the core concepts.

What you will learn

In this tutorial we shall learn
  • Default plugin construct
  • Code standardization
  • Flexible image container

Demo and Download

Have an hands on experience on the code here with the live demo. Also download a copy of the code and test it...and your feedback in the comments would be greatly appreciated.

Plugin Construct

We shall pick up the base construct from the jquery plugin docs . The documentation is very clear, please skim it up to get the crux. Below is the base code.


(function ( $ ) {
 
 //pick up a plugin name
    $.fn.pluginName = function( options ) {
 
        // This is the easiest way to have default options.
        var settings = $.extend({
            // These are the defaults.
            parameter1: "xyz",
            parameter2: "abc"
        }, options );
 
        // ** code
		//
		// **
 
    };
 
}( jQuery ));

Lets pick up a name for our plugin and add some options in the defaults, for now, i would take two parameters timeout and fadetime. Timeout is the time after which the animation repeats and fadetime is the time interval for fading effect.


(function ( $ ) {
 
    $.fn.bottleSlider = function( options ) {
 
        // This is the easiest way to have default options.
        var settings = $.extend({
       // These are the defaults.
          timeout: 3000,
          fadetime: 300
    }, options );
 
        // ** code
		//
		// **
 
    };
 
}( jQuery ));

Now copy all the code into the plugin wrap.

Code standardization

Its very important to generalize the code rather than picking up specific elements. So now onwards we shall use current selection instead of ‘.slides’ class. As a first step lets take a varaible by name 'selection' to store the current selection. Then replace all the $(‘.slides) with ‘selection’.


//previous code
$('.slides').find('img:first').addClass('top');

// updated code
var selection = $(this);
selection.find('img:first').addClass('top');

Next we have already declared two parameters timeout and fadetime in the default settings which are available for user. These parameters can be accessed in the code as ‘setttings.parameter’ . So lets replace the fadetime and timeout variables accordingly.


/* previous code */
interval = setInterval(forward, 2000);

/* updated code */
interval = setInterval(forward, settings.timeout);

Flexible Image container

Now let us set the container size fluid so that user can fix the container size as per his need. For this we shall make the slider class in the css to width 100% . Now Here the problem is based on the container width we need to place the navigation elements dynamically. For this we need to get the height of the container in jquery and manipulate it accordingly to fix the elements. Below is the code for the implementation.


 // Getting the element width and height
 var w = selection.width();
 var h = selection.height();
 //getting the position of the mid height
 // slightly moving it up by reducing 25 px
 var p = (h/2) - 25;

 // changing the element position accordingly
 $('.' + front).css("top",+p+"px");
 $('.' + back).css("top",+p+"px");

Finally i have wrapped few intial statements in a function called initialization to make it more organized. Also i have changed the navigation from arrows to image pngs because of alignment issues in device compatibility. Thats it ! we are through, below is the usage details to use the plugin in the webpages.

Usage

Example #1 : Using the plugin with miniaml code


$(function(){
	/*select the element and apply plugin*/
	$('#first').bottleSlider();
});

Example #2: Using the plugin with user defined paramenter 'timeout'


$(function(){
	/*select the element and apply plugin*/
	/* with user option fadetime*/
	$('#first').bottleSlider({
		timeout:3000
	);
});

Wrap up

With this tutorial we have completed the series of jquery image slider implementation in detail. Some parts of the code has been refined and made the display responsive. The plugin is availalbe for download on github. Do fork it and your feedback would be greatly apprecaited.

im krishna Teja, im a computer science engineer by qualification, a physics teacher by profession and a programmer by interest. I'm an expert in building visually stunning web apps using javascript, ...