Discussion :

[NoSmoking]

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

[Muchos]

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 !

[rodolphebrd]

Super article

[Invité]

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.

[SylvainPV]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

:checked + div:after { content: url('image.jpg') }

à tester pour voir le comportement des navigateurs...

[rodolphebrd]

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

[Torgar]

Merci pour ce bel article. Le rendu est nickel

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

[NoSmoking]

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.