[Résolu] effet lightbox sans plugin (Créer un compte)

Accueil › Forums › WordPress › [Résolu] effet lightbox sans plugin
  • WordPress :6.0
  • Statut : résolu
15 sujets de 1 à 15 (sur un total de 17)
1 2
  • Auteur
    Messages
  • 1 novembre 2022 à 16 h 45 min #2428097
    laurentsc
    Participant
    Chevalier WordPress
    367 contributions

    Bonjour,

    Ma configuration WP actuelle

    • Version de PHP/MySQL : 8/8
    • Thème utilisé : OceanWP-child
    • Extensions en place : …
    • Nom de l’hébergeur : local
    • Adresse du site : x

    Problème(s) rencontré(s) : je suis en train de suivre ce tuto : https://baptistepages.com/tutoriel/lightbox-wordpress/ qui explique comment mettre un effet lightbox sans plugin. Je pense avoir suivi les indications, mais pas d’effet lightbox (j’en suis sur pour avoir précédemment utilisé un plugin).

    Je décris ce que j’ai fait et merci de me dire où est le problème.

    1- Pour commencer, il dit Maintenant, je vais commencer par définir une classe pour cette image : image-galerie

    J’ai donc créer une classe image-galerie dans le CSS additionnel :

    /* lightbox sans plugin */
    	.image-galerie{}

     

    2- Ensuite, il dit Ensuite, je vais ajouter un peu de Javascript dans un bloc “HTML personnalisé”.

    Utilisant l’éditeur classique, j’ai créé une page effet lightbox avec le code

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
    <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
    <script>
      jQuery(document).ready(function(){
      	jQuery( ".image-galerie" ).each(function( index ) {
      		jQuery( this ).wrap("<a data-fancybox='gallery' href='"+ jQuery( this ).attr("src") +"'></a>");
    	});
      });
    </script>

     

    3- Pour finir, dans la mediathèque, j’ai déclaré la classe CSS, pour les 2 images qui constituent ma galerie foogallery

     

    Merci de me dire où est le problème ; ce tuto est-il fiable ?

    • Ce sujet a été modifié le il y a 2 années et 8 mois par laurentsc.
    • Ce sujet a été modifié le il y a 2 années et 8 mois par laurentsc.
    1 novembre 2022 à 18 h 31 min #2428125
    momofr@free.fr
    Modérateur
    Maître WordPress
    7815 contributions

    Salut le thème OceanWP qui tu utilises contient une visionneuse par défaut (lightbox).

    Si tu utilises Elementor en plus il y a une autre visionneuse incluse et il faut en désactiver une des 2 (soit sur OceanWP, soit sur Elementor).

    En tout cas il n’est pas du tout nécessaire de faire ce qui fais, c’est même déconseillé.

    1 novembre 2022 à 19 h 12 min #2428136
    laurentsc
    Participant
    Chevalier WordPress
    367 contributions

    Salut et merci pour ta réponse. Le lien que tu donnes parle de l’option customizing->Portfolio->Images  . Or, je n’ai pas cette option (cf copie d’écran). Comment faire ?

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    1 novembre 2022 à 20 h 14 min #2428156
    momofr@free.fr
    Modérateur
    Maître WordPress
    7815 contributions

    Salut, par défaut il y a une lightbox avec OceanWP, si tu n’utilises pas Elementor mais Gutenberg en activant le lien vers le média sur un bloc image la lightbox fonctionne. C’est pareil avec le bloc galerie d’images.

    Si tu utilises Elementor c’est identique mais avec la visionneuse Elementor qui prend le dessus sur celle d’OceanWP.

    Pourquoi suivre ton tutoriel alors que la lightbox est intégrée ?

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    1 novembre 2022 à 21 h 21 min #2428169
    laurentsc
    Participant
    Chevalier WordPress
    367 contributions

    Bonsoir,

    je n’utilise ni Elementor, ni Gutenberg. En effet, j’utilise l’éditeur classique (j’ai installé le plugin Classic Editor car j’étais habitué à cet éditeur et ne comptais pas apprendre Gutenberg (que je ne connais donc pas)).

    Tu n’as répondu à mon post précédent #2428136…

    Faut-il que je me mette à Elementor ?

    2 novembre 2022 à 10 h 14 min #2428241
    momofr@free.fr
    Modérateur
    Maître WordPress
    7815 contributions

    Salut, et bien si tu utilises Classic Editor et que tu places un visuel via le bouton Ajouter un média avec un lien vers le fichier média, la visionneuse d’OceanWP est active et ça fonctionne.

    2 novembre 2022 à 10 h 55 min #2428255
    laurentsc
    Participant
    Chevalier WordPress
    367 contributions

    Salut,

    je viens de faire un essai : j’ai une page de test (effet lightbox) et j’ai fait Ajouter un média puis créé une galerie. J’ai sélectionné 2 images dans la médiathèque et ça m’a généré une galerie :

    J’ai ensuite fait voir la page ; ça m’affiche bien les 2 images mais le lien est mauvais. Exemple de code sur la première image :

    <a href='http://dev.arnaud.fr/whatsapp-image-2022-05-15-at-18-49-57/'><img width="150" height="150" src="http://dev.arnaud.fr/wp-content/uploads/2022/11/WhatsApp-Image-2022-05-15-at-18.49.57-150x150.jpeg" class="attachment-thumbnail size-thumbnail" alt="Les insectes qui piquent" loading="lazy" aria-describedby="gallery-1-189" srcset="http://dev.arnaud.fr/wp-content/uploads/2022/11/WhatsApp-Image-2022-05-15-at-18.49.57-150x150.jpeg 150w, http://dev.arnaud.fr/wp-content/uploads/2022/11/WhatsApp-Image-2022-05-15-at-18.49.57-600x600.jpeg 600w" sizes="(max-width: 150px) 100vw, 150px" /></a>

    Dans l’URL, il manque la fin…:-(

    3 novembre 2022 à 22 h 39 min #2428657
    laurentsc
    Participant
    Chevalier WordPress
    367 contributions

    et bien si tu utilises Classic Editor et que tu places un visuel via le bouton Ajouter un média avec un lien vers le fichier média, la visionneuse d’OceanWP est active et ça fonctionne

    Je reviens sur votre affirmation : ce n’est pas le cas sur mon site de test (en local). Que faut-il faire pour avoir un effet lightbox ?

    • Cette réponse a été modifiée le il y a 2 années et 8 mois par laurentsc.
    3 novembre 2022 à 23 h 58 min #2428674
    momofr@free.fr
    Modérateur
    Maître WordPress
    7815 contributions

    Salut, décidément tu sembles buter sur une manip pourtant très simple, regarde mon test en vidéo ici.

    4 novembre 2022 à 9 h 02 min #2428722
    laurentsc
    Participant
    Chevalier WordPress
    367 contributions

    Salut, oui, je pense qu’il s’agit d’une erreur de débutant, mais malgré ta vidéo (je dois deviner où l’on clique car je ne vois pas les bords (avec Firefox comme avec Chrome) (j’ai vu que tu t’es mis en affichage visuel alors que je mets toujours en affichage texte )), le problème reste…

    4 novembre 2022 à 12 h 23 min #2428749
    momofr@free.fr
    Modérateur
    Maître WordPress
    7815 contributions

    Salut, les actions hors champ sont la validation rien de particulier.

    Tu peux te mettre en mode visuel non ? SI tu es en mode texte brut il n’est pas possible de lier l’image à sa version complète via le lien. Ta façon de faire est limité et demande de savoir coder et de connaître le principe de l’attribut rel.

    Tu te compliques la vie, mais je ne sais pas pourquoi.

    A ce stade je ne peux plus rien faire pour toi, c’est bien fonctionnel chez moi.

    4 novembre 2022 à 16 h 21 min #2428815
    laurentsc
    Participant
    Chevalier WordPress
    367 contributions

    Tu te compliques la vie, mais je ne sais pas pourquoi.

    Je codais déjà en PHP avant d’apprendre l’existence de WordPress…Donc, je préfère la version code.

    J’ai fait l’essai sur un 2e ordi (au cas où). Comme sur cet ordi, je n’ai pas de serveur local, j’ai fait une page de test en ligne : https://pasdpanique.fr/essai-lightbox/

    Créer nouvelle page

    bouton Ajouter un media

    Créer une galerie

    Sélection de 3 images dans la médiathèque

    Cocher le bouton Enable lightbox

    Même constat très moyen que avant-hier (post #2428255)…

    4 novembre 2022 à 18 h 16 min #2428841
    momofr@free.fr
    Modérateur
    Maître WordPress
    7815 contributions

    Salut, de quel bouton « Enable lightbox » parles-tu ? Je n’ai pas ça.

    • Cette réponse a été modifiée le il y a 2 années et 8 mois par momofr@free.fr.
    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    4 novembre 2022 à 22 h 56 min #2428885
    laurentsc
    Participant
    Chevalier WordPress
    367 contributions

    C’est dans l’interface de création d’une page, donc avant de cliquer sur le bouton Ajouter un média .

    Ce qui est intéressant à remarquer, c’est cette option existe uniquement sur mon WordPress en ligne mais pas sur mon WordPress/serveur local…

    A noter que j’ai essayé l’effet lightbox avec un plugin (Simple lightbox, Responsive Lightbox & Gallery et Lightbox with PhotoSwipe) mais qu’avec aucun d’eux, je n’obtiens un effet Lightbox (sur le serveur local vu que sur le WordPress en ligne, les liens vers les images sont mauvais)

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    5 novembre 2022 à 17 h 54 min #2429004
    momofr@free.fr
    Modérateur
    Maître WordPress
    7815 contributions

    Salut, vu que l’on ne sait pas ce que tu as installé/activé sur ton site il est impossible de t’aider.

    Je répète une dernière fois, tu as le thème OceanWP, pas besoin d’une autre extension pour la lightbox ELLE EST INTÉGRÉE au thème !

    Refait la manip comme présenté dans ma vidéo et ça va marcher.

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