CV
Langages
- C
- PHP
- Perl
- Javascript
- Flex 3
- Python
- C#
- TCL
- Bash
Liens
Contact

JavaScript / JQuery

Expertise (5/5)

J'utilise régulièrement JavaScript depuis 2 ans. J'ai développé de nombreux greffons pour JQuery.

Intégration de Google Map (sélection d'un lieu avec la souris).
Carrousel de photos.
Trombinoscope animé.
Slider (dans toutes les directions).
... et de très nombreuses autres fonctions plus ou moins spécifiques.

Ce document contient quelques exemples simples de réalisation.

Un trombinoscope animé
Créer des liens
Initialisation de l'API Google pour un site multi-domaine
Calcul d'un âge, à partir d'une date de naissance
Sliders

Un trombinoscope animé

Cet exemple illustre une utilisation du greffon. Une série de 6 images défile sur trois "cases".

La fréquence de remplacement d'une image par une nouvelle image a été paramétrée à 1 image par seconde. Ce paramètre de configuration est configurable.
Les images sont cliquables. Chaque image est associée à une URL. Cette association est facultative. Si une image n'est pas associée à un lien, alors elle n'est pas cliquable.

Code du greffon

(function($)
{
    /**
     * Autheur: Denis BEURIVE
     * Attention : Ce fichier a fait l'objet d'un dépôt de droit d'auteur auprès de l'INPI.
     *
     * Ce greffon permet de créer des trombinoscopes.
     * Les trombinoscopes sont définis par des listes non ordonnées (<ul>).
     *
     * Chaque trombinoscope définit les propriétés suivantes :
     *    o [Obligatoire] Une liste de "canvas". Un "canvas" est une zone d'affichage pour une image (nom de l'attibut au choix).
     *    o [Obligatoire] La durée (en ms) entre deux changements d'images (attribut "period").
     *    o [facultatif] Un drapeau pour activer le mode aléatoire (attribut "rand").
     *
     * Ex: <ul trombi="canvas4,canvas5" period="3000">...</ul>
     *
     * Chaque trombinoscope contient une liste d'images.
     * Une image est définie par un item (<li>) de la liste non ordonnée qui représente le trombinoscope.
     * Chaque image définit les propriétés suivantes :
     *    o [Obligatoire] Le lien vers la source de l'image (attribut "img").
     *    o [facultatif] Un lien qui sera ouvert lorsque l'utilisateur cliquera sur l'image (attribut "href").
     *
     * Ex: <li img="images/im1.png" href="http://google.com"></li>
     *
     * Un "canvas" est une division (<div>) dans laquelle est affichée une image.
     * L'ID du canvas est représenté par l'attribut "id".
     * Le "canvas" peut contenir plusieurs images, mais *une seule* sera affectée au trombinoscope.
     * L'image affectée au trombinoscope est repérée par l'attribut "canvas".
     * 
     * Ex:  <div id="canvas1" class="span-3 ">
     *          <img width="1" height="96" src="images/left.png"/>
     *          <img canvas="yes" width="96" height="96"/>
     *      </div>
     *
     * @example 
     *
     *      <script language="javascript">
     *      $(function() { $('[trombi]').trombino(); });
     *      </script>
     *
     *      <div id="canvas1" class="span-3 ">
     *          <img width="1" height="96" src="images/left.png"/>
     *          <img canvas="yes" width="96" height="96"/>
     *      </div>
     *
     *      <div id="canvas2" class="span-3">
     *          <img width="1" height="96" src="images/left.png"/>
     *          <img canvas="yes" width="96" height="96"/>
     *      </div>
     *
     *      <div id="canvas3" class="span-3 last">
     *          <img width="1" height="96" src="images/left.png"/>
     *          <img canvas="yes" width="96" height="96"/>
     *      </div>
     *
     *      <hr class="space"/>
     *
     *      <div id="canvas4" class="span-3 ">
     *          <img width="1" height="96" src="images/left.png"/>
     *      </div>
     *
     *      <div id="canvas5" class="span-3 last">
     *          <img width="1" height="96" src="images/left.png"/>
     *          <img canvas="yes" width="96" height="96"/>
     *      </div>
     *
     *      <ul trombi="canvas1,canvas2,canvas3" period="5000" [rand="yes"]>
     *          <li img="images/im1.png" href="http://google.com">Mon text 1</li>
     *          <li img="images/im2.png" href="http://google.com">Mon text 2</li>
     *          <li img="images/im3.png" href="http://google.com">Mon text 3</li>
     *          <li img="images/im4.png" href="http://google.com">Mon text 4</li>
     *          <li img="images/im5.png" href="http://google.com">Mon text 5</li>
     *          <li img="images/im6.png" href="http://google.com">Mon text 6</li>
     *          <li img="images/im7.png" href="http://google.com">Mon text 7</li>
     *          <li img="images/im8.png" href="http://google.com">Mon text 8</li>
     *      </ul>
     *
     *      <ul trombi="canvas4,canvas5" period="3000">
     *          <li img="images/im1.png">Mon text 1</li>
     *          <li img="images/im2.png">Mon text 2</li>
     *          <li img="images/im3.png">Mon text 3</li>
     *          <li img="images/im4.png">Mon text 4</li>
     *      </ul>
     */

    $.fn.trombino = function()
    {
        // http://farinspace.com/jquery-image-preload-plugin/
        if(! $.imgpreload) { alert('trombino: Could not load JQuery plugin "imgpreload.js"!'); return; }
		
        if (0 == $(this).length) { return; }
        var all = $(this);
		
        // Quel est l'attribut qui représente les trombinoscopes?
        // CF questions sur l'URL: http://api.jquery.com/selector/
        var trombinoAttribut = this.selector;
        trombinoAttribut = trombinoAttribut.replace(/^\[/, '');
        trombinoAttribut = trombinoAttribut.replace(/\]$/, '');

        // On établit la liste de toutes les images à utiliser.
        var allImages     = { };
        var allImagesList = new Array();
        for (i=0; i<$(this).length; i++)
        {
            // "Loop closure": http://trephine.org/t/index.php?title=JavaScript_loop_closures
            var f = function(configContainerElement)
            {
                var images = trombinoGetImages(configContainerElement);
				
                for (j=0; j<images.length; j++)
                {
                    var src = images[j]['img'];
                    if (! allImages.hasOwnProperty(src))
                    {
                        allImages[src] = 1;
                        allImagesList.push(src);
                    }
                }
            };
            f($(this).eq(i))
        }
	
        // On pré-charge les images.
        $.imgpreload(allImagesList,
        {
            each: null,
            all: function()
            {
                // http://www.toutjavascript.com/reference/reference.php?iref=179
                for (var i=0; i<this.length; i++) { $('body').append('<img src="' + this[i].src + '" style="display:none;"/>'); }
                runTrombino(all, trombinoAttribut);
            }
        });
    }
     
    /**
     * Cette fonction construit le trombinoscope et amorce le mécanisme de remplacement périodique des images.
     * @param inConfigContainers Liste des éléments du DOM qui représentent les trombinoscopes (<ul>).
     * @param inTrombinoAttribut Valeur de l'attribut qui sert à distinguer les trombinoscopes parmi tous les élements du document.
     *        Cette valeur sert de sélecteur JQuery pour l'exécution du greffon ($(function() { $('[trombi]').trombino(); }););
     */
     
    function runTrombino(inConfigContainers, inTrombinoAttribut)
    {
        // alert(document.images.length);
        if (0 == inConfigContainers.length) { return; }
        for (i=0; i<inConfigContainers.length; i++)
        {
            // "Loop closure": http://trephine.org/t/index.php?title=JavaScript_loop_closures
            var f = function(configContainerElement)
            {
                var period = parseInt(configContainerElement.attr('period'));
				
                // On fait disparaître le conteneur de configuration.
                // On initialise les variables de contexte.
                // var configContainerName = 'trombino' + i;
                configContainerElement.css('display', 'none');
                configContainerElement.attr('currentImage', 0);
                configContainerElement.attr('currentCanvas', 0);
				
                // On affiche les images des canves associés.
                var images       = trombinoGetImages(configContainerElement);                     	// Liste des images.
                var imagesNumber = images.length;                                            		// Nombre d'images.
                var canvas       = trombinoGetCanvas(configContainerElement, inTrombinoAttribut); 	// Liste des canvas.
                var canvasNumber = canvas.length;                                            		// Nombre de canvas.
                if (0 == canvasNumber) { alert('trombinoEventHandler: No canvas found!'); }
                for (var j=0; j<canvasNumber; j++)
                {
                    var selector = '#' + canvas[j] + ' img[canvas=yes]';
                    var img = $(selector);
                    if (0 == img.length) { alert('trombinoEventHandler: Can not find image! ' + selector); return; }
                    img.attr('src', images[j]['img']);
					
                    if (undefined != images[j]['href'])
                    {
                        img.css('cursor', 'pointer');
                        img.click(function(){ window.open(images[j]['href']); return false; });
                    }
                }
				
                // http://klevo.sk/javascript/javascripts-settimeout-and-how-to-use-it-with-your-methods/#comment-4449
                window.setTimeout( function() { trombinoEventHandler(configContainerElement, inTrombinoAttribut, period ); }, 50, 'JavaScript');
            };
            f(inConfigContainers.eq(i))
        }
    }
	
	/**
     * Cette fonction est exécutée périodiquement. Elle est responsable du changement des images au sein d'un trombinoscope.
     * @param Éléments du DOM qui représente le trombinoscope (<ul>) sur lequel on change une image.
     * @param inTrombinoAttribut inTrombinoAttribut Valeur de l'attribut qui sert à distinguer les trombinoscopes parmi tous les élements du document.
     *        Cette valeur sert de sélecteur JQuery pour l'exécution du greffon ($(function() { $('[trombi]').trombino(); }););
     * @param Durée (en ms) entre deux exécutions de la fonction.
     */
    
    function trombinoEventHandler(inConfigContainer, inTrombinoAttribut, inPeriod)
    {
        // Le mode aléatoire d'affichage des images est-il activé?
        var rand = inConfigContainer.attr('rand');
        if (undefined == rand) { rand = false; }
        else { rand = rand == 'yes' ? true : false; }
    	
        var currentImage    = parseInt(inConfigContainer.attr('currentImage'));         // Index courant (dans la liste des images).
        var images          = trombinoGetImages(inConfigContainer);                     // Liste des images.
        var imagesNumber    = images.length;                                            // Nombre d'images.
        var canvas          = trombinoGetCanvas(inConfigContainer, inTrombinoAttribut); // Liste des canvas.
        var canvasNumber    = canvas.length;                                            // Nombre de canvas.

        // Index courant (dans la liste des canvas du tormbino).
        var currentCanvas = rand ? Math.floor(Math.random()*canvasNumber) : parseInt(inConfigContainer.attr('currentCanvas'));
		
        // http://api.jquery.com/descendant-selector/
        var img = $('#' + canvas[currentCanvas] + ' img[canvas=yes]');
        if (0 == img.length) { alert('trombinoEventHandler: Can not find image!'); return; }
		
        // On supprime l'association sur l'évènement "click".
        // Cette action est indispensable, sinon les gestionnaires d'évènement vont "s'empiler".
        img.unbind('click');
		
        // On change d'image.
        // L'animation ci-dessous ne change pas la valeur de la propriété "display" de l'image.
        // L'image ne "disparaît" pas du document. Il n'est pas nécessaire de "fixer" la taille du cadre.
        img.animate({'opacity':0}, 500, function() { img.attr('src', images[currentImage]['img']).fadeIn(1000); }).animate({'opacity':1}, 500);

        //  Si un lien est défini pour cette image, alors on crée le lien.
        if (undefined != images[currentImage]['href'])
        {
            img.css('cursor', 'pointer');
            img.click(function(){ window.open(images[currentImage]['href']); return false; });
        }
        
        // On passe à l'image suivante, et au canvas suivant.
        currentImage  = currentImage+1  >= imagesNumber? 0: currentImage+1;
        currentCanvas = currentCanvas+1 >= canvasNumber? 0: currentCanvas+1;
        inConfigContainer.attr('currentImage',  currentImage);
        inConfigContainer.attr('currentCanvas', currentCanvas);
		
        // On réarme l'horloge pour déclencher une nouvelle exécution de la fonction.
        window.setTimeout( function() { trombinoEventHandler(inConfigContainer, inTrombinoAttribut, inPeriod); }, inPeriod, 'JavaScript' );
    }
    
    /**
     * Cette fonction retourne un tableau qui contient les informations relatives à toutes les images d'un trombinoscope.
     * @param inConfigContainer Éléments du DOM qui représente le trombinoscope (<ul>) pour lequel on désire extraire la liste des images.
     * @return La fonction retourne un tableau d'objets. Chaque objet présente les attributs suivants :
     *         o img: Lien vers la source de l'image.
     *         o href: Lien associé à un click sur l'image. Cet attribut peut prendre la valeur "undefined".
     *         o text: Du code HTML associé à l'image.
     */
    
    function trombinoGetImages(inConfigContainer)
    {
        var images = new Array();
	
        var list = inConfigContainer.children('li');
		
        if (0 == list.length) { alert("trombinoGetImages: Can not find the list of images."); }
        for (j=0; j<list.length; j++)
        {
            var item = list.eq(j);
            var href = item.attr('href'); // Cet attribut est facultatif. La valeur de cette variable peut être non définie.
            
            images.push({img:item.attr('img'), text:item.html(), href:href});
        }
        return images;
    }
    
    /**
     * Cette fonction retourne la liste des IDs des "canvas" associés à un trombinoscope.
     * @param inConfigContainer Éléments du DOM qui représente le trombinoscope (<ul>) pour lequel on désire extraire la liste IDs des "canvas".
     * @param inTrombinoAttribut inTrombinoAttribut Valeur de l'attribut qui sert à distinguer les trombinoscopes parmi tous les élements du document.
     *        Cette valeur sert de sélecteur JQuery pour l'exécution du greffon ($(function() { $('[trombi]').trombino(); }););
     */
    
    function trombinoGetCanvas(inConfigContainer, inTrombinoAttribut)
    {
        var list = inConfigContainer.attr(inTrombinoAttribut);
        return list.split(',');
    }

})( jQuery );

Utilisation

Création de la zone d'affichage des images

Une image est affichée dans un "bloc DIV". Ce bloc est identifié par son nom, associé à l'attribut "id". Le code ci-dessous crée trois blocs alignés horizontalement. Chaque bloc est utilisé pour afficher une image.

    <div class="span-5 column"> </div>
    <div class="span-1 column"><img width="1" height="150" src="images/examples/js-trombino-left.png"/></div>
    
    <!-- Zone d'affichage de la première image. -->
    <div class="span-4 column" id="canvas1">
        <img canvas="yes" width="149" height="150" src="images/examples/js-trombino-img1.png"/>
    </div>
    
    <!-- Zone d'affichage de la deuxième image. -->
    <div class="span-4 column" id="canvas2">
        <img canvas="yes" width="149" height="150" src="images/examples/js-trombino-img2.png"/>
    </div>
    
    <!-- Zone d'affichage de la troisième image. -->
    <div class="span-4 column" id="canvas3">
        <img canvas="yes" width="149" height="150" src="images/examples/js-trombino-img3.png"/>
    </div>
    
    <div class="span-6 column last"> </div>

Création du trombinoscope

On associe un trombinoscope à une liste de zones d'affichage (en l'occurrence "canvas1", "canvas2", "canvas3").
On définit la fréquence de remplacement d'une image (ici, on remplace une image par une autre toutes les 1 secondes.
On spécifie que l'on ne désire pas activer le "mode aléatoire". Dans le mode aléatoire, l'image à remplacer est choisie aléatoirement.

