How to Create a Slider Plugin with jQuery

January 16th, 2012 by Mehrzad Tejareh

Today we have a great jQuery tutorial to share with all of you! This is our first jQuery tutorial on Admix Web, and we know you all will find it very useful! In this tutorial, we want to create a photo box where the photos on the photo box change every five seconds. In order to accomplish this task, we need to design a plug-in with jQuery for this purpose. Below is the tutorial explaining How to Create a PhotoFrame Plugin with jQuery. Enjoy!

jQuery offers this architecture to design plug-ins:

 
(function ($) {
    $.fn.urPhotoFrame = function () {
        // Do your awesome plugin stuff here
    };
})(jQuery);

So, we must create some methods and main function for this plug-in. Some of methods that we need are as follows:
Init : for initialize urPhotoFrame plug-in.
Action: for change photo in the urPhotoFrame.
The architecture to add methods to our plug-Ins:

 
(function ($) {
    var methods = {
        init: function (options) {
            // Statements
        },
        action: function () {
            // Statements
        }
    };
 
    $.fn.urPhotoFrame = function (method) {
        if (methods[method])
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        else if (typeof method === 'object' || !method)
            return methods.init.apply(this, arguments);
 
    };
})(jQuery);

We want to use this plug-in in several places in our page. So when we define this plug-in, we must define a timers array that must be used for different urPhotoFrames to change photos after 5 seconds.
So before define methods, we must define timers array, as follow:

 
(function ($) {
            var timers = new Array();
            var methods = {
                myContainer: null,
                init: function () {
                     //Statements
                },
                action: function (Container) {
			//Statements
                }
            };
    $.fn.urPagerScroll = function (method) {
        methods["myContainer"] = jQuery(this);
        if (methods[method])
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        else if (typeof method === 'object' || !method)
            return methods.init.apply(this, arguments);
    }
})(jQuery);

One of the new notice in this part is in line 13:

 
methods["myContainer"] = jQuery(this);

In this instruction, we set myContainer object to detect which urPhotoFrame is selected and our method execute on selected urPhotoFrame. Because we want use these methods in the following structure:

 
$(“#MyContainerID”).urPagerScroll(‘Your_Method’);

In this part, we start writing init method:

 
init: function () {
    jQuery(methods.myContainer).children().each(function (index) {
    jQuery(this).hide();
    if (index == 0)
        jQuery(this).show();
    });
    var x = (jQuery)(methods.myContainer);
    timers[methods.myContainer.attr("id")] = setInterval(function () { methods.action(x) }, 5000);
},

In this code, first we must hide all images in our selected photo frame except first element in our frame with index=0.
In this code, we use associated array to save intervals and we save them with photo frame ID. Moreover, we set the intervals with 5000 millisecond for do action method. So we need create action method. For this propose, we need to detect which container in our page will do the action method so action method has a parameter that sets with photo frame container jQuery object.
For find out how to create action method see the following code:

 
action: function (Container) {
                    ElementNo = Container.children().length;
                    curentShowIndex = 0;
                    Container.children().each(function (index) {
                        if (jQuery(this).is(":visible")) {
                            curentShowIndex = index
                        }
                    });
                    if (ElementNo > 1) {
                        jQuery(Container.children()[curentShowIndex]).fadeOut(600);
                        if (ElementNo - 1 != curentShowIndex) {
                            jQuery(Container.children()[curentShowIndex + 1]).fadeIn(600);
                        }
                        else {
                            jQuery(Container.children()[0]).show();
                        }
                    }
                }

In the first line, we get a number of elements in our selected photo frame. Next, we set “currentShowIndex” variable with (0) value next we check which element in our selected container is visible. When we find which element is visible, we save its index in currentShowIndex. Next, we check how many elements are in our selected photo frame. If we have more than one element in our photo frame container, we must fadeout current element add fade in next element, and we must switch next element with next index that you must do currentShowIndex+1 to get next element index for showing. We must notice that if currentShowIndex is latest element in our selected photo frame, we must switch to the first element in our selected photo frame. So if we have more than one element in our selected photo frame, we must check this statement:

 
(ElementNo - 1 != currentShowIndex)

So if ElementNo-1 is equal with currentShowInde, we must show the first element in our selected photo frame.
So our photo frame container code is like following:

 
(function ($) {
    var timers = new Array();
    var methods = {
        myContainer: null,
        init: function () {
            (jQuery)(methods.myContainer).children().each(function (index) {
                jQuery(this).hide();
                if (index == 0)
                    jQuery(this).show();
            });
            var x = (jQuery)(methods.myContainer);
            timers[methods.myContainer.attr("id")] = setInterval(function () { methods.action(x) }, 5000);
        },
        action: function (Container) {
            ElementNo = Container.children().length;
            currentShowIndex = 0;
            Container.children().each(function (index) {
                if (jQuery(this).is(":visible")) {
                    currentShowIndex = index
                }
            });
            if (ElementNo > 1) {
                jQuery(Container.children()[currentShowIndex]).fadeOut(600);
                if (ElementNo - 1 != currentShowIndex) {
                    jQuery(Container.children()[currentShowIndex + 1]).fadeIn(600);
                }
                else {
                    jQuery(Container.children()[0]).show();
                }
            }
        }
    };
 
    $.fn.urPhotoFrame = function (method) {
        methods["myContainer"] = jQuery(this);
        if (methods[method])
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        else if (typeof method === 'object' || !method)
            return methods.init.apply(this, arguments);
    }
})(jQuery);

And usage of this plug-in in our pages like following code:

CSS

#PhotoFrameContainer {
	width:525px;
	overflow:hidden;
	padding:0px;
	position:relative;
	height:300px
}
#PhotoFrameContainer > div {
	width:525px;
	height:300px;
	padding:0px;
	margin-right:0px;
	margin-top:0px;
	margin-left:0px;
	position:absolute;
	top:0px;
	left:0px
}

HTML

 
<div id="PhotoFrameContainer">
       <div><img src="img/img1.jpg" /></div>
      <div><img src="img/img2.jpg" /></div>
      <div><img src="img/img3.jpg" /></div>
</div>

And use this script:

 
$(document).ready(function () {
    $("#PhotoFrameContainer").urPhotoFrame();
});

Demo

Conclusion

In conclusion, you can change this plug-in to better a version and add some method like GoNext,Stop,Start,Remove,Add , … and also you can use complex HTML code for element instead of Images. I hope you enjoyed the tutorial and found it useful in your work. Please feel free to leave any comments below. With best regards – Mehrzad Tejareh

Mehrzad Tejareh is a Software Developer born in 1987 in Tehran, Iran. He holds a bachelor degree in Computer Science from Azad University. Also, he is specialized in ASP.Net, C#, JavaScript, jQuery, HTML/CSS. You can visit his website Raha Web Design Group.

Subscribe to our RSS
Please help us to promote this article.
Tags:
Comments 4
  1. Holly says:
    January 30, 2012 at 8:08 am

    Awesome jQuery tutorial! Thanks for sharing it with us!

    Reply
  2. digital signage says:
    February 6, 2012 at 10:25 am

    great tutorial! very helpful! thank you

    Reply
  3. Mehrzad - Tejareh says:
    February 6, 2012 at 10:44 pm

    thnx my friends … i’ll post better plugIns for you …

    Reply