Galerie CSS3 au clic sans JavaScript

Un tutoriel de NoSmoking

Le 2013-07-21 23:06:17, par NoSmoking, Modérateur

Bonjour,

je vous propose un article Galerie au clic sans JavaScript.

Dans celui-ci nous allons voir comment réaliser une galerie fonctionnant au clic de la souris et ce sans utiliser JavaScript, uniquement sur base de sélecteur et pseudoclasse CSS3.

N'hésitez pas à faire part de vos remarques ou commentaires concernant cet article.

Bonne lecture.

Galerie au clic sans JavaScript

Discussion forum

7 commentaires

Du plus bel effet !
Je crois déjà savoir où m'en servir...

Il faut cependant, je pense, éviter les "grandes galeries" (avec beaucoup de photos) : les images petites et grandes étant chargées d'entrée...

Malheureusement, ne semble pas fonctionner sur mon smartphone (Samsung Galaxy Ace / Android 2.3.6) : la grande photo ne change pas au clic.

le 22/07/2013 à 17:44
Muchos
Membre expert

Excellente idée et excellent rendu !
De plus, il me semble qu'il s'agit d'une utilisation pertinente du couple LABEL/INPUT.
Bravo en tous cas !

le 22/07/2013 à 2:51
rodolphebrd
Expert confirmé

Super article

le 22/07/2013 à 8:48
SylvainPV
Rédacteur/Modérateur
Bien écrit et rendu final très sympa

Pour le problème du chargement soulevé par jreaux62, est-ce que par hasard on ne pourrait pas régler le problème en utilisant les pseudos-attributs before/after ?
Code css :
```
:checked + div:after { content: url('image.jpg') }
```
à tester pour voir le comportement des navigateurs...
le 23/07/2013 à 10:16
rodolphebrd
Expert confirmé

:before et :after sont plutôt des pseudo-éléments.

le 23/07/2013 à 10:21
Torgar
Rédacteur

Merci pour ce bel article. Le rendu est nickel

Edit : @jreaux62 : tu utilises quel navigateur sous Android ?

le 23/07/2013 à 11:27
NoSmoking
Modérateur

pour vos retours.

Je tiens à préciser quand même que le but premier n’était pas de créer une "vraie" galerie mais de montrer l'utilisation de la pseudo-class :selected pour gérer le clic sans javascript, ce que reprend le 1er exemple.

Dans une "vraie" galerie il restera toujours préférable de ne charger que ce qui doit être montré, pas de clic pas de chargement

A l'occasion je regarderais la piste de SylvainPV pour ma gouverne personnelle.

le 24/07/2013 à 0:01

Poster une réponse