Intégrer FancyBox3 sur un blog écrit en Markdown

Ça fait longtemps que j'y pense mais je repoussais la recherche de solutions à mon problème. Je voulais un affichage joli et moderne des photos de mes articles de type lightbox, c'est à dire superposer les images en grand format au-dessus de la page en cours. Ne m'étant jamais intéressée au langage JavaScript et pré-sentant que la solution viendrait de celui-ci, j'ai mis du temps à y venir... Ci-dessous un exemple.

placeholder placeholder placeholder

Mais ça y est, j'ai de jolies images bien affichées et en prime la possibilité de faire des galeries avec les images de mes articles ! Comment que j'ai fait ça ?

Cahier des charges

  • N'y connaissant rien en JavaScript, il me fallait un script qui existait déjà sur le net, quitte à le modifier pour mes besoins. Pas question de réinventer la roue !
  • J'écris mes articles en Markdown depuis plusieurs années, j'adore ce langage de balisage pour mettre en forme simplement mes billets. Pour ceux qui ne connaissent pas, insérer une image dans un texte en Markdown se fait très simplement : ![titre](www.url.com). Je veux continuer d'insérer mes images de cette façon toute simple, le script devra donc les reconnaître sur ma page et faire son job tout seul.

Recherche du script

Je ne suis pas allée très loin pour trouver mon bonheur, j'ai fait un tour sur GitHub et sur Google. Mon choix s'est portée sur FancyBox3, un script JavaScript qui faisait exactement ce que je souhaitais. Plein de bons points :

  • Script sous licence GPLv3
  • La documentation est très bien faite et facile à comprendre pour une néophyte du langage.
  • Les démos sont très convaincantes (ben ouais, ça joue !)
  • Les options de personnalisation sont nombreuses et simple à paramétrer.
  • La possibilité d'appliquer cet effet Fancybox à d'autres éléments que des images (comme des vidéos, des iframes, n'importe quoi d'autre...) est intéressante.
  • Enfin, la possibilité d'utiliser un CDN pour intégrer le script à mon site.

Intégration de FancyBox3 à mon site

Rien de plus simple pour commencer : intégrer JQuery en premier (requis pour le fonctionnement de FancyBox3) puis FancyBox3 (le fichier js et le fichier css pour le style) dans la balise <head> de la page.

Pour cela, j'utilise les CDN, des ressources externes pour éviter de charger mon propre petit serveur.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.25/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.25/jquery.fancybox.min.js"></script>

Et voilà ! Y'a plus qu'à l'utiliser ! L'utilisation basique ressemble à ça :

<a data-fancybox="gallery" href="big_1.jpg">
  <img src="small_1.jpg">
</a>
<a data-fancybox="gallery" href="big_2.jpg">
  <img src="small_2.jpg">
</a>

Le fonctionnement de base de ce script, c'est grosso modo de rechercher des balises <a> avec l'attribut data-fancybox. Si un tel élément est trouvé, le href de cette balise sera affiché dans une FancyBox lorsque le lien sera cliqué.

De plus, si l'attribut data-fancybox prend une même valeur sur plusieurs liens, ils seront regroupés pour former une "galerie". Trop pratique.

Encadrer automatiquement les balises <img> par des balises <a> ... </a>

Comme on l'a vu, les FancyBox fonctionnent avec un lien. Hors moi, quand j'intègre une image en Markdown, c'est une balise <img> qui est créée. Je ne veux pas avoir à écrire à la main des balises <a> avec les attributs qui vont bien à chaque fois que j'ajoute une photo sur mon site ! Bien trop contraignant ...

Solution : faire bosser JavaScript

Un petit script tout simple pour encadrer chaque <img> trouvée dans la <section class="main"> avec des balises <a data-fancybox ...> ... </a> grâce à la fonction wrap(). Je reprends l'adresse de la source de mon image pour l'intégrer au href de ma balise <a>.

<script>
$("section.main img").wrap(function() {
  return "<a data-fancybox='images' href='" + $(this).attr('src') + "'></a>";
});
</script>

Et puis c'est tout

Ouais, c'est vraiment cool. Génialement simple, je vous invite à faire un tour dans la documentation pour voir des exemples d'implémentation.


- web -

Commentaires


Il n'y a aucun commentaire à afficher.

Poster un commentaire