Lightbox Boutons suivants et précédents jquery

Résolu/Fermé
lucanne212274 Messages postés 9 Date d'inscription samedi 30 octobre 2021 Statut Membre Dernière intervention 27 juin 2022 - 30 oct. 2021 à 20:56
lucanne212274 Messages postés 9 Date d'inscription samedi 30 octobre 2021 Statut Membre Dernière intervention 27 juin 2022 - 30 oct. 2021 à 23:59
Bonjour à tous,

Voilà 3 jours que je bute sur une Lightbox en jquery.
J'ai pour l'instant réussi à faire en sorte que lorsque l'on clique sur une miniature, la light box s'ouvre avec l'image cliquée en meilleure qualité.
Maintenant je n'arrive pas à faire fonctionner les boutons suivants et précédents.

Les miniatures ont une source de la forme : /img/xx.xx.2021/min/00x.jpg
Les versions haute qualité ont une source de la forme : /img/xx.xx.2021/full/00x.jpg

Pour éviter de copier/coller trop de html/css, la partie du site en question est la suivante :

https://test-ospf.go.yn.fr/#photos

Quelqu'un aurait-il une solution pour faire fonctionner ce code ?

$(function (){

    // .min : classe des miniatures, petits fichiers jpeg, car nombreux. //
    // un clic sur une miniature ouvre la Lightbox //
    // la source de la miniature est changée en full pour l'image haute définition//
    $(".min").click(function (){
        var SourcePetiteImage = $(this).attr('src');
        var SourceGrandeImage = SourcePetiteImage.replace("min", "full");
        $(".lightbox").html("<img src='" + SourceGrandeImage + "'>");
        $(".lightbox").animate({opacity: "1"}, "slow").css("display", "flex");
        $(".lightbox img").animate({opacity: "1"}, "slow").css("display", "flex");
        $("#img-close").animate({opacity: "1"}, "slow").css("display", "flex");
        $("#img-prev").animate({opacity: "1"}, "slow").css("display", "flex");
        $("#img-next").animate({opacity: "1"}, "slow").css("display", "flex");
    });

    //fermer la lightbox en cliquant n'importe où ou sur img-close//
    $(".lightbox, #img-close").click(function (){
        $(".lightbox, #img-close, #img-prev, #img-next").fadeOut("slow").animate({opacity: "0"}), "slow";
    });

    // et là je bloque...//
    $("#img-next").click(function (){
    
    });

    $("#img-prev").click(function (){
    
    });

});


Le but serait, j'imagine d'aller chercher l'image source suivante ou précédente de l'image haute def...

Merci par avance

4 réponses

jordane45 Messages postés 38175 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 13 mai 2024 4 667
30 oct. 2021 à 21:35
Bonjour,

La page de ton site semble bourrée d'erreurs javascript (76... )
Ouvre la console de ton navigateur pour les voir .. et corrige les.
Ensuite, si ton problème persiste on pourra se pencher dessus...
0
lucanne212274 Messages postés 9 Date d'inscription samedi 30 octobre 2021 Statut Membre Dernière intervention 27 juin 2022
30 oct. 2021 à 22:45
Bonsoir,

Merci beaucoup pour votre réponse.

Alors quand j'inspecte le site avec le navigateur il ne m'affiche qu'une seule erreur, comme en témoigne la capture d'écran ci-dessous.


Peut-être ai-je manqué quelque chose ?

Merci beaucoup
0
jordane45 Messages postés 38175 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 13 mai 2024 4 667
30 oct. 2021 à 23:37
Déjà, tu pourrais déterminer quelle est la prochaine image en fonction de celle cliquée
pour ça, tu pourrais faire un truc du genre
var nextImg = "";

$(".min").click(function(){
  var el = $(this).parent().next().find(".min");
  nextImg = el[0].src;
  var SourcePetiteImage = $(this).attr('src');
  var SourceGrandeImage = SourcePetiteImage.replace("min", "full");
  // ... etc...   


et dans la fonction :

    // et là je bloque...//
    $("#img-next").click(function (){
        $(".lightbox").html("<img src='" + nextImg.replace("min", "full")  + "'>");
    });

0
lucanne212274 Messages postés 9 Date d'inscription samedi 30 octobre 2021 Statut Membre Dernière intervention 27 juin 2022
30 oct. 2021 à 23:59
Magnifique !

Un grand merci pour ton aide, c'est exactement ce dont j'avais besoin !

Je te souhaite une belle fin de soirée

Cordialement
0