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

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Publications (X)HTML et CSS Discussion :

Galerie au clic sans JavaScript


Sujet :

Publications (X)HTML et CSS

  1. #1
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 109
    Points
    44 109
    Par défaut Galerie au clic sans JavaScript
    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

  2. #2
    Membre expert
    Avatar de Muchos
    Homme Profil pro
    Enseignant
    Inscrit en
    Décembre 2011
    Messages
    1 700
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Ardennes (Champagne Ardenne)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Décembre 2011
    Messages : 1 700
    Points : 3 849
    Points
    3 849
    Billets dans le blog
    6
    Par défaut
    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 !

  3. #3
    Expert confirmé
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    Novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 336
    Points : 5 443
    Points
    5 443
    Par défaut
    Super article
    Pensez à
    lire les règles du forum effectuer une recherche préalable
    utiliser la balise code (#) éditer votre code sur Codepen, Dabblet, Jsfiddle
    clore votre post avec le bouton

  4. #4
    Invité
    Invité(e)
    Par défaut
    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.

  5. #5
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Points : 9 944
    Points
    9 944
    Par défaut
    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...
    One Web to rule them all

  6. #6
    Expert confirmé
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    Novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 336
    Points : 5 443
    Points
    5 443
    Par défaut
    :before et :after sont plutôt des pseudo-éléments.
    Pensez à
    lire les règles du forum effectuer une recherche préalable
    utiliser la balise code (#) éditer votre code sur Codepen, Dabblet, Jsfiddle
    clore votre post avec le bouton

  7. #7
    Rédacteur

    Avatar de Torgar
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2007
    Messages
    2 334
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Août 2007
    Messages : 2 334
    Points : 8 084
    Points
    8 084
    Par défaut
    Merci pour ce bel article. Le rendu est nickel

    Edit : @jreaux62 : tu utilises quel navigateur sous Android ?
    Je ne suis pas schizophrène, nous sommes unanime !!!

    ► Pensez à la balise code et au CODE HTML GENERE !!!!
    ► Au si c'est le cas et au à ceux qui vous ont aidé.
    Vous souhaitez participer aux rubriques CSS et (X)HTML ? Contactez-nous !

    Créer des colonnes de même hauteur en CSS
    Glossaire CSS
    Les bordures en CSS3
    Les transitions en CSS3

  8. #8
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 109
    Points
    44 109
    Par défaut
    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.

Discussions similaires

  1. [CSS 3] Galerie au clic sans JavaScript
    Par NoSmoking dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 22/07/2013, 18h44

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo