Tutorial: Object-Oriented Way of Creating a jQuery Image Slider

The purpose of this article is to demonstrate object-oriented design in JavaScript, by creating a jQuery powered image gallery script from scratch. Note that we are not creating a jQuery plugin, but simply using jQuery for DOM selection and manipulation. In the near future, this article might be updated to jQuery plugin version.


Demonstration: http://test.thecodecentral.com/demos/simple_gallery/
See it on GitHub: https://github.com/thecodecentral/Simple-Image-Slider

The Theory

The theory behind it is pretty simple. We first align a list of images side by side, this will allow us to create a long horizontal panel. Above the panel, we create a "windowed" area to show only part of the panel. We achieve this by setting style of the container element to overflow:none. Lastly, we implement JavaScript code to move the horizontal panel.

Creating the Object Blueprint

There's no such thing really is class in JavaScript, so we will call it object blueprint for now. But for convenience, we will loosely refer this as class later on. We are going to create something like this,

Once we have the blue print, we can create the gallery object like this,

If you are curious about how it works, here is a good read about applying OOP paradigm in JavaScript.

HTML/CSS Prototype

Before implementing the JavaScript further, we are going to create a quick prototype of the gallery. No JavaScript is involved in this step.

By this little amount of code, we already have a bare-bone version of the gallery we are trying to create. DIV.slide_panel is now scrollable. If you have Firefox browser with Firebug installed, you can scroll it by editing the left position of this DIV element. See a live demonstration here.

We are going to expand our JavaScript code based on this prototype gallery.

Coding the Gallery Script

Firstly, please have a look at the completed script to get an overview of what it looks like. The entire script seems long, but it is divided into many well defined code blocks, which can help you to understand the code better. The constructor now has been updated to initialize many object wide variables. You don't need to know what these are, but just remember they will be used in some places within the class.

One thing may be confusing to new jQuery user is the using of $.extend. Here we use $.extend to merge options passed to the constructor with the default options inside of the constructor. For example, if we do

this.options.slideClassName will become 'slide_new', instead of the old value 'slide_block'.

The rest is the class body, which are merely functions.

The Scroll to Function

I will focus on discussing the "scrollTo" function, which is the most important function in the class. This function is not hard to understand either. You can almost read it as plain English. The function take a parameter "index", which is the slide number to scroll to. Please read the code comment for more explanations.

Once the scrollTo function is implemented, we just need to add navigation buttons, then we have an image slider. "setupNav" and "showHideNav" functions will take care adding and displaying the navigation buttons.

The render() Function

The "render()" function is responsible to display the image slider. We are going to go over this function shortly, but now, just have a quick look at the code.

It take an argument, which is an jQuery element that you want the slider to be appended into. This function should be pretty easy to understand, except two places:

Above code is roughly the same as below,

Then, you might ask, why would I use "apply" instead of calling "galleryRenderer" and "itemRenderer" directly? To answer this question, we need to understand what "apply" does. If you are not familiar with the scope problem in JavaScript, here is a very good read. So basically "apply" will correct the scope of two renderers functions (see below for explanation of what renderer is). Still remember this.options = $.extend({}, options) in the constructor? After that call, this.options is assigned to an object. So calling this.options.galleryRenderer(this), will be in the scope of "options" object, not the SimpleGallery object; but this is not what we want. We use apply to fix this problem.

Notice that I put two render functions in the this.options variable. This will provide maximum flexibility. This way, either renderer can be overwritten and customized. Please see final demonstration page for how to customize the renderer.

Instantiating the Slider Object (Directly)

Once the slider class is done, we can instantiate it. We can do it programmatically like this,

Instantiating the Slider Object (With a Crawler)

Better yet, we can create a slider based on existing images in the document. I have created a simple image crawler, which can extract image information and construct data for the slider class.

Now, let's say the original page contains the following,

The image slider can be created like this,

This will create a good fall back mechanism. That is, when JavaScript is not supported, original images will be displayed. If JavaScript is supported, slider is displayed. Take a look the demo page, and try to disable JavaScript to see how it falls back nicely.

The Completed Code

JavaScript: http://test.thecodecentral.com/demos/simple_gallery/lib/simple.gallery.js
Slider Demo: http://test.thecodecentral.com/demos/simple_gallery/

11 Comments Tutorial: Object-Oriented Way of Creating a jQuery Image Slider

  1. Pingback: Object Oriented Way of Creating a jQuery Image Slider | Code Central | EtondeGroup Blog of Web Applications

  2. Pingback: Tutorial: Object-Oriented Way of Creating a jQuery Image Slider | arzrasel

  3. bs-grodzisk.pl

    You can certainly see your enthusiasm in the article you write.
    The world hopes for more passionate writers such
    as you who are not afraid to mention how they believe.
    Always follow your heart.

  4. Francis Roger

    maybe an error ?

    'if(self.currentSlide < self.numberSlides){'

    must be

    'if(self.currentSlide < self.numberSlides-1){'

  5. Irish Plate

    It’s in point of fact a nice and useful piece of information. I’m happy that you just shared this helpful information with us. Please keep us up to date like this. Thanks for sharing.

  6. Wrikgee

    I realize that this blog was written in 2011, but is there a different link that we can go to in order to see 'the completed link' link, which shows how it all looks upon completion? I have not gone through it all, so maybe there is a mention of this, but if not, do you happen to know if there is still a URL? Thanks very much in advance.

Leave a Reply

Your email address will not be published. Required fields are marked *