Script jQuery - FancyBox une galerie spectaculaire
Pourquoi le choix de la galerie FancyBox ?
FancyBox est une lightbox jQuery. Paragraphe en cours de rédaction !
Téléchargement et tranfert des fichiers du script FancyBox
— Accédez aux fichiers de la FancyBox sur le service CDNjs. Plus simple, faites un clic-droit sur les liens script Fancybox et feuille de styles FancyBox puis cliquez dans le menu sur « Enregistrer (la cible du) lien sous... »
— Enregistrez sur votre PC les deux fichiers sous les noms jquery.fancybox.js pour le script et jquery.fancybox.css pour la feuille de styles
— Lancez le logiciel Filezilla pour préparer le transfert FTP des deux fichiers sur le serveur distant de votre hébergeur
— Dans la fenêtre Site local de Filezilla, localisez les fichiers jquery.fancybox.js et jquery.fancybox.css
— Dans la fenêtre Site distant de Filezilla, placez-vous dans le dossier de destination. Par exemple, chez mon hébergeur, il s'agit de /web/mon_site/_xtra/scripts/jquery/fancybox/
— Envoyez sur le serveur et dans le dossier distant FancyBox de votre hébergeur, les deux fichiers jquery.fancybox.js et jquery.fancybox.css
Installation du script FancyBox
— Menu Sécurité & HTML
— Bouton Section <HEAD>
— Copiez-collez le code suivant en modifiant les informations personnelles :
<script src="https://mon_site/_xtra/scripts/jquery/fancybox/jquery.fancybox.js"></script><!--Fin de FancyBox 3.5.7-->
Installation de la galerie FancyBox
<a href=".../mon_site/_xtra/scripts/jquery/fancybox/gallery_001/image_001.jpg" data-fancybox="gallery_001" data-caption="Titre image 001">
<img src=".../mon_site/_xtra/scripts/jquery/fancybox/gallery_001/image_001_miniature.jpg" alt="Titre image 001" style="box-shadow:0 0 1px 1px silver;" />
</a>
<a href=".../mon_site/_xtra/scripts/jquery/fancybox/gallery_001/image_002.jpg" data-fancybox="gallery_001" data-caption="Titre image 002">
<img src=".../mon_site/_xtra/scripts/jquery/fancybox/gallery_001/image_002_miniature.jpg" alt="Titre image 002" style="box-shadow:0 0 1px 1px silver;" />
</a>
— Rendez-vous ensuite dans la rubrique dans laquelle vous voulez publier la galerie
Personnalisation de la galerie FancyBox
Paragraphe en cours de rédaction !
Démo - Exemple de galerie FancyBox
Sources et licences
— Javascript FancyBox sur le site de l'éditeur
— Script placé sous GNU General Public License version 3 pour les projets open source. Une licence commerciale est requise pour tous les projets commerciaux.
— Photo de Touann Gatouillat Vergos sur Unsplash