Procéder par étapes
Le site de Fancybox contient déjà toute la documentation sur son utilisation, mais reprenons la procédure de manière adaptée au code déjà écrit dans les articles précédents :
1) Télécharger et placer les fichiers
Fancybox est une librairie basée sur jQuery. Ça tombe bien, nous avons déjà téléchargé et placé jQuery dans le tutoriel précédent.
Après avoir téléchargé la librairie depuis le site de Fancybox, on identifie les fichiers nécessaires. Ils sont au nombre de deux et sont situés dans le dossier dist :
– jquery.fancybox.min.css
– jquery.fancybox.min.js
Il suffit de placer ces deux fichiers dans le dossier du site, puis de les charger dans le head de la page :
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Un site en une page</title>
<link rel="stylesheet" href="style.css">
<!-- jquery d'abord ! -->
<script src="jquery-3.4.1.min.js"></script>
<script src="script.js"></script>
<!-- fancybox, après jQuery ! -->
<script src="jquery.fancybox.min.js"></script>
<link rel="stylesheet" href="jquery.fancybox.min.css">
</head>2) Préparer l’image et sa vignette
Le principe de Fancybox est que l’on affiche une vignette de l’image. Un clic sur cette vignette produit l’affichage en plus grand de cette même image.
L’image en grand format ne doit pas être trop grande. Une taille d’environ 1200 pixels de large est tout à fait suffisante. Il est inutile et même déconseillé de placer des image de 1600 pixels ou plus : elles seront réduites à l’affichage alors que le navigateur devra en télécharger chaque pixel. Du gaspillage de bande passante, pas très écolo donc.
La taille de la vignette dépend du nombre de vignettes affichées. Dans notre cas, 500 pixels de large sera suffisant, et probablement un peu trop, mais on va garder ça.
Produisez ces images et déposez-les dans le dossier "images" qui est fait pour ça.
On obtient ceci :
Trouvez un système de nom logique, la plupart du temps on ajoute "-small" au nom des vignettes pour que les deux images soient listées côte à côte et aient un nom similaire.
Rappel : ne mettez jamais de caractère spéciaux (@&é etc.) ni d’espace dans un nom de fichier sur le web ! C’est une source d’erreur.
3) Placer les images dans la page
Il nous reste maintenant à placer le code html dans notre page.
La méthode est simple : on crée un tag "a" qui enserre la vignette. La destination du lien (l’attribut "href") est le lien vers l’image. On ajoute un attribut au lien data-fancybox="truc" qui permet à Fancybox de savoir qu’il dit agir sur cet élément. Lorsqu’on clique, Fancybox récupère le lien dans l’attribut href et l’ouvre par dessus la page dans des éléments html qu’il crée à la volée.
Voici le code écrit dans l’article de la galerie ;
<article id="galerie">
<h2>La galerie</h2>
<div class="grille">
<a href="images/australie.jpg" data-fancybox="truc"><img src="images/australie-small.jpg"></a>
<a href="images/le-navire-grande-america.jpg" data-fancybox="truc"><img src="images/le-navire-grande-america.jpg"></a>
</div>
</article>Le fait que les deux liens aie le même attribut data-fancybox (truc, dans le code ci-dessus) les lie entre elles : fancybox dispose les flèches qui permettent de passer directement de l’affichage de l’une à l’autre.
Ça donne donc ça :
