IdentifiantMot de passe
Mot de passe oublié ?Je m'inscris ! (gratuit)

Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

Galerie CSS3 au clic sans JavaScript
Un tutoriel de NoSmoking

Le , par NoSmoking
7 commentaires

17PARTAGES

6  0 
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
Vous avez lu gratuitement 53 articles depuis plus d'un an.
Soutenez le club developpez.com en souscrivant un abonnement pour que nous puissions continuer à vous proposer des publications.

Une erreur dans cette actualité ? Signalez-nous-la !

7 commentaires
Commenter Signaler un problème
Avatar de
https://www.developpez.com
Le 22/07/2013 à 17:44
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.
1  0 
Muchos
Avatar de Muchos
Membre expert https://www.developpez.com
Le 22/07/2013 à 2:51
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 !
0  0 
rodolphebrd
Avatar de rodolphebrd
Expert confirmé https://www.developpez.com
Le 22/07/2013 à 8:48
Super article
0  0 
SylvainPV
Avatar de SylvainPV
Rédacteur/Modérateur https://www.developpez.com
Le 23/07/2013 à 10:16
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 
:checked + div:after { content: url('image.jpg') }

à tester pour voir le comportement des navigateurs...
0  0 
rodolphebrd
Avatar de rodolphebrd
Expert confirmé https://www.developpez.com
Le 23/07/2013 à 10:21
:before et :after sont plutôt des pseudo-éléments.
0  0 
Torgar
Avatar de Torgar
Rédacteur https://www.developpez.com
Le 23/07/2013 à 11:27
Merci pour ce bel article. Le rendu est nickel

Edit : @jreaux62 : tu utilises quel navigateur sous Android ?
0  0 
NoSmoking
Avatar de NoSmoking
Modérateur https://www.developpez.com
Le 24/07/2013 à 0:01
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.
0  0 
Commenter Signaler un problème