Build a simple semantically valid carousel from scratch (part 3)

After we’ve made a proof analysis of the Carousel, thinking about it’s structure and making it strictly semantic, we’ve discussed about the presentation using only CSS if javascript would not be available. The result is acceptable and works fine in the most browsers. But in this article we will wet our hands into jQuery and make our Carousel really cool!

First of all, we have to understand the basis of jQuery plugin developement.

To make something as a jQuery plugin you have to declare it as a jQuery function.

jQuery.fn.myPlugin = function(options){
}

in this way we can call myPlugin as it were a jQuery object method.

jQuery('#my-element').myPlugin();

Cool! True?

myPlugin method would be called in the selected object context. In the above case #my-element (remember that the prototype of each element has been modified by jQuery) would be the “this” object inside the method or, if the selector embrace more elements of the DOM, it will be an array of jQuery elements.

Usually a jQuery plugin will return the “this” object to grant the chainability. So, to ensure that our plugin will work with both single object and array of objects, we can just use the syntax:

jQuery.fn.myPlugin = function(options){
    return this.each(function(){ /* Our plugin code goes here */ });
}

The above function executed on each item of the array or to the single selected item by the CSS selector will manipulate the DOM node to make our carousel true.

Developing the carousel

Let’s start our plugin implementation thinking about what informations will be unchangeable by the user and which one should be computed then plugin options.

The size of items as described in the analysis is not specified, so we should define them in the configuration phase. Same for the opacity and for the speed of animation. Considered that we should think as the most of jQuery plugins were developed, they store a set of default options so if the user would define only some of them it can do it and the plugin will care about merging the two objects and get a complet set for the new options object.

var defaultOptions = {
    maxSize: 120,
    midSize: 110,
    minSize: 80,
    maxOpacity: 1,
    midOpacity: 0.6,
    minOpacity: 0.3,
    speed: 1500
}

if(options==null) options = [];
options = jQuery.extend(defaultOptions, options);

using extend method against merge, you will merge the defaultOptions object overriding its value with those one defined in the options object.

Another significant element that we will reuse inside the script would be the base object that will be always an equivalent of this but never overrided by the this regardles to the context.

Now let’s build simply the core of our plugin.

First of all we create the two navigation links:

jQuery(base).
    prepend('<a class="nav go-prev" href="#">Prev</a><a href="#" class="nav go-next">Next</a>');
    jQuery('.nav',base).css({
        height: jQuery(base).innerHeight() + 'px',
        display: 'block'
    });
    jQuery('>.nav.go-prev', base).css('float','left').click(movePrev);
    jQuery('>.nav.go-next', base).css('float','right').click(moveNext);

Then we will reset the style rules defined in the css:

jQuery(base).css('overflow', 'hidden');
jQuery('>ul',base).css({
    marginLeft: jQuery('>.nav', base).outerWidth() + 'px',
    width: (jQuery(base).innerWidth() - jQuery('>.nav', base).outerWidth()*2) + 'px',
    padding: 0,
    height: jQuery(base).innerHeight() + 'px',
    display: 'block'
});

then invoking 2 methods: one that is able to hide the list items not currently visible, the other that will organize the elements in the ul area.

hideTheExceding();
locateElements();

hideTheExceding() will cycle for each item of the array and will apply the defined opacity for the visible items and:

1. hide the elements actually not visible,
2. set to current the class for the central item,
3. set to near the class for the items placed on the direct side of the current item
4. set to far the class for the items farest from the current.

LocateElements() will place the items in the area considering that:

• the current item will be placed to the center of the screen and will be sized ,
• the far item will be placed to the border of the carousel with a margin of 10px
• the near item will be placed between the two above items.

the location will be calculating the median of each item. For example the .current item will be placed in the centre of the screen. To calculate how (x,y) coords must be placed we get the half of the container (ul) inner width and subtract the half outer width for the current item.

CurrentX = (ULWidth – CurrentWidth)/2

The computing of FarX position would differ if located to the left or to the right of the page. In case of element located to the left we’ll place it 10px far from the border. If On the right it will be placed however on 10px from the border but we must set the position as:

FarXR = ULWidth - 10px - MinSize

The middle item will be placed just in the middle of two items. To calculate it we have to calculate the median of each item and then identify an exact point in the middle of them. The NearItem median is equidistant from the CurrentItem median and FarItem median but you have to calculate half medium size to place the nearItem centered respect to its median.

In this article we have placed the items in the carousel, in the next article we will see how to animate the carousel Elements implementing the moveNext and movePrev methods.

An example is available here.

Have a nice working week and stay tuned… I’ll come back soon!