Fancybox et jQuery

Version imprimable

Fancybox et jQuery

Bonjour à tous,

Sur l'un de mes sites, j'ai mis un place un truc tout simple : il y a une petite image, et quand on clique sur l'image, celle-ci s'affiche en plus grand.
J'ai fait ça avec Jquery (version 1.3) et Fancybox (version 1.3.4).

Comme je prépare une grosse mise à jour du site (contenu + responsive), j'ai décidé d'en profiter pour mettre à jour jQuery et Fancybox.
J'ai donc Jquery (version 3.3.1) et Fancybox (version 3.5.6).

Il semble qu'il y ait beaucoup de changement du côté de Fancybox, j'ai d'abord voulu faire quelques essais sur une page de tests, pour être sûr qu'il n'y a pas de conflit avec autre chose.
j'ai donc essayé de suivre le tuto de leur site pour le mettre en place, j'obtiens de bout de code suivant :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <link rel="stylesheet" src="fancybox/dist/jquery.fancybox.css"> </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <a data-fancybox="images" href="../images/cimetiere-communal.jpg"><img src="../images/cimetiere-communal.jpg"></a>  <script type="text/javascript" src="js/jquery-3.3.1.js"></script> <script type="text/javascript" src="fancybox/dist/jquery.fancybox.js"></script> <script> $(document).ready(function() { $('[data-fancybox="images"]').fancybox(); }); </script> </body> </html>
Ce qui me donne l'affichage suivant :

https://zupimages.net/up/19/03/km5y.jpg

Cependant ça ne fonctionne pas, j'ai l'affichage suivant quand je clique sur mon image :
La forme noire en bas est une très très grosse loupe noire.

https://zupimages.net/up/19/03/6amu.jpg

J'ai bien vérifié tout les chemins vers les différents fichiers sont correctes.

Je suis sûr (et même certain) que c'est une erreur toute bête, un truc tout con, mais je sèche dessus depuis hier matin :(

A bientôt,
Tillo.

18/01/2019, 13h57
Invité
Bonjour,

mets à jour Fancybox : http://fancyapps.com/fancybox/3/

Code:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.css" />
Code:

1 2 <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.js"></script>

ou avec des fichiers (css,js) non compressés

Code:

1
2
3
4
5
6
7
8
9
10
11
 
<!--fancybox css-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.6/jquery.fancybox.css" rel="stylesheet" media="screen">
<!-- jQuery 3-->
<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous">
</script>
<!--fancybox js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.6/jquery.fancybox.js"></script>

18/01/2019, 20h44
Tillo

Super ! ça fonctionne avec vos morceaux de codes.

Mais je ne comprends toujours pas pourquoi ça ne fonctionne pas quand j'utilise les mêmes fichiers en local après les avoir récupérés via github.
18/01/2019, 20h57
Toufik83

apparemment l'attribut rel="stylesheet" est nécessaire quand on utilise le fichier (fancybox.css) localement.

Si je prends Apache comme exemple, les commentaires /*...*/ dans un fichier css, provoquent un comportement inattendu, et le style est chargé avec un format invalide dans le navigateur.
Je ne sais pas si c'est la même chose sur les autres serveurs locales.
22/01/2019, 10h08
Tillo

aaaah mais j'ai fait une méga grosse erreur !
J'ai écrit :

Code:

<link rel="stylesheet" src="fancybox/dist/jquery.fancybox.css">

au lieu de :

Code:

<link rel="stylesheet" href="fancybox/dist/jquery.fancybox.css">

Quel boulet je suis :aie:
Merci à tous pour votre aide, je passe le sujet en résolu.
22/01/2019, 10h17
Invité

C'est href :

Code:

<link rel="stylesheet" href="...

Apprends a faire du copier-coller... :roll:
22/01/2019, 10h24
Tillo

j'ai surtout le cerveau à l'ouest depuis quelques jours :(