Lightbox Boutons suivants et précédents jquery Résolu/Fermé

Question

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

jordane45 · Answer

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...

lucanne212274 · Answer

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

jordane45 · Answer

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")  + "'>");
    });

lucanne212274 · Answer

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

Lightbox Boutons suivants et précédents jquery

4 réponses

Discussions similaires