derrien.me | blog

StackedGallery, un plugin jQuery qui utilise CSS3

Posté le 9 septembre 2010 dans Développement web

StackedGallery est un plugin jQuery qui permet d’afficher tour à tour des images empilées les unes sur les autres avec un effet de FadeIn / FadeOut. Ce n’est pas clair ? Rien ne vaut une démo. C’est un plugin léger, simple à mettre en œuvre et qui utilise CSS3 (une dégradation élégante pour IE est possible). Il a été développé pour mes propres besoins. Feel free to fork. ;)

Options de configuration

Mise en oeuvre

HTML

Une liste d’images, rien de plus simple :

<ul id="photos">
  <li id="photo-01"><img src="images/photo-01.png" /></li>
  <li id="photo-02"><img src="images/photo-02.png" /></li>
  <li id="photo-03"><img src="images/photo-03.png" /></li>
</ul>

Javascript

Pas de surprise de ce côté là non plus :

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="./stacked-gallery.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('#photos').stackedGallery({ display_duration: 4000, fadeout_duration: 1000, fadein_duration: 200 });
  });
</script>

CSS

On utilise les propriétés CSS3 box-shadow et transform pour obtenir l’effet désiré :

body {
  padding: 0;
  margin: 0;
  background: #ddd;
}
 
ul#photos {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 65px 65px auto;
  padding: 0;
  list-style-type: none;
}
 
ul#photos li {
  position: absolute;
  width: 286px;
  height: 286px;
  border: 7px solid #fff9f9;
  box-shadow: 0 0 5px #aaa;
  -moz-box-shadow: 0 0 5px #aaa;
  -webkit-box-shadow: 0 0 5px #aaa;
}
 
#photo-01 {
  top: -3px;
  left: 8px;
  -o-transform: rotate(5.0deg);
  -moz-transform: rotate(5.0deg);
  -webkit-transform: rotate(5.0deg);
}
#photo-02 {
  -o-transform: rotate(-1.2deg);
  -moz-transform: rotate(-1.2deg);
  -webkit-transform: rotate(-1.2deg);
}
#photo-03 {
  left: 4px;
  -o-transform: rotate(2.2deg);
  -moz-transform: rotate(2.2deg);
  -webkit-transform: rotate(2.2deg);
}

Comme Internet Explorer ne prend pas en charge les propriétés box-shadow et transform, on va mettre en place une dégradation élégante :

ul#photos {
  width: 322px;
  height: 322px;
  background: url('images/bg-ie.png') 0 0 no-repeat;
}
 
ul#photos li {
  top: 11px;
  left: 11px;
}

J’ai également tenté d’obtenir l’effet désiré sous Internet Explorer via des PNG avec transparence alpha. Mais dès que l’on touche à l’opacité de l’image, la couche alpha pose problème, et ce n’est à priori solvable par aucun hack.

Commentaires

Ishiro, le 09 septembre 2010 à 19h15

Note : Sous Opera, dès que j’applique la rotation via -o-transform, le bordure de l’image devient transparente. Un bug ou quelque chose m’échappe ?

Pedro, le 09 septembre 2010 à 19h40

Beau boulot. J’ai en tête d’utiliser un effet comme ça pour mon prochain portfolio (prévu pour 2014 si tout va bien).
Par contre je suis (très) déçu qu’un développeur comme toi utilise cette abomination pour graphiste qu’est jQuery :) Mootools FTW!

Ishiro, le 09 septembre 2010 à 19h55

@Pedo: Héhé, merci !

J’ai rien contre MooTools, peut-être qu’il faudrait que je re-teste. En fait, l’écosystème de plugins autour de jQuery me semble plus vaste, c’est ce qui a guidé mon choix (et j’ai pas l’impression d’utiliser une abomination pour graphiste ;) ).

Sinon, pour 2014, l’avantage c’est qu’il ne devrait plus y avoir besoin de se préoccuper de IE6/7/8 (avec un peu de chance !). Et tu devrais même pouvoir oublier JS et le faire qu’avec des transitions CSS. :D

Pedro, le 10 septembre 2010 à 10h04

« @Pedo » : oh le lapsus :)
De toute façon le choix d’un framework c’est très personnel. J’aime bien Mootools parce que c’est plus orienté objet, avec une syntaxe se rapprochant JS natif, pas de « $.foo » et autre « $(this) ».
jQuery c’est plus procédural, plus adapté aux personnes qui développent pas trop (graphistes intégrateurs), d’où le grand nombre de plugins déjà disponible.
Jolies photos de poney en tout cas :)

Ishiro, le 10 septembre 2010 à 10h44

@PedRo: Oups, désolé pour le lapsus (je vais avoir un référencement de folie… :D ).

Pour le côté procédural de jQuery, j’ai du mal à voir ce que tu veux dire. Pour moi la force de jQuery, c’est justement de manipuler facilement le DOM via des objets et accessoirement de pouvoir chainer facilement les traitements (avec la notation pointée).

Si tu es non-développeur, jQuery doit être plus simple à appréhender que MooTools, justement parce que tu manipules facilement le DOM et qu’il y a une grande quantité de plugin prêts à l’emploi. Au-delà de ça, je ne pense pas que ce soit plus simple.

En fait, comme tu le dis, le choix du framework dépend de tes besoins.

Daibai, le 11 septembre 2010 à 12h52

Très sympa, je vais l’intégrer à un des sites que je suis en train de développer pour remplacer cycle, dont les effets sous Firefox sont plutot moyens.

Merci pour ce travail Ishiro :)

Poster un commentaire