Discussion :

[Franjuju]

Bonjour à tous,

J'ai besoin de votre aide car j'essaye d'intégrer le plugin Jquerry Fancyapp (un plugin de lightbox) à ma page et lorsque tout est bien intégré, une fois que je clique sur l'image qui est censée s’agrandir, rien ne se passe et ma console affiche :

Uncaught Error: Syntax error, unrecognized expression: images/Affiche4.jpg
at Function.oe.error (jquery-3.3.1.min.js:2)
at oe.tokenize (jquery-3.3.1.min.js:2)
at oe.select (jquery-3.3.1.min.js:2)
at Function.oe [as find] (jquery-3.3.1.min.js:2)
at w.fn.init.find (jquery-3.3.1.min.js:2)
at new w.fn.init (jquery-3.3.1.min.js:2)
at w (jquery-3.3.1.min.js:2)
at HTMLAnchorElement.<anonymous> (main.js:87)
at HTMLAnchorElement.dispatch (jquery-3.3.1.min.js:2)
at HTMLAnchorElement.y.handle (jquery-3.3.1.min.js:2)
oe.error @ jquery-3.3.1.min.js:2
oe.tokenize @ jquery-3.3.1.min.js:2
oe.select @ jquery-3.3.1.min.js:2
oe @ jquery-3.3.1.min.js:2
find @ jquery-3.3.1.min.js:2
w.fn.init @ jquery-3.3.1.min.js:2
w @ jquery-3.3.1.min.js:2
(anonymous) @ main.js:87
dispatch @ jquery-3.3.1.min.js:2
y.handle @ jquery-3.3.1.min.js:2

Je ne comprend vraiment pas pourquoi car lorsque je le fais sur une autre page vide html, cela fonctionne bien mais lorsque je l'ajoute à cette page qui contient d'autres éléments, ça ne fonctionne plus.

Pour précision : sur cette page j'ai un script pour intégrer jquerry, un script pour intégrer le plugin fancyapp, un script pour intégrer le plugin owlcarousel et un script pour mon fichier js.

Voici la ligne concernée :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<a data-fancybox="gallery" href='images/Affiche4.jpg'>
<img class="item-2" src="images/Affiche4.jpg">
</a>

Je vous remercie en avance pour toute aide que vous pourrez m'apporter !

[psychadelic]

il faut 2 images: une petite et une grande, comme indiqué dans l'exemple sur la page principale :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a>

en anglais le mot big signifie Grand et small signifie petit.

soit en traduisant :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<a data-fancybox="gallery" href="GrandeImage_1.jpg"><img src="PetiteImage_1.jpg"></a>

et en général dans la partie html on met des doubles cotes pas des simples quottes

[Franjuju]

Bonjour,

J'ai corrigé les deux points dont tu m'as parlé mais rien ne change, j'ai toujours le même problème... Je ne comprend pas d'où cela peut venir, j'ai cherché partout sur internet je n'ai pas trouvé de solutions

[Franjuju]

Je viens de trouver en partie la solution à mon problème !

L'erreur venait d'une fonction sur mon fichier js qui me permettait de faire une animation de scroll lorsque je cliquais sur une ancre. Maintenant que je l'ai supprimé, la light box fonctionne parfaitement.

Le problème vient du fait que mon ancre utilise aussi une balise a et un href et que la fonction associée pour l'animation de l'ancre est écrite comme suit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(function(){
    // au clic sur un lien
    $('a').on('click', function(evt){
       // bloquer le comportement par défaut: on ne rechargera pas la page
       evt.preventDefault(); 
       // enregistre la valeur de l'attribut  href dans la variable target
 var target = $(this).attr('href');
       /* le sélecteur $(html, body) permet de corriger un bug sur chrome 
       et safari (webkit) */
 $('html, body')
       // on arrête toutes les animations en cours 
       .stop()
       /* on fait maintenant l'animation vers le haut (scrollTop) vers 
        notre ancre target */
       .animate({scrollTop: $(target).offset().top}, 1000 );
    });
});

Il y a donc un conflit entre mon ancre :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="ancre"><a href="#ancre-destination" id="bouton1">JE VEUX PARTICIPER</a></div>

Et mon lien pour le light box :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<a data-fancybox="gallery" href="images/Affiche4.jpg"><img class="item-2" src="images/Affiche4.jpg"></a>

lorsque j'essaye de les faire fonctionner en meme temps. Quelqu'un aurait une idée?

[Franjuju]

C'est bon, j'ai réussi. Il fallait remplacer le 'a' par mon id associé à l'ancre.

Merci