Galerie au clic sans JavaScript

NoSmoking

Même si le JavaScript a encore de beaux jours devant lui en matière d'animation, on peut tout à fait concevoir une galerie fonctionnant au clic de la souris en CSS3.

Nous allons voir comment réaliser une galerie en utilisant, entre autres, la pseudoclasse :checked introduite avec la norme CSS3 et ce sans JavaScript.

Commentez

- Titre : Galerie au clic sans JavaScript

- Auteur : NoSmoking

- Parution : 17 juillet 2013

- Mise à jour : 28 août 2013

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2013 NoSmoking. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Introduction

- II. Sélecteurs et pseudoclasses utilisés

- II-A. Sélecteur d'adjacence

- II-B. Pseudoclasse

- II-C. Exemple d'utilisation

- III. La galerie

- I-A. Mise en place

- I-B. Explications

- IV. On peut faire mieux

- V. Conclusions

- VI. Liens

- VII. Remerciements

I - Introduction

Dans pas mal de galeries en CSS3, il est fait usage de la pseudoclasse :target afin de mettre telle ou telle image en avant.

Cette utilisation présente au moins deux inconvénients :

1. elle peut éventuellement faire scroller la page;

2. elle modifie l'URL et donc ajoute une entrée à l'historique du navigateur.

Nous allons voir une nouvelle approche en utilisant cette fois la pseudoclasse :checked apparue avec le CSS3.

II - Sélecteurs et pseudoclasses utilisés

II-A - Sélecteur d'adjacence

1. Le sélecteur d'adjacence « directe » + (plus), introduit avec la norme CSS 2.1, permet de cibler des éléments frères directement successeurs.

2. Le sélecteur d'adjacence « élargie » ~ (tilde), introduit avec la norme CSS 3, mais déjà reconnu par IE depuis sa version 7, permet de cibler des éléments qui ne sont pas forcément successeurs directs, mais successeurs tout court.

II-B - Pseudoclasse

La pseudoclasse :checked, introduite avec la norme CSS 3, permet de cibler un élément coché.

II-C - Exemple d'utilisation

Le petit exemple suivant montre comment modifier le contenu de la balise <label> associée à la case à cocher en utilisant la pseudoclasse :checked. On en profite également pour afficher/masquer une image.

Le code HTML :

<input type="checkbox" id="id_checkbox" value="oui">
<label for="id_checkbox">Case <span id="span_non">non </span>cochée</label>
<img src="http://www.developpez.net/template/images/logo.png" alt="log DVP">

Le code CSS :

/* style du contenu du label par défaut */
label{
color:#888;
font-style:italic;
}
img{
position:absolute;
top:2em;
right:1em;
display:none;
}
/* modification du style du contenu du label */
:checked +label{
color:#000;
font-style:normal;
font-weight:bold;
}
/* on en profite pour supprimer le non */
:checked +label span{
display:none;
}
/* affichage de l'image */
:checked ~ img{
display:block;
}

Voir la démo en ligne

III - La galerie

I-A - Mise en place

Pour chaque image, nous allons mettre en place une structure simple comme suit :

<div>
<input type="radio" id="check_1" name="check" class="r_check">
<label for="check_1" class="on_check">
<img class="vignette" src="images/s_image_001.jpg" alt="s_image_001.jpg">
</label>
<img class="big_img" src="images/image_001.jpg" alt="">
</div>

Pour cette galerie, nous n'utiliserons pas de champ type="checkbox" mais des champs type="radio" en prenant soin de leur affecter le même name, afin qu'un seul ne soit coché à la fois, mais ayant des identifiants différents.

L'image vignette se trouve dans la balise <label>, ce qui permet d'agir, à travers elle, sur le bouton radio lié grâce à l'attribut for.

Pour finir, on place la « grande » image.

Tout ceci est contenu dans une div, ce qui permet de mieux agencer les vignettes à l'affichage.

Il est à noter que la position des balises a son importance, au moins pour l'image devant apparaître qui doit se trouver après le bouton radio.

Maintenant, associons le style à nos éléments :

.r_check{
/*  display:none; /* si masqué pas d'accès avec les touches */
opacity:0;
position:absolute;
}
.r_check, .on_check{
cursor: pointer;
}
/* dimensions des vignettes */
label img.vignette{
width:100px;
height:75px;
}
.big_image{
position:absolute;
display:block;
width:600px;
top:100px;     /* hauteur du bandeau des vignettes */
left:0;
right:0;
margin:0px auto;
opacity:0;     /* non visible au départ */
}
/* apparition des images */
.r_check:checked ~ .big_image {
opacity:1;
}

I-B - Explications

Pour les champs type="radio", nous préférons les masquer via une opacity:0 afin de pouvoir maintenir la navigation au clavier, même si elle reste imparfaite. On les place en position:absolute afin de ne pas interférer sur l'affichage.

Concernant les images à apparaître, masquées dans un premier temps via une opacity:0, elles sont placées en position:absolute et se positionneront donc par rapport au conteneur référent. Le centrage est assuré par la conjugaison des propriétés left, right et margin associées à une width définie.

La prise en compte de l'apparition des images se fera via le sélecteur d'adjacence ~ (tilde). Ainsi, lorsque le bouton radio sera coché (checked), l'image sera rendue visible via une opacity:1.

Voir la démo en ligne.

IV - On peut faire mieux

Il faut bien avouer que l'exemple est un peu plat.

Ceci est sans compter sur un des apports du CSS3 à savoir les transitions et transformations.

Nous allons agrémenter cette galerie en ajoutant une transition pour l'apparition et la disparition des images, en jouant sur la propriété opacity et en faisant varier sa valeur de 0 à 1 et inversement.

Pour ajouter un petit plus, nous allons utiliser la transformation scale pour faire apparaître l'image en l'agrandissant et disparaître en la réduisant.

Nous obtenons, pour les images apparaissant, le CSS final suivant :

.big_image{
position:absolute;
display:block;
width:600px;
top:100px;
left:0;
right:0;
margin:0 auto;
opacity:0;
border:10px solid #FFF;
box-shadow: 0 2px 8px 2px #666;

-webkit-transform:scale(0.25);
-moz-transform:scale(0.25);
-ms-transform:scale(0.25);
-o-transform:scale(0.25);
transform:scale(0.25);

-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.r_check:checked ~ .big_image {
opacity:1;

-webkit-transform:scale(1);
-moz-transform:scale(1);
-ms-transform:scale(1);
-o-transform:scale(1);
transform:scale(1);
}

Voir la galerie finale.

V - Conclusions

On peut tout à fait imaginer d'autres utilisations de cette méthode comme la réalisation d'un menu à onglets ou encore un système d'affichage dit « accordéon ».

La liste des transformations disponibles étant déjà grande il vous suffit de laisser libre cours à votre imagination.

VI - Liens

Les sélecteurs en CSS3

Les transitions en CSS3

Les transformations en CSS3

Selectors Level 3

VII - Remerciements

Je tiens à remercier ced et ClaudeLELOUP pour leur relecture orthographique ainsi que rodolphebrd pour sa relecture technique.

Je tiens également à remercier Bovino pour son support technique.