Galleriffic : gallerie photos ajax avec jQuery

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() { ... }
    });
});