Lightbox Boutons suivants et précédents jquery
Résolu
lucanne212274
Messages postés
9
Date d'inscription
Statut
Membre
Dernière intervention
-
lucanne212274 Messages postés 9 Date d'inscription Statut Membre Dernière intervention -
lucanne212274 Messages postés 9 Date d'inscription Statut Membre Dernière intervention -
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 ?
Le but serait, j'imagine d'aller chercher l'image source suivante ou précédente de l'image haute def...
Merci par avance
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
A voir également:
- L’ordinateur portable de benjamin a été détruit dans un incendie. parmi les fichiers suivants, lesquels est-il certain de récupérer ?
- Nettoyer ordinateur portable lent - Guide
- Comment réinitialiser un ordinateur portable - Guide
- Ordinateur - Guide
- Clavier de l'ordinateur - Guide
- Comment récupérer les messages supprimés sur whatsapp - Guide
4 réponses
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...
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...
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
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
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
et dans la fonction :
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") + "'>");
});