Chargement du Javascript et démarrage du trombinoscope

L'utilisation du greffon de trombinoscope nécessite le chargement de l'excellent greffon suivant :

https://github.com/farinspace/jquery.imgpreload

Créer des liens

Ce greffon très simple permet d'appliquer des liens sur des zones du document.

Un lien sur un texte.
Un lien sur un (autre) texte.

Un lien sur une image:

Code du greffon

// Autheur: Denis BEURIVE

(function($)
{
    /**
     * Ce greffon applique à des éléments un lien. Ce lien est matérialisé par le changement du pointeur de souris.
     * @example <img link="http:/google.com" src="/images/google.png" />
     * 
     *			<script  language="javascript">
     *			$('[link]').linker();
     *			</script>
     */

    $.fn.linker = function()
    {
        if (0 == $(this).length) { return; }

        // Quel est l'attribut qui représente les liens?
        // CD questions sur l'URL: http://api.jquery.com/selector/
        var linkAttribut = this.selector;
        linkAttribut = linkAttribut.replace(/^\[/, '');
        linkAttribut = linkAttribut.replace(/\]$/, '');

        for (i=0; i<$(this).length; i++)
        {
            var f = function(inElement)
            {
                // Quel est le lien?
                var link = inElement.attr(linkAttribut);
				
                // On assigne à l'élément un pointeur de souris spécial.
                inElement.css('cursor', 'pointer');
		        
                // On assigne à l'élément un lien.
                inElement.click(function(){ window.open(link); return false; });
            };
            f($(this).eq(i))
        }
    }
})( jQuery );

Utilisation

Pour associer un lien à un élément du document, il suffit d'ajouter à l'élément un attribut dont la valeur pointe vers le lien désiré. Dans le code ci-dessous, nous avons choisi d'utiliser l'attribut "link". Le choix du nom de l'attribut est arbitraire. Ce nom sera utilisé lors de l'activation du code Javascript (le nom de l'attribut sera passé en argument au greffon).

Création de la zone d'affichage des liens

Chargement du Javascript et démarrage

Initialisation de l'API Google pour un site multi-domaine

Il est courant d'associer plusieurs noms de domaines à un même site. Or, les clés d'utilisation de l'API Google sont liées à un seul nom de domaine. Le code ci-dessous permet une initialisation de l'API Google quel que soit le nom de domaine utilisé.

// Autheur: Denis BEURIVE

function initGoogeApi()
{
	var googleApiKeys = new Array();
	googleApiKeys['mon-site.com'] = 'ABQIAAAA-Qri0Xh9bwXT1FTb29hnMRRM07KJyyPVV7FBkBG4AsMiNOs3VRQQQY_hR0TmTyiQhYIg6YP134N10w';
	googleApiKeys['mon-site.org'] = 'ABQIAAAA-Qri0Xh9bwXT1FTb29hnMRTWFMwVesQaxusA4sA7huFv8G0lCxT9b8HZEls8-pX8wQWZAcg5csoHiA';
	googleApiKeys['mon-site.fr']  = 'ABQIAAAA-Qri0Xh9bwXT1FTb29hnMRQRlkWhloZKyd5SxdXfZqwQHZPOZBQuQUYs6qo7Mz6dT3DYvdBR9x_RZA';
	googleApiKeys['mon-site.eu']  = 'ABQIAAAA-Qri0Xh9bwXT1FTb29hnMRSxSswci-l4mhYmTQjwnW1_UmMTyBTlSy0qLOuA9opABYwQ3RWOOnJbhg';
	googleApiKeys['monsite.com']  = 'ABQIAAAA-Qri0Xh9bwXT1FTb29hnMRSZhpGKWNvLRUQ0m88BCek7GneUoRTC8MHfSFNvnXdt98h1f8Zp2cVMIQ';
	googleApiKeys['monsite.org']  = 'ABQIAAAA-Qri0Xh9bwXT1FTb29hnMRTYp1NFijgaes9p8QLKwxVtJomx_BQwDbea3CR3w7zIXoaJcz0_LamGag';
	googleApiKeys['monsite.fr']   = 'ABQIAAAA-Qri0Xh9bwXT1FTb29hnMRSCJtyl3oqxL4Ldn0-knz0wcxwr0BSRXMeBrdg5OUkgdegvfHy_CkREKg';
	googleApiKeys['monsite.eu']   = 'ABQIAAAA-Qri0Xh9bwXT1FTb29hnMRS-7_cDrhSxnC37RAR2pqNkJ4VmrBRfmF3ywnY2QBchYHPgiS-QKH_5Gw';
	googleApiKeys['monsite.net']  = 'ABQIAAAA-Qri0Xh9bwXT1FTb29hnMRTFcO89IHYOhIMGZHCXEZPt4iyOehQWoUMvoYaDloEHjPDxTuq4WCwcVw';
	googleApiKeys['exemple.com']  = 'ABQIAAAA-Qri0Xh9bwXT1FTb29hnMRQS7Uob8cBMVCw7EVtke2s_l__xcxSP0C3PtJd9W4qRFd5qNAkVmI0XfA';

	var loc = document.location.host;
	document.write('<script type=text/javascript src="http://maps.google.com/maps?file=api&v=2&key="'+googleApiKeys[loc]+'"></script>\n'); 
}

Calcul d'un âge, à partir d'une date de naissance

Si vous développer un site communautaire, il peut être intéressant de déporter les calculs des âges de vos membres sur le client.

/**
 * Cette fonction calcule l'âge à partie de la date de naissance. 
 * @author Denis BEURIVE
 * @param inDob Data de naissance sous la forme "YYYY-MM-DD".
 * @return La fonction retourne l'âge. 
 */

function getAge(inDob)
{ 
	var age = 12;
	var today = new Date(); 

	d = inDob.split("-");
	var byr      = parseInt(d[0]); 
	var nowyear  = today.getFullYear();
	var bmth     = parseInt(d[1],10)-1;   // radix 10!
	var bdy      = parseInt(d[2],10);   // radix 10!
	var dim      = daysInMonth(bmth+1,byr);
	var age      = nowyear - byr;
	var nowmonth = today.getMonth();
	var nowday   = today.getDate();
	if (bmth > nowmonth) {age = age - 1}  // next birthday not yet reached
	else if (bmth == nowmonth && nowday < bdy) {age = age - 1}

	return age;
}

function daysInMonth(month,year)
{
	var dd = new Date(year, month, 0);
	return dd.getDate();
}

Sliders

Code du greffon

/**
 * This file implements sliders.
 * @author Denis BEURIVE
 * @warning Ce code a fait l'objet d'un dépôt de droit d'auteur auprès de l'INPI.
 */

(function($)
{
    /**
     * This function is an event handler. It is executed each time the user requests a new slide.
     * @param inEvent Event object, thrown by JQuery.
     *        This object contains the following properties:
     *        o panel: The element that represents the frame around the sliders.
     *        o sens: This property defined wether the user wants to show the previous or the next element.
     *          Possible value: "next" or "prev".
     *        o options: List of options for this slider.
     * @Note The solution below has been implemented, but it is not used anymore, since the "mutex solution" is simpler.
     *       It is possible to deactivate the event handler, in the event handler:
     *       inEvent.data.button.unbind(inEvent);
     *
     *       To reactivate it after the animation:
     *       var inButton = inEvent.data.button; // It is necessary to pass the element that represents the button.
     *       var terminationCallback = function() { inButton.bind('click', { panel:inPanel, direction:inDir, sens:inSens, decal:inDecal, button:inButton }, function(event) { slide(event); } ); };
     *       var options = { 'duration':'slow', 'complete':terminationCallback };
     *       slidingTable.animate(properties, options);
     *       slidingTable.effect("bounce", { times:1, direction:bounceDirection, distance:15 }, 300, terminationCallback);
     */
    
    function sliderEventHandler(inEvent)
    {
        // The frame around the sliders.
        var panel = inEvent.data.panel;
        // Sens: 'next' (slide left or slide down) or 'prev' (slide right or slide up).
        var sens = inEvent.data.sens;
        // Options.
        var options = inEvent.data.options;
        
        // Shall we continue?
        if (1 == parseInt(panel.attr('mutex'))) { return; }
        panel.attr('mutex', '1');
        
        // Configuration for the various effects.
        var configs =    {
                            'horizontal':    {
                                                direction: 'left', // Used for sliding effect
                                                next: 'right',     // Used for bouncing effect
                                                prev: 'left'       // Used for bouncing effect
                                            },
                            'vertical':        {                
                                                direction: 'top',  // Used for sliding effect
                                                next: 'down',      // Used for bouncing effect
                                                prev: 'up'         // Used for bouncing effect
                                            }
                        };
        
        // Element that will slide.
        var slidingWrapper = panel.children('div');
        // Name of the CSS property to play with while sliding.
        var slideDirection = configs[options['direction']]['direction'];
        // Number of pixels to slide.
        var decal = 'horizontal' == options['direction'] ? panel.width() : panel.height();
        
        // DEBUG 
        // console.debug("Déplacement de " + decal + 'px' + ' sur ' + panel.width() + 'x' + panel.height());
        // console.debug("Fenêtre glissante: " + slidingWrapper.width() + 'x' + slidingWrapper.height())
        
        // If we reach the limit, in which direction do we bounce?
        var bounceDirection = configs[options['direction']][sens];
        // Function to execute while the animation is over.
        var terminationCallback = function() { panel.attr('mutex', '0'); };
        // Maximum allowed distance for the slide.
        var max = 'horizontal' == options['direction']  ? slidingWrapper.attr('maxLeft') : slidingWrapper.attr('maxTop');
        // Current distance.
        var current = 'horizontal' == options['direction'] ? slidingWrapper.css('left') : slidingWrapper.css('top');

        // DEBUG
        // console.debug("Courant: " + current + ' / Max: ' + max);
        
        // Perform the animation.
        // At the end: re-bind the event to the button.
        if (sens == 'next')
        {
            if (current != max) 
            {
                var animationProperties = {};
                var animationOptions = { 'duration':'slow', 'complete':terminationCallback };
                animationProperties[slideDirection] = '-=' + decal + 'px';
                slidingWrapper.animate(animationProperties, animationOptions);
            }    else { slidingWrapper.effect("bounce", { times:2, direction:bounceDirection, distance:15 }, 300, terminationCallback); }
        }
        else
        {
            if (current != '0px') 
            {
                var animationProperties = {};
                var animationOptions = { 'duration':'slow', 'complete':terminationCallback };
                animationProperties[slideDirection] = '+=' + decal + 'px';
                slidingWrapper.animate(animationProperties, animationOptions);
            }    else { slidingWrapper.effect("bounce", { times:2, direction:bounceDirection, distance:15 }, 300, terminationCallback); }
        }
    }
    
    /**
     * This function is the entry point for the current plugin.
     * @note The slides are made of tables (<table></table>).
     *       In case of an error, make sure to check the CSS properties for the table and for its columns.
     *       CSS properties to check are:
     *       + border-collapse (table only)
     *       + border-width (table and column)
     *       + border-style (table and column)
     *       + padding (table and column)
     *       + margin (table and column)
     */
    
    $.fn.slider = function()
    {
        if (0 == $(this).length) { return; }

        // Which attribute represents sliders?
        var sliderAttribut = this.selector;
        sliderAttribut = sliderAttribut.replace(/^\[/, '');
        sliderAttribut = sliderAttribut.replace(/\]$/, '');

        // Create all sliders returned by the JQuery's selector.
        for (i=0; i<$(this).length; i++)
        {
            var f = function(panel)
            {
                // Name of the current slider.
                var panelName = panel.attr(sliderAttribut);
                
                // List of slides associated with the current slider.
                var list = panel.children('ul');
                var items = list.children('li');
                
                // Set options.
                var options = { direction: 'vertical' };
                var direction = panel.attr('direction');
                if (undefined != direction) { options['direction'] = direction; }

                // Set overflow property, so that sliders dont't "escape".
                panel.css('overflow', 'hidden');
                var panelWidth = panel.width();
                var panelHeight = panel.height();
                // console.debug("Largeur de la zone d'affichage: " + panelWidth + 'px');
                // console.debug("Hauteur de la zone d'affichage: " + panelHeight + 'px');
                
                // Create sliding table.
                // Note: The following CSS properties are very important.
                var table = $('<table></table>');
                table.css('border-width', '0px');
                table.css('border-style', 'none');
                table.css('border-collapse', 'collapse');
                table.css('padding', '0px');
                table.css('margin',  '0px');
                table.css('width', panelWidth + 'px');
                
                // Create all columns
                var columns = new Array();
                for (j=0; j<items.length; j++)
                {
                    var div = $('<div>' + items.eq(j).html() + '</div>');
                    div.css('overflow', 'hidden');
                    div.css('width', panelWidth + 'px');
                    div.css('height', panelHeight + 'px');
                    div.css('border-width', '0px');
                    div.css('border-style', 'none');
                    div.css('padding', '0px');
                    div.css('margin',  '0px');
                    
                    // Note: The following CSS properties are very important.
                    var td = $('<td></td>');
                    td.css('padding', '0px');
                    td.css('margin',  '0px');
                    td.css('border-style', 'none');
                    td.css('border-width', '0px');
                    td.html(div);
                    
                    // DEBUG
                    // console.debug('Largeur de la division interne: ' + div.width());
                    // console.debug('Largeur de la colonne interne: ' + td.width());
                    
                    columns.push(td);
                }

                // Create the wrapper (for IE only!).
                var wrapper = $('<div></div>');
                wrapper.css('padding', '0px');
                wrapper.css('margin',  '0px');
                wrapper.css('position', 'relative');
                wrapper.css('top', '0px');
                wrapper.css('left', '0px');
                
                // Set local properties that will be used into the event handler.
                wrapper.attr('maxLeft', ((items.length - 1) == 0 ? '' : '-') + panelWidth  * (items.length - 1) + 'px');
                wrapper.attr('maxTop',  ((items.length - 1) == 0 ? '' : '-') + panelHeight * (items.length - 1) + 'px');
                wrapper.attr('mutext', '0');

                // We create row(s).
                if (options['direction'] == 'horizontal')
                {
                    var row = $('<tr></tr>');
                    for (col in columns) { row.append(columns[col]); }
                    table.append(row);
                    wrapper.width(items.length * panelWidth);
                    wrapper.height(panelHeight);
                }
                else
                {
                    for (col in columns) { table.append($('<tr></tr>').append(columns[col])); }
                    wrapper.width(panelWidth);
                    wrapper.height(items.length * panelHeight);
                }
                wrapper.append(table);
                
                // DEBUG
                // console.debug("Largeur du tableau inséré dans la zone d'affichage: " + table.width() + 'px');
                // console.debug("border-collapse: " + table.css('border-collapse'));
                // console.debug("Largeur de l'englobant: " + wrapper.width() + 'px');
                
                // We delete the original list, used to define the slides.
                list.remove();
                
                // We add the new table to the panel.
                panel.append(wrapper);
                
                // We assign the event handler on the "previous / next" elements.
                $('#' + panelName + 'Next').bind('click', { panel:panel, options:options, sens:'next' }, function(event) { sliderEventHandler(event); } );
                $('#' + panelName + 'Prev').bind('click', { panel:panel, options:options, sens:'prev' }, function(event) { sliderEventHandler(event); } );
            }
            f($(this).eq(i));
        }
    }

})( jQuery );

Démonstration

Note: Les liens "précédent" et "suivant" peuvent être remplacés par des images, des boutons... Ces liens peuvent être disposés n'importe où sur le document.

Création des zones de défilement

Les diapositives sont définies dans une liste non indexée.

Les contrôles de défilement sont identifiés par leur ID, construit à partir de l'ID de la zone de défilement des diapositives. Si "IZ" est l'ID de la zone de défilement des diapositivesn alors :

ID du contrôle pour afficher les diapositives suivantes : "IZNext"
ID du contrôle pour afficher les diapositives précédentes : "IZPrev"

La direction de défilement est définie par la valeur de l'attribut "direction".

direction="horizontal": Défilement horizontal
direction="vertical": Défilement vertival

Première zone : défilement horizontal

    <!-- Zone de commande de défilement -->
    <div class="span-3"> </div>
    <div class="span-9" style="text-align : left;"><a id="firstSliderPrev" href="#" onClick="return false;">Précédent</a></div>
    <div class="span-9" style="text-align : right;"><a id="firstSliderNext" href="#" onClick="return false;">Suivant</a></div>
    <div class="span-3 last"> </div>
    <!-- Fin de la zone de commande de défilement -->
    
    <hr class="space"/>
    
    <!-- Zone de défilement -->
    <div class="span-3"> </div>
    <div class="span-18" style="background:#F6FFB2; height:96px;" direction="horizontal" id="firstSlider" slider="firstSlider">
        <ul>
            <li>
                <img src="images/examples/firefox.png" />
            </li>
            <li>
                <img src="images/examples/safari.png" />
            </li>
            <li>
                <img src="images/examples/chrome.png" />
            </li>
        </ul>
    </div>
    <div class="span-3 last"> </div>
    <!-- Fin de la zone de défilement -->

Seconde zone : défilement vertical

    <!-- Zone de commande de défilement -->
    <div class="span-3"> </div>
    <div class="span-9" style="text-align : left;"><a id="secondSliderPrev" href="#" onClick="return false;">Précédent</a></div>
    <div class="span-9" style="text-align : right;"><a id="secondSliderNext" href="#" onClick="return false;">Suivant</a></div>
    <div class="span-3 last"> </div>
    <!-- Fin de la zone de commande de défilement -->
    
    <hr class="space"/>
    
    <!-- Zone de défilement -->
    <div class="span-3"> </div>
    <div class="span-18" style="background:#F6FFB2; height:96px;" direction="vertical" id="secondSlider" slider="secondSlider">
        <ul>
            <li>
                <img src="images/examples/firefox.png" />
            </li>
            <li>
                <img src="images/examples/safari.png" />
            </li>
            <li>
                <img src="images/examples/chrome.png" />
            </li>
        </ul>
    </div>
    <div class="span-3 last"> </div>
    <!-- Fin de la zone de défilement -->

Chargement du Javascript et démarrage

    <!-- Chargement des feuilles de style (CSS) pour JQuery-UI.
         Note : Cette action n'est pas indispensable pour l'utilisation du greffon. Autrement dit, pour cet exemple, il est possible de passer cette étape.
         Note : Le chemin vers le fichier "jquery-ui-1.8.16.custom.css" dépend de votre environnement.
      -->
    <link href="css/jquery-ui/jquery-ui-1.8.16.custom.css" media="screen" rel="stylesheet" type="text/css" >

    <!-- Chargement de JQuery-UI et de JQuery. -->
    <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>

    <!-- Chargement du greffon responsable de la création des zones de défilement. -->
    <script type="text/javascript" src="js/slider.js"></script>

    <!-- Création des zones de défilement. -->
    <script type="text/javascript">
        $(function() { $("[slider]").slider(); });
    </script>

Note: Le sélecteur JQuery ("[slider]", en l'occurrence) est déterminé en fonction des noms des attributs associés aux zones de défilement des diapositives. Dans cet exemple, les deux zones de défilement se voient attribuer le même attribut ("slider", en l'occurrence). Ceci n'est pas une obligation. Il est possible d'attribuer des attributs différents. Dans ce cas, la méthode devra être appelée autant de fois qu'il y a d'attributs différents.