18041 sujets

Questions générales et questions de débutants

[Résolu] [JQ] Uncaught Error: Syntax error, unrecognized expression: i

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 :
<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 ! Smiley biggrin
Modifié par Franjuju (02 Apr 2019 - 23:11)
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 : 
$(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 :
<div id="ancre"><a href="#ancre-destination" id="bouton1">JE VEUX PARTICIPER</a></div>


Et mon lien pour le light box :
<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?
Sujet clos
Aller à