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.

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

1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"><!–mce:0–></script>
2. <script src="js/jquery.galleriffic.js" type="text/javascript"><!–mce:1–></script>

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

1. <div id="thumbs">
2. <ul class="thumbs noscript">
3.         <li>
4.         <a class="thumb" title="your image title" href="path/to/slide">
5.             <img src="path/to/thumbnail" alt="your image title again for graceful degradation" />
6.         </a>
7. <div class="caption">
8.             (Any html can go here)</div></li>
9. … (repeat for every image in the gallery)</ul>
10. </div>

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

1. $(document).ready(function() {
2.     var gallery = $(‘#gallery’).galleriffic(‘#thumbs’, {
3.         delay:                  3000, // in milliseconds
4.         numThumbs:              20, // The number of thumbnails to show page
5.         preloadAhead:           40, // Set to -1 to preload all images
6.         enableTopPager:         false,
7.         enableBottomPager:      true,
8.         imageContainerSel:       », // The CSS selector for the element within which the main slideshow image should be rendered
9.         controlsContainerSel:    », // The CSS selector for the element within which the slideshow controls should be rendered
10.         captionContainerSel:     », // The CSS selector for the element within which the captions should be rendered
11.         loadingContainerSel:     », // The CSS selector for the element within which should be shown when an image is loading
12.         renderSSControls:       true, // Specifies whether the slideshow’s Play and Pause links should be rendered
13.         renderNavControls:      true, // Specifies whether the slideshow’s Next and Previous links should be rendered
14.         playLinkText:           ‘Play’,
15.         pauseLinkText:          ‘Pause’,
16.         prevLinkText:           ‘Previous’,
17.         nextLinkText:           ‘Next’,
18.         nextPageLinkText:       ‘Next ›’,
19.         prevPageLinkText:       ‘‹ Prev’,
20.         enableHistory:          false, // Specifies whether the url’s hash and the browser’s history cache should update when the current slideshow image changes
21.         autoStart:              false, // Specifies whether the slideshow should be playing or paused when the page first loads
22.         onChange:               undefined, // accepts a delegate like such: function(prevIndex, nextIndex) { … }
23.         onTransitionOut:        undefined, // accepts a delegate like such: function(callback) { … }
24.         onTransitionIn:         undefined, // accepts a delegate like such: function() { … }
25.         onPageTransitionOut:    undefined, // accepts a delegate like such: function(callback) { … }
26.         onPageTransitionIn:     undefined  // accepts a delegate like such: function() { … }
27.     });
28. });