Les galeries et sliders en Javascript et css3

Lors de notre précédent article consacré au html5 et à flash, nous faisions très largement hommage à l’utilisation de ce dernier pour diverses animations. Outre les effets de mouvements et de manipulations des éléments de pages, nous aurions pu faire référence à ce qui s’est particulièrement démocratisé dans le contexte de présentations d’images : les galeries et sliders. Une nouvelle fois, grâce aux différents frameworks (librairies de fonctions) javascript, les développeurs du web entier ont pu à loisir reproduir ces effets initialement apparus à l’aide flash.

Ce mode de présentation est du reste tellement pratique et ergonomique qu’il n’est plus seulement utilisé pour faire défiler des images mais aussi des contenus textuels.

Du coup, on est parti des diaporamas à la mode diapositive de nos grand parents (simple succession d’images) à des manipulations très originales.

Citons par exemple le plugin Jquery Photostack :

Photostack utilisant jQuery et CSS3

Démo : http://tympanus.net/Tutorials/PhotoStack/
Téléchargement du plugin : photoStack

On y retrouve toute l’ambiance d’une série de photos posées devant soi sur une table et que l’on consulte tour à tour en faisant passer celle de devant derrière les autres.

Dans un autre article, nous vous parlions de l’effet parallaxe. Voici Parallax Slider qui le met en pratique dans le contexte d’un diaporama.

Parallax slider utilisant JQuery

Démo : http://tympanus.net/Tutorials/ParallaxSlider/
Téléchargement du plugin : parallaxSlider

ResponsiveSlides entre lui dans la logique du responsive webdesign.

Nous aurons la possibilité (voir la liste ci-dessous) de parcourir de nombreuses solutions de mises en forme imaginées par des web designers et développeurs.

Parlons maintenant de Minimit Gallery, un plugin qui rassemble de nombreuses variétés de galeries, carrousel d’images, accordéons,…

Plugin jQuery utilisant Minimit Gallery

Comme toujours l’implémentation est particulièrement aisée :
(Traduction de la documentation)

1/ Intégration des ressources externes
Minimit utilise le plugin jQuery. Mais nous intégrons également les fonctions easing d’accélération car certaines animations de la galerie nécessiteront d’y faire appel.

2/ On positionne l’ensemble des médias dans des divs

<div id="contenu">
<div>
<div id="contenu-prev">Précédent</div>
<div id="contenu-0">0</div>
<div id="contenu-1">1</div>
<div id="contenu-2">2</div>
<div id="contenu-3">3</div>
<div id="contenu-4">4</div>
<div id="contenu-5">5</div>
<div id="contenu-next">Suivant</div>
</div>
</div>

3/ Fonction de rappel
On construit les animations sur les interactions init et sur les différents événements liés à la souris (au clic, au survol,…). Les fonctions de rappel seront appelées par le plugin sur chaque interaction ou changement d’état ​​de la galerie. C’est ce code ouvert qui rend cette galerie Minimit extrêmement flexible.

Exemple :

var reference = "contenu";
this[reference+"_click"] = this[reference+"_init"] = function(reference, activated, deactivated, prevsteps, nextsteps, multiple, cycle){
$("#"+reference+"-"+deactivated).removeClass("active");
$("#"+reference+"-"+activated).addClass("active");
}

4/ On initialise la Gallerie
Exemple :

mg_init({
reference:"contenu",
activated:[0],
click:{
interactive:true,
max_activated:1,
automatic:1000, automaticpause:5000
},
interaction:{
cycle:true
}
});

5/ On construit le Css

Il est possible de personnaliser chaque élément de la galerie.

Pour aller plus loin, voici deux autres plugins de sliders et galeries :

• jQuery Banner Rotator : http://codecanyon.net/item/jquery-banner-rotator-slideshow/full_screen_preview/109046 (payant)
• noobSlide : http://www.efectorelativo.net/laboratory/noobSlide/ (gratuit)
• fotoramajs : http://fotoramajs.com (gratuit)