[Résolu] image qui grossissent lorsque l’on passe dessus avec la souris (Créer un compte)

  • WordPress :5.2
  • Statut : résolu
15 sujets de 1 à 15 (sur un total de 18)
  • Auteur
    Messages
  • #2297893
    FORMET
    Participant
    Initié WordPress
    31 contributions

    Bonjour,

    Ma configuration WP actuelle :
    – Version de WordPress : 5.3.2
    – Version de PHP/MySQL : 7.0.33 / 5.6.46
    – Thème utilisé : Twenty Eleven
    – Thème URI : https://wordpress.org/themes/twentyeleven/
    – Extensions en place : Contact Form 7 (5.1.6), Easing Slider (3.0.8), Enhanced Mediapicker (0.2), Forum_wordpress_fr (4.2)
    – Adresse du site : http://philippeformet.com
    – Nom de l’hébergeur : Apache

    Problème(s) rencontré(s) :

    Je voudrais avoir certaines pages de mon site qui comportent un porte-folio de mes tableaux et que celle-ci grossissent lorsque que la souris passe dessus.

    Quelle extension dois-je utiliser

    Merci d’avance

    #2297911
    PhiLyon
    Modérateur
    Maître WordPress
    26283 contributions
    #2297913
    FORMET
    Participant
    Initié WordPress
    31 contributions

    c’est exactement ce que je veux mais comment l’installer car il n’est pas dans la liste des extensions de WP

    #2298095
    PhiLyon
    Modérateur
    Maître WordPress
    26283 contributions

    Bonjour.

    Pour l’installer c’est expliqué dans le lien que je t’ai donné, mais si comme moi tu es rébarbatif au jquery, c’est pas simple.

    Pour me venger 😆  j’ai essayé de trouver une combine en CSS, je te propose d’essayer de code dans ton CSS additionnel, attention cela n’a rien de professionnel ni de bien conforme aux ” normes “.

    Je l’ai réalisé dans une galerie native de WordPress en insérant les images en ” Taille réelle ”

    Problème après avoir survolé le thumbnail, l’image apparait bien, mais pour la quitter il faut glisser la souris en haut ou en bas de la photo.

    Pareil pour aller sur les photos suivantes il faut passer par le haut ou le bas, sur les portables c’est par la droite, de plus je n’ai pas peaufiné les media-queries.

    Enfin voilà, c’était pour m’amuser et il faut sûrement ajuster les dimensions en fonction de tes images

    gallery, .wp-block-image img:hover {
        position:fixed;
    	max-width:2000px;
    	width:100%;
        height:100%;
        display:block;
    	top:-10px !important;
    	left:-10px !important;
    	z-index:9999;
    }
    
    gallery, .wp-block-image {
    	display: inline-block;
    	z-index:9999;
    }
    
    @media screen and (max-width: 780px)
    {
       gallery, .wp-block-image img:hover {
        height:auto;
    }
    }

    🙂

    #2298476
    FORMET
    Participant
    Initié WordPress
    31 contributions

    Bonjour;

    1°) Le script que tu joins doit-il ajouté a la suite de CSS additionnel?

    2°) .wp-bloc-image correspond à la page où il y a les imanges?

     

    J’ai du mal à comprendre le fonctionnement

     

    Philippe

    #2298477
    PhiLyon
    Modérateur
    Maître WordPress
    26283 contributions

    Bonjour.

    1°) Le script que tu joins doit-il ajouté a la suite de CSS additionnel?

    Ce n’est pas un script mais du CSS, et donc oui c’est dans le CSS additionnel.

    2°) .wp-bloc-image correspond à la page où il y a les images?

    A la page, non, cela correspond à la galerie que j’ai créé dans une page sur mon site de tests.

    Sur ton site je n’ai pas vu de galerie.

    🙂

    #2298478
    FORMET
    Participant
    Initié WordPress
    31 contributions

    Je viens de la mettre

    #2298479
    PhiLyon
    Modérateur
    Maître WordPress
    26283 contributions

    Essaie-ça alors, mais il va y avoir un problème, on ne pourra pas atteindre l’image du milieu.

    .wp-block-gallery.is-cropped .blocks-gallery-item img:hover {
        position:fixed;
    	max-width:2000px;
    	width:100%;
        height:100%;
        display:block;
    	top:-10px !important;
    	left:-10px !important;
    	z-index:9999;
    }

    🙂

    #2298543
    ferman
    Participant
    Maître WordPress
    2783 contributions

    Bonjour,

    Vous pouvez aussi essayer cette possibilité (inspiré par ça). A mettre aussi dans les css additionnelles.

    Tel que c’est, ça s’applique uniquement aux images de la galerie. Pour toutes les images du site il faut remplacer” .blocks-gallery-grid img” par “img” tout court. Pour appliquer à d’autres images du site il faut voir la classe des images visées.

    .blocks-gallery-grid img {
      padding: 0px;
      transition: transform .2s; /* Animation */
      margin: 0 auto;
    }
    .blocks-gallery-grid img:hover {
      transform: scale(1.5); 
     z-index:10;
    }

    Vous pouvez régler le facteur zoom, ici 1.5 et la vitesse de transition ici 0.2s.

    • Cette réponse a été modifiée le il y a 6 mois et 3 semaines par ferman.
    • Cette réponse a été modifiée le il y a 6 mois et 3 semaines par ferman.
    • Cette réponse a été modifiée le il y a 6 mois et 3 semaines par ferman.
    #2298553
    PhiLyon
    Modérateur
    Maître WordPress
    26283 contributions

    @ferman – Bonjour.

    Bien trouvé, problème si tu mets une largeur fixe, sur mobile ça coincera, enfin je crois.

    Tout dépend de l’agrandissement voulu par @FORMET.

    🙂

    #2298554
    PhiLyon
    Modérateur
    Maître WordPress
    26283 contributions

    Ben au fait le hover est inactif sur les mobiles, je commence à m’y perdre là.

    Il faudra prévoir pour les mobiles une lightbox normale.

    🙂

    #2298570
    ferman
    Participant
    Maître WordPress
    2783 contributions

    @PhiLyon

    Ben au fait le hover est inactif sur les mobiles, je commence à m’y perdre là.

    Je pense avoir trouvé. Le problème est dans la simulation Firefox. Il faut appuyer sur la petite icône doigt  à droite  (activer la simulation des évènements tactiles) pour activer le hover. Il est vrai qu’on n’utilise pas de souris pour les mobiles et les tablettes.L’inspecteur firefox n’a pas fini de m’étonner.

    #2298597
    Anonyme
    Invité
    Maître WordPress
    34102 contributions

    Ce message a été supprimé suite à la demande de l’auteur.

    #2298660
    FORMET
    Participant
    Initié WordPress
    31 contributions

    Merci PhilLyon et ferman c’est ce que je voulais.

    Une question, si j’ajoute une autre page avec une deuxième galerie ça fonctionne aussi à condition d’utiliser la présentation galerie?

    Est-il possible que l’image qui apparaît soit au milieu de l’écran car c’est plus esthétique?

    Enfin peux-ton modifier les paramètres de la bibliothèque wp afin qu’elle soit plus large et les vignettes aient plus d’espaces entre elle.

     

    Ça fait beaucoup de questions, mais ça peut être traité progressivement.

    #2298662
    ferman
    Participant
    Maître WordPress
    2783 contributions

    Bonjour,

    Comme je vous le disais auparavant, ça marche avec toutes les images à condition de connaître leur classe, qu’elles soient dans une galerie ou non. Le mieux est de mettre les images /galeries sur votre site et de dire où (page/article) vous voulez l’effet.

    Pour les deux autres questions, c’est plus complexe. Les images sont dans une grille et centrer ne me paraît pas possible à priori.

    Quant à écarter les images, cela doit être possible dans les réglages de la galerie. Par css ce serait peut-être possible mais galère et de mon point de vue (tout personnel) il faut utiliser les css additionnelles avec parcimonie et si on ne peut pas faire autrement.

     

15 sujets de 1 à 15 (sur un total de 18)
  • Vous devez être connecté pour répondre à ce sujet.