Nouveau portail: 4- les photos (effet lightbox)

L'effet "lightbox" permet en cliquant sur un lien (une image par exemple) d'ouvrir par dessus la fenêtre en cours une autre image au travers d'une petite animation sympa. J'ai installé dans mes programmes l'outil qui permet de le faire, mais il faut tout de même donner les adresses des photos lorsqu'on rédige son article. Voici comment procéder:

Commencez par créer 2 versions de la photo en question: une petite (pas plus de 300 pixels de large) qui sera insérée dans l'article et une plus grande (600 à 800 pixels) qui apparaîtra lorsque l'internaute cliquera sur la petite. Dans mon exemple, la petite photo s'appelle "fruit_small" et la grande "fruit_large".

Préparez votre billet et insérez la petite version de la photo comme je vous l'ai appris dans un article précédent. La balise "img" apparaît alors dans le texte (cliquer sur la petite copie d'écran ci-dessous pour l'ouvrir en plus grand dans une autre fenêtre).


C'est maintenant qu'il faut être attentif(ve)! Cliquez de nouveau sur l'icône d'insertion d'une image interne. Transférez la photo version grande taille, puis déplacez vous dans cette liste pour la retrouver, mais sans cliquer dessus. Vous voyez en dessous de la photo son nom en bleu souligné. Mettez la souris sur ce lien et faites un clic-droit dessus afin de faire apparaître le menu contextuel. Dans le menu contextuel, cliquez sur "Copier l'adresse du lien", puis refermez la fenêtre de vos images.

Par cette manipulation, vous venez de copier dans votre presse-papier l'adresse de la photo en grande taille, telle qu'elle est enregistrée chez mon hébergeur. Vous êtes revenu(e) dans l'éditeur du message. Sélectionnez l'ensemble de la balise "img", y compris les signes "inférieur" et "supérieur" qui la délimitent. Une fois la sélection effectuée, cliquez sur l'icône de création de lien.

La petite fenêtre de définition du lien s'ouvre et vous positionnez votre curseur à l'intérieur. Effectuez de nouveau un clic droit de la souris dans cette fenêtre et cliquez sur "Coller" dans le menu contextuel, ou simplement faites "Ctrl-v". Vous avez alors automatiquement copié l'adresse qui était dans le presse-papier, sans avoir jamais eu à la connaître réellement.

Faites [OK] une première fois, puis une deuxième fois lorsqu'on vous demande la langue de référence. Votre balise "img" qui définit la petite image insérée dans le texte est maintenant précédée de la balise "a" (ou balise d'ancre) qui renverra vers la grande photo en cas de clic, et suivie de la balise de fermeture "/a".

Si on en reste là , ce qui est toujours possible, le fait de cliquer sur la petite image ouvrira la grande à la place des articles du portail. Ça marche, mais ce n'est pas très sexy. Il faut maintenant franchir une dernière étape. A la fin de la balise "a", juste avant le signe "supérieur", remplacez hreflang="fr" par rel="lightbox" sans oublier les guillemets ni l'espace avant rel.


Et voilà, c'est fini et ça marche!