Image Slider: Comparing JS, JQuery and YUI3 Implementations

Here lies the story…

First I decided rewrite my old BlogSlideShow JS-class. In fact I have a plan to rewrite all of my old works gaining to update functionally and appearance regarding to nowadays fashion and make better their code. You can see what I got at the demo page. So, after I finished with implementation on fluent JS, without use of any external library I ported it on jQuery. After that I wrote also implementation on YUI3. I’m fond of both those frameworks and found that is a good practice top have the same task solved thrice in different ways. So here is my observations experienced the task.

Doing the same with different tool

Fluent implementation and the jQuery plugin don’t differ too much. jQuery just already provides all the helpers I need and solves the troubles caused by different browser peculiarity. Thus, working without jQuery I had to write a simple Dom-element selector, functions to bind and unbind event handlers, CSS loader, helper for inserting HTML into DOM-tree and viewport state detector. And of course I was obliged always remember of IE specific requirements.

As for YUI3 implementation, it had taken me longer. That’s not just about porting of the code, but another philosophy of coding, if I may to say so. But YUI3 force you to write more maintainable code with explicit structure and logic. Briefly that is a declaration of a widget where parsing rules, rendering and UI binding are standardized. Though I’m going to make an article especially about this someday.

So what about the slider?

Actually the component when it’s initialized scans DOM-tree for the occurrences of the A elements (links), that provided with attribute rel of blogslideshow value (‘a[rel=blogslideshow]’ selector). It attaches to them handler on click events. The handler creates an overlay with the image of Url specified in href attribute of clicked link. On hovering event (mouseover) the handler shows tool bar with navigation buttons over the image. On click event handler change image with next or previous in the collection derived during the links scan. Though if the effect type is specified the image change is attended by some fancy show. For that I use a sort of asynchronous queue and isolated class (effect) with effect callbacks.

How to make my own effect?

The queue has following public methods:

• add(options) - adds an asynchronous iterator into the queue, which will call ‘iteratedCallback’ of ‘iterations’ times and then invoke ‘completedCallback’
• run – starts processing of the queue
• stop - use it, when you need to cancel the queue immediately

Options:

object options {
     startedCallback : function,  // OPTIONAL. Invoked before iterations started
     iteratedCallback : function, // invoked when every iteration
     completedCallback: function, // invoked when the bunch of iterations completed
     iterations : int, // number of expected iterations 
     delay: int  // delay in msec
     reverse: boolean //- OPTIONAL. When reverse is true, decrementing, otherwise incrementing
     scope: object // context of use
}

So, having this tool we can declare effect implementation in the following fashion:

aQueue.add({
      startedCallback: effect._fadeStarted,
      iteratedCallback: effect._fadeIterated,
      completedCallback: effect._fadeCompleted,
      iterations: 3,
      delay: 100,
      scope: this}).run();

Here in effect._fadeStarted handler we can overlay the current image with next one, which opacity style is about zero (it’s totally transparent). effect._fadeIterated receives as parameters counter and number (iterations number). So we can use them to change opacity of the appearing image till it becomes pretty solid. effect._fadeCompleted can be used to clean background picture (we don’t need it anymore) and align image overlay to the viewport center according to the new image size.

Another case, when you want during the effect a sequence of transitions. E.g. the old image is disappearing ad then the new one starts showing up. So here are two of iterators :

aQueue.add({
         startedCallback: effect._fadeStarted,
         iteratedCallback: effect._ fadeIterated,
         completedCallback: effect._ fadeHalfCompleted,
         iterations: 5,
         delay: 150,
         scope: this,
         reverse : true}).add({
         iteratedCallback: effect._ fade Iterated,
         completedCallback: effect._ fadeCompleted,
         iterations: 5,
         delay: 150,
         scope: this}).run();

Well, I hope you’ll find it pretty easy to apply a new effects on the slider and looking forward see them. Now when CSS3 provides us with new amazing features, that seems the only limitations we still have is in our imagination. Enjoy!