Fancybox et jQuery

**Tillo** · 18/01/2019, 11h57

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 html :

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
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>
 
<!-- javascript -->
 
<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 :

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.

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.

Invité · 18/01/2019, 13h57

Bonjour,

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

Code :

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

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

Code :

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

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>

**Toufik83** · 18/01/2019, 14h13

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

Code html :

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

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>

**Tillo** · 18/01/2019, 20h44

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.

**Toufik83** · 18/01/2019, 20h57

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.

**Tillo** · 22/01/2019, 10h08

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

Code HTML :

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

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

au lieu de :

Code HTML :

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

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

Quel boulet je suis

Merci à tous pour votre aide, je passe le sujet en résolu.

Invité · 22/01/2019, 10h17

C'est href :

Code :

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

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

Apprends a faire du copier-coller...

**Tillo** · 22/01/2019, 10h24

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

Fancybox et jQuery [Plugin]

jQuery

Discussions similaires

Partager

Partager