Soucis avec Lightbox

[schoune 54]

Bonjour à tous,

 

J'ai en effet des soucis avec l'application du lightbox pour un projet. Je travail sur le site du parcours d'artistes que ma compagne organise. Je souhaite donc afficher les flyers des années précédentes. 

 

Pour ce faire, je vais sur la page, j'y place une image (de base), je la sélectionne (comme décrit dans le tuto), je choisis la fonction "liens".

 

Puis je sélectionne toutes les images (pour l'instant 4 ) et clic sur lightbox dans relations...

J'enregistre les modifications de la page, et la surprise rien ne se passe!?!?

 

Ai-je oublié qq chose???

 

Merci

[augras 290]

Bonjour @schoune,

Je viens de vérifier dans une 9.2.18 et ça fonctionne... chez moi.

Mais je ne me retrouve pas dans tes explications !

Il faut faire la démarche image par image et pour chaque image il s'agit de la sélectionner, puis cliquer droit et dans le menu qui apparaît cliquer sur Liens et enfin dans la fenêtre Insérer un lien choisir Afficher dans Diaporama d'images (impleLightbox).

Philippe

[schoune 54]

Bonjour Auras, déjà merci pour ta réponse. Je vais essayer d'être clair….

 

J'aimerais avoir une image sur mon site qui ouvre un ensemble d'image avec la fonction lightbox...

 

Je sais insérer un image, mais quand je veux choisir mes autres images pour avoir le simplelightbox, je ne vois que la dernière choisie, et pas toutes….

 

[schoune 54]

Voici le truc le plus étrange, cela fonctionne sur une nouvelle page, mais pas sur ma page de garde!?! 

 

@ Augra, @Fred

 

 

Cela ne fonctionne pas quand je suis sur une page parent…. voulez-vous bien essayer?

merci

Modifié 10 février 2020 par schoune

[augras 290]

Je viens d'essayer sur une page enfant, une page parent, et pas de soucis : ça fonctionne.

Tu ne peux pas choisir les images en une seule fois : il faut insérer une image et indiquer que tu la mets dans simplelightbox, puis une autre idem, et ainsi de suite....

Pour ta page de garde as-tu un lien ?

[schoune 54]

Non pas encore car le site n'est pas actif.

 

J'ai beau essayer je n'y arrive pas! Ma méthode est celle-ci:

 

1- je clic sur le "+" et ajoute une image (je change la taille en 400)

2- je sélectionne l'image avec le bouton de gauche

3- clic droit -> "liens"

4- URL …. images (tu me dis une seule), puis le choix "Afficher dans" simplebox puis ok

4'clic "lien" -> choisir URL …. images (tu me dis une seule), puis le choix "Afficher dans" simplebox puis ok

4'' …. ainsi de suite 

5- Enregistrer

 

 

est-ce bien cela????

 

 

 

[augras 290]

Pour chaque image il faut tout refaire depuis le point 1 ! Quand tu répètes le point 4 sans recommencer depuis le début tu te contentes de remplacer l'image par la dernière sélectionnée.

Ce diaporama permet de faire défiler des images présentes dans une page.

Mais si je comprends mieux ce que tu veux ce n'est pas ce que tu recherches : tu veux cliquer sur une image et ouvrir une lightbox qui va faire défiler plusieurs images ? Si oui c'est plutôt ce que j'appellerai une galerie.

[schoune 54]

Merci pour ton aide Augras 

[augras 290]

De rien... mais du coup tu t'oriente vers quoi ?

[schoune 54]

Heu…. j'ai pas réussi. mais à l'époque PetterRabit l'avais fait pour moi, et j'ai repis le code que j'ai modifié… Et j'essaye autre chose mais pas avec le même rendu.

 

Et pour répondre, effectivement je voulait faire une espèce de galerie en lightbox.

[augras 290]

On a un très beau slider qu'a réalisé @sylvainlelievre, on a également le module galerie refait par @Gilux mais ce que tu souhaites reviens régulièrement sans que l'on ai une solution toute prête : en fait si je comprends bien ta demande c'est le module galerie sans l'affichage vignette ? On clique sur l'image de la galerie et c'est la lightbox qui apparaît directement sans passer par l'étape affichage des vignettes ?

[schoune 54]

C'est exactement cela... 

Pour l'ajout des modules et autres bidouille, je suis très frileux de modifier le code en profondeur, car, ayant déjà eu l'expérience, je perds toutes mes modifs a chaque mise à jour.

Pour moi, le plus important c'est de garder mon site a jour et de pouvoir profiter pleinement des améliorations qui sont proposées.

[augras 290]

Je comprends ta frilosité...

Le besoin étant identifié il s'agirait effectivement de créer un nouveau module à partir du module galerie existant en supprimant l'affichage des vignettes ou alors peut-être mieux, de modifier le module existant en ajoutant une case à cocher pour activer/désactiver l'affichage des vignettes  pour chaque galerie ?

Ce n'est pas moi qui saurai faire ça et il y a peut-être d'autres solutions auxquelles je ne pense pas. Peut-être que @Gilux qui a déjà bien travailler le sujet aura une idée ou saura modifier ce qu'il a fait pour obtenir ce que tu souhaites et améliorer son module ?

 

PS : ou si cette fonction est à généraliser c'est peut-être dans le module intégré à zwii qu'il faut ajouter cette possibilité ?

Modifié 15 février 2020 par augras
PS

[augras 290]

En fait il y a une solution toute "bête" : SimpleLightbox intégré a zwii fait ça très bien !

Il faut simplement ne pas afficher toutes les images, seulement celle que l'on veut pour entrer dans l'album.

Avec ce code

<p style="text-align: center;"><a href="/zwii91dev59/site/file/source/robot.gif" rel="gallery"><img src="/zwii91dev59/site/file/source/robot.gif" alt="Robot" width="180" height="180" /></a></p>
<p><a href="/zwii91dev59/site/file/source/diaporama_accueil/espace.jpg" rel="gallery"></a></p>
<p><a href="/zwii91dev59/site/file/source/diaporama_accueil/espace2.jpg" rel="gallery"></a></p>
<p><a href="/zwii91dev59/site/file/source/diaporama_accueil/polenord2.jpg" rel="gallery"></a></p>

seule l'image robot.gif est affichée et au clic dessus simplelightbox s'ouvre et on peut visualiser les 4 images.

 

Pour faire "simple" on fait comme indiqué plus haut pour préparer la lightbox et on édite le code pour supprimer toutes les balises <img/>, sauf celle de l'image que l'on veut afficher pour entrer dans l'album.

 

Le résultat du code ci-dessus : https://augras.eu/zwii91dev59/album-simplelightbox

Modifié 15 février 2020 par augras

[schoune 54]

Trop fort…. Merci!!!!!!!

[augras 290]

De rien.

Il y a toutefois 2 inconvénients :

- c'est apparemment possible d'avoir plusieurs lightbox sur une même page mais je n'y suis pas arrivé : ça doit pouvoir se résoudre ;

- la description de l'image est prise dans le alt="description" qui se trouve dans la balise <img/>... sauf qu'il n'y en a pas, sauf pour la première image, et donc je n'ai pas trouvé comment faire.

Philippe

[augras 290]

En cherchant à me dépatouiller du problème de l'affichage systématique des vignettes avec une autre lightbox j'ai trouvé comment le résoudre : dans la balise img il suffit d'ajouter style="display: none;" et c'est ok... la vignette ne s'affiche pas mais l'image est bien dans la lightbox. Et cerise sur le gâteau on peut ainsi compléter le alt="description" pour afficher une légende sur l'image.

En reprenant l'exemple donné plus haut ça donne :

<p style="text-align: center;">
  <a href="/zwii91dev59/site/file/source/robot.gif" rel="gallery" title="Album"><img src="/zwii91dev59/site/file/source/robot.gif" alt="Robot" /></a>
  <a href="/zwii91dev59/site/file/source/diaporama_accueil/espace.jpg" rel="gallery"><img src="/zwii91dev59/site/file/source/diaporama_accueil/espace.jpg" alt="C'est grand !" style="display: none;" /></a>
  <a href="/zwii91dev59/site/file/source/diaporama_accueil/espace2.jpg" rel="gallery"><img src="/zwii91dev59/site/file/source/diaporama_accueil/espace2.jpg" alt="Une image d'espace" style="display: none;" /></a>
  <a href="/zwii91dev59/site/file/source/diaporama_accueil/polenord2.jpg" rel="gallery"><img src="/zwii91dev59/site/file/source/diaporama_accueil/polenord2.jpg" alt="glagla" style="display: none;" /></a>
</p>

Le résultat du code ci-dessus : https://augras.eu/zwii91dev59/album-simplelightbox

 

Ne reste plus que la question des albums multiples sur une même page : pas trouvé avec simplelightbox, mais avec l'autre galerie que je suis en train de tester ça fonctionne et plutôt très simplement... la suite quand je serai au point.

 

Philippe

Modifié 2 mars 2020 par augras

[McGregor 663]

Oui, il est possible d'afficher plusieurs galeries "SimpleLightbox" dans la même page, mais il faut d'abord mettre à jour le script en remplaçant le fichier "core/vendor/simplelightbox/simplelightbox.min.js" par celui joint (version 2.1.2).

 

Ensuite il faut éditer "core/vendor/simplelightbox/int.js" et ajouter autant de classes supplémentaires que vous voulez. Ici pour deux galeries :  

 // Paramètres d'initialisation
    $(document).ready(function() {
            // Ajouter des classes Gallery afin de faire la liaison avec simplelightbox


        $("a[rel='gallery']").addClass(
            "gallery",""
        );
        $('.gallery').simpleLightbox({closeText:"×",captionsData:'alt'});

        $("a[rel='gallery2']").addClass(
            "gallery2",""
        );
        $('.gallery2').simpleLightbox({closeText:"×",captionsData:'alt'});

    });

Editez le code de votre page et remplacez rel="gallery" par rel="gallery2" pour les images que vous voulez mettre dans le deuxième galerie.

Avec l'astuce d'Augras, c'est parfait : juste deux vignettes sur la page, mais deux galeries.

 

Modifié 3 mars 2020 par McGregor
Erratum

[schoune 54]

Ouf génial les amis, un grand merci a vous deux pour votre aide si précieuse !

[augras 290]

Il y a 7 heures, McGregor a dit :

Oui, il est possible d'afficher plusieurs galeries "SimpleLightbox" dans la même page, mais il faut d'abord mettre à jour le script en remplaçant le fichier "core/vendor/simplelightbox/simplelightbox.min.js" par celui joint (version 2.1.2).

 

Ensuite il faut éditer "core/vendor/simplelightbox/int.js" et ajouter autant de classes supplémentaires que vous voulez. Ici pour deux galeries :  ........

Editez le code de votre page et remplacez rel="gallery" par rel="gallery2" pour les images que vous voulez mettre dans le deuxième galerie.

Avec l'astuce d'Augras, c'est parfait : juste deux vignettes sur la page, mais deux galeries.

simple-lightbox.min.js 25 Ko · 0 downloads

C'est à peu près ce que j'avais compris mais là c'est parfaitement clair : merci @McGregor.

Le but est effectivement d'avoir une seule vignette par album.

Mais pour répondre complètement au besoin d'un copain j'ai utilisé une autre lightbox : lightGallery.

Le post correspondant : 

Quand on a moins d'une dizaine d'images par album on peut se passer des vignettes dans la lightbox mais au-delà c'est bien de pouvoir savoir où l'on va et où on en est : il fallait avoir, entre autres,  la possibilité de pouvoir afficher un panel avec les vignettes dans la lightbox. Il doit y avoir d'autres lightbox qui font ça mais j'ai choisi lightGallery car on ne modifie pas de fichiers : tout se passe au niveau des scripts dans head et body et ça reste "simple", alors que les possibilités sont immenses, même pour des vidéos.

Restera à faire un générateur de code automatique à partir des images dans un dossier, comme ce qui avait été fait pour swiper et unitegallery : en me basant sur ces scripts je pense pouvoir le faire... sans vouloir trop m'avancer.

La suite sur lightgallery dans le post indiqué ci-dessus.

Philippe

[Fred 1 568]

Il y a 21 heures, McGregor a dit :

Oui, il est possible d'afficher plusieurs galeries "SimpleLightbox" dans la même page, mais il faut d'abord mettre à jour le script en remplaçant le fichier "core/vendor/simplelightbox/simplelightbox.min.js" par celui joint (version 2.1.2).

 

Ensuite il faut éditer "core/vendor/simplelightbox/int.js" et ajouter autant de classes supplémentaires que vous voulez. Ici pour deux galeries :  

 // Paramètres d'initialisation
    $(document).ready(function() {
            // Ajouter des classes Gallery afin de faire la liaison avec simplelightbox


        $("a[rel='gallery']").addClass(
            "gallery",""
        );
        $('.gallery').simpleLightbox({closeText:"×",captionsData:'alt'});

        $("a[rel='gallery2']").addClass(
            "gallery2",""
        );
        $('.gallery2').simpleLightbox({closeText:"×",captionsData:'alt'});

    });

Editez le code de votre page et remplacez rel="gallery" par rel="gallery2" pour les images que vous voulez mettre dans le deuxième galerie.

Avec l'astuce d'Augras, c'est parfait : juste deux vignettes sur la page, mais deux galeries.

simple-lightbox.min.js 25 Ko · 0 downloads

 

Ne fonctionne pas sur un 9.2.23 fraîche. Fonction simpleLightbox non trouvée...

Un truc m'aurait échappé ?

[McGregor 663]

@Fred  J'ai fait avec 9.221. Fonctionne comme expliqué au-dessus.

[augras 290]

Je viens de faire le test sur une 9.2.21 et en mettant le fichier simple-lightbox.min.js indiqué par @McGregor et j'ai la même erreur que @Fred. Par contre ça fonctionne parfaitement avec le fichier d'origine livré avec zwii...

[Fred 1 568]

Il y a 3 heures, McGregor a dit :

@Fred

 

  J'ai fait avec 9.221. Fonctionne comme expliqué au-dessus.

 

Tu aurais des pouvoirs magiques ? Déposez une archive de ton dossier vendor/simplelightbox, l'astuce est sûrement dedans.

[McGregor 663]

Il y a 4 heures, augras a dit :

Par contre ça fonctionne parfaitement avec le fichier d'origine livré avec zwii...

 

Augras est juste : je me suis mélangé, pas besoin de mettre à jour. Fonctionne aussi sur 9.223 avec le script d'origine. 

simplelightbox.zip

Modifié 3 mars 2020 par McGregor
Erratum

[Fred 1 568]

@McGregor as-tu réussi à installer l'update ?

 

Étrangement, la version 2.1 est installée ce matin sans erreur de script.

 

Pour éviter de modifier des fichiers qui seront écrasés lors d'une mise à jour, il est préférable d'utiliser les fichiers d'inclusion et de saisir le script dans body au  niveau de la config du site :

 

<script type="text/javascript">
        $("a[rel='gallery2']").addClass(
            "gallery2",""
        );
        $('.gallery2').simpleLightbox({closeText:"×",captionsData:'alt'});
</script>

On peut ainsi ajouter autant de galeries que nécessaire.