Lazy Load est un plugin jQuery qui optimise le chargement des pages où il y a beaucoup d’image lourdes. Son principe : charger les images au fur et à mesure que l’utilisateur descend la « scrollbar ». Du coup le travail du navigateur est optimisé et cela permet d’afficher des images de très grande tailles sur une seule page.

Son fonctionnement est extrêmement simple, il suffit d’afficher vos images avec des balises HTML « <img> » pis le plugin se charge de tout le reste.

// Ce petit bout de code est suffisant pour mettre en place Lazy Load
$("img").lazyload();

// On peut choisir une image de remplacement en attendant le chargement
$("img").lazyload({ placeholder : "img/grey.gif" });

// Utilisation d'effets de transitions pour les images
$("img").lazyload({
<pre>    placeholder : "img/grey.gif",
    effect : "fadeIn"
});

// Il existe plein d'autres options pour personnaliser ce plugin

Vous trouver une demo ici : http://www.appelsiini.net/projects/lazyload/enabled_fadein.html
Le site officiel du plugin avec la documentation : http://www.appelsiini.net/projects/lazyload

jqDialog : boites de dialogues avec jQuery

Dans une application Web, on a souvent besoin d’afficher des petites informations comme des notifications, ou encore demandez des confirmations ou des mini-formulaires. Dans une application bureau, on utiliserait des boites de dialogues.

jqDialog permet de répondre à cette problématique, ce plugin jQuery propose en effet de propulser rapidement et simplement des boites de dialogues pour des utilisations diverses.

Le plugin est téléchargeable sur le site de jQuery : http://plugins.jquery.com/project/jqDialog

Ses utilisations multiples correspondent à des méthodes bien précises sur le plugin, par exemple pour afficher une simple  notification :

 jqDialog.notify("This dialog will disappear in 3 seconds", 3);

Pour afficher une alerte, on a également une méthode appropriée :

jqDialog.alert("This is a non intrusive alert",
    function() { // callback function for 'OK' button
        alert("This intrusive alert says you clicked OK");
    }
);

Pour faire une simple demande de confirmation pour une suppression par exemple, pas besoin de générer du HTML :

jqDialog.confirm("Are you sure want to click either of these buttons?",
    function() { alert("This intrusive alert says you clicked YES"); }, // callback function for 'YES' button
    function() { alert("This intrusive alert says you clicked NO"); } // callback function for 'NO' button
);

Ou bien on peut y passer du contenu HTML pour créer un formulaire en ajax par exemple :

jqDialog.content('No dialog controls, just custom content
');

Des exemples sont disponibles à l’adresse suivante : http://kailashnadh.name/code/jqdialog/ .

gallerific : gallerie photos jQuery

Gallerific est un plugin jQuery pour générer une gallerie de photos très puissante. Il possède un grand nombre de paramètres et il est très facile à mettre en place.

Vous pouvez le télécharger à l’adresse suivante : http://www.twospy.com/galleriffic/

Dans un premier temps, on insère le script de jQuery et le plugin :

Ensuite, on définit les calques nécessaires à l’affichage des miniatures et des images :

        
            
        

            (Any html can go here)


... (repeat for every image in the gallery)

et enfin on insère le javascript à paramétrer (on pourra également définir le nombre d’image à précharger pour gagner du temps) :

$(document).ready(function() {
    var gallery = $('#gallery').galleriffic('#thumbs', {
        delay:                  3000, // in milliseconds
        numThumbs:              20, // The number of thumbnails to show page
        preloadAhead:           40, // Set to -1 to preload all images
        enableTopPager:         false,
        enableBottomPager:      true,
        imageContainerSel:      '', // The CSS selector for the element within which the main slideshow image should be rendered
        controlsContainerSel:   '', // The CSS selector for the element within which the slideshow controls should be rendered
        captionContainerSel:    '', // The CSS selector for the element within which the captions should be rendered
        loadingContainerSel:    '', // The CSS selector for the element within which should be shown when an image is loading
        renderSSControls:       true, // Specifies whether the slideshow's Play and Pause links should be rendered
        renderNavControls:      true, // Specifies whether the slideshow's Next and Previous links should be rendered
        playLinkText:           'Play',
        pauseLinkText:          'Pause',
        prevLinkText:           'Previous',
        nextLinkText:           'Next',
        nextPageLinkText:       'Next ›',
        prevPageLinkText:       '‹ Prev',
        enableHistory:          false, // Specifies whether the url's hash and the browser's history cache should update when the current slideshow image changes
        autoStart:              false, // Specifies whether the slideshow should be playing or paused when the page first loads
        onChange:               undefined, // accepts a delegate like such: function(prevIndex, nextIndex) { ... }
        onTransitionOut:        undefined, // accepts a delegate like such: function(callback) { ... }
        onTransitionIn:         undefined, // accepts a delegate like such: function() { ... }
        onPageTransitionOut:    undefined, // accepts a delegate like such: function(callback) { ... }
        onPageTransitionIn:     undefined  // accepts a delegate like such: function() { ... }
    });
});