Gallery.css, une galerie simple et responsive en full CSS

13 mai 2013

Gallery.css est une ressource développée uniquement en HTML/CSS qui permet de réaliser une galerie d’images simple et responsive, avec une seule et unique transition de type « fade » et des ancres de contrôle de navigation, le tout sans la moindre ligne de JS.

[EDIT] : Gallery.css est désormais disponible sous licence payante.

Du HTML, du CSS, mais pas de JS

La galerie fonctionne sans aucune ligne de JavaScript, uniquement avec une mise en page structurée et des propriétés CSS : transitions CSS3, animations CSS3 (keyframe) et sélécteurs CSS avancés (:nth-of-type(), :target,etc). La feuille de style est disponible avec ou sans préfixe CSS (-moz, -webkit, -o) et en version « classique » ou SASS. Un thème CSS est également fourni avec la ressource, thème que vous pouvez bien sûr modifier à votre convenance.

css_gallery

Cela fonctionne avec n’importe quel élément HTML : image, texte, contenu, etc. La configuration de la galerie est tout de même assez « délicate » par rapport à un plugin jQuery : il faut directement éditer la feuille de style et modifier les lignes qui correspondent à telle ou telle fonctionnalité. Cependant, c’est un bon moyen de progresser en CSS, notamment en ce qui concerne les propriétés avancées qui sont encore peu utilisées mais très puissantes.

Mise en place de votre galerie

Il faut simplement inclure les deux fichiers CSS qui nous intéressent, la galerie et le thème.

<link rel="stylesheet" href="css/gallery.theme.css">
<link rel="stylesheet" href="css/gallery.min.css">

Ensuite, on définit la structure HTML de la galerie. Il faut bien respecter la syntaxe : ici nous utilisons la classe items-3 car nous avons 3 slides. La feuille de style contient les différentes classes jusqu’à 5 slides maximum. Au-delà, il vous faudra plonger le nez dans les propriétés CSS pour ajouter le fonctionnement sur davantage de diapositives.

<div class="gallery items-3">
  <div id="item-1" class="control-operator"></div>
  <div id="item-2" class="control-operator"></div>
  <div id="item-3" class="control-operator"></div>

  <figure class="item">
    <h1>1</h1>
  </figure>
  
  <figure class="item">
    <h1>2</h1>
  </figure>
  
  <figure class="item">
    <h1>3</h1>
  </figure>
  
  <div class="controls">
    <a href="#item-1" class="control-button">•</a>
    <a href="#item-2" class="control-button">•</a>
    <a href="#item-3" class="control-button">•</a>
  </div>
</div>

Il existe également une classe CSS autoplay qui permet de mettre la galerie en mode slideshow automatique (7 secondes par défaut). Et le tour est joué !

<div class="gallery autoplay items-3">
...
</div>

Gallery.css est une ressource qui démontre que l’on peut créer de véritables sliders en pure HTML/CSS, certes simples, mais sans avoir recours à des scripts quelconques. Plusieurs créations de ce type ont été développées, je pense notamment à l’excellent slideshow full HTML5/CSS3, conçu par Geoffrey Crofte et Vincent De Oliveira, qui gère parfaitement les transitions de type « slide ».

Requis : Aucun
Compatibilité : Firefox, Chrome, Opera, Safari, IE9+, IE8 (avec fallback JS)
Démonstration : http://benschwarz.github.io/gallery-css/
Licence : MIT

Commentaires

  • Tib

    Sympa pour du CSS, mais ça reste assez limité comparé à du JS surtout pour un slideshow.

  • onCtousQuiC

    « Il faut simplement inclure les deux fichiers CSS qui nous intéressent, la galerie et le thème. »

    Et on le pond le code de ces 2 fichiers ou c’est comment ? -____-

    • Gallery.css est devenu « payant » : ces deux fichiers ne sont plus disponibles gratuitement ce qui était le cas avant.