J'ai finalement adapté le code du plugin lightbox développé par Olivier pour Dotclear 2 en l'intégrant directement dans le thème utilisé ici. Ça ne change rien aux contenus des billets puisque le code se charge de trouver les images présentes sur la page — j'ai volontairement limité cette recherche aux photos habituellement encadrée de gris, en tout cas sur Firefox et consort. Le deuxième avantage est que le javascript désactivé ne remet pas en cause l'affichage en taille réelle des photos.[1]
Pourquoi, me direz-vous, ne pas utiliser un des plugins existants pour proposer cette fonction ? Et bien pour deux raisons. La première est que je ne voulais pas reprendre un à un les nombreux billets[2] comportant des photos pour ajouter la nécessaire balise (rel="…
). D'autre part je souhaitais être libre de modifier la cible de ce traitement à une partie seulement des images présentes ici.[3]
Vous n'avez plus qu'à cliquer sur une des photos présentes sur la page — les lecteurs via flux RSS vont devoir quitter leurs chaussons et leurs couvertures chauffantes pour venir faire une tour sur le blog — pour tester l'ensemble. Pour rappel, une fois affiché, les touches c
ou esc
permettent de fermer la fenêtre (c pour close, fermer en anglais), les touches p
et n
permettent respectivement d'afficher la photo précédente (p pour previous, précédent en anglais) et la photo suivante (n pour next, suivante en anglais), les photos présentes dans un seul et même billet étant affichées ensemble.
Notes
[1] J'ai tout de même redimensionné toutes les quelques 1200 photos dans ce cas en 800 pixels au maximum pour que l'affichage de type lightbox ne déborde pas de trop sur les écrans de taille modeste.
[2] J'en ai plusieurs centaines dans ce cas.
[3] Le plugin lightbox d'Olivier cherche les URL d'images présentes sur la base de leurs extensions (jpg, jpeg, png et gif), alors qu'ici je fais une recherche en fonction du début de l'adresse, c'est à dire sur le nom de répertoires particuliers.
1 De Lomalarch -
Très réussi :-)
J’ajouterai juste que, pour la navigation, on peut préférer les touches directionnelles gauches et droites du clavier (je trouve ça, pour ma part, plus pratique que p et n – sauf sur certains claviers de portables, peut-être)…
2 De tiben -
Effectivement, ce type d'affichage rend vraiment bien sur les blog, je l'ai moi-même mis en place depuis quelques mois.
par contre, combien de ko s'ajoutent à charger pour les visiteurs ? et pourquoi pas slimbox ??
belle initiative en tous cas
3 De jathénaïs -
Testé. C'est rapide et relativement pratique. Par contre (c'est un détail), si c marche bien pour fermer, esc est inopérant chez moi... (et la touche fonctionne normalement, je suis allée vérifier sur autre chose)...
4 De Franck -
Lomalarch tu as raison pour les flèches, je vais voir si je peux faire quelque chose.
tiben, je viens de regarder, c'est environ 120 ko de plus qui rentre dans le cache. Quand à slimbox je trouvais l'affichage moins réussi que celui de lightbox.
Jathénaïs, cela fonctionne (je parle de la touche
esc
) avec Firefox sur Mac, je regarderais avec d'autres navigateurs pour voir …5 De Moe -
Tu utilises Dotclear 2 ? Tes URLs ressemblent à des URLs Dotclear 1.
Ça pourrait être bien que le script fonctionne aussi sur les galeries. Je crois qu'il y avait eu un sujet à ce propos sur le forum, apparemment la navigation page précédente/suivante était difficile à mettre en place.
6 De Franck -
Non j'utilise Dotclear 1 et il fonctionne uniquement sur les images prises une à une des galeries. Je regarderais ça plus tard.
Côté clavier je viens de vérifier :
p
etflèche gauche
provoque l'affichage de l'image précédente (s'il y en a une)n
etflèche droite
provoque l'affichage de l'image suivante (s'il y en a une)c
,x
etesc
provoque la fermeture de la fenêtre d'affichage7 De Franck -
La touche
esc
pour fermer ne semble fonctionner qu'avec Firefox, ni Opera ni WebKit (futur Safari) ne la prenne en compte.Quand aux flèches elles sont actives et prises en compte partout (pour autant qu'il y ait au moins deux photos dans le billet).
8 De gilsoub -
Trés sympa ton truc, et heu... C'est adaptable facilement à n'importe quel théme DC1? Heu et par un gars ne connaissant strictement rien au javascript, si ce n'est les codes déjà existant en copié/collé que l'on trouve sur certains site et ou il suffit de modifié un ou 2 paramétres genre url du site... Heu si oui, il m'intéresse ton truc ;-)
9 De Franck -
Facilement adaptable, oui je pense. Je ferais un petit tuto la dessus dès que j'aurais deux minutes.
10 De Julien -
En faisant la recherche en fonction de l'emplacement des images, cela exclu la possibilité de bénéficier de l'effet pour des images hébergées ailleurs. C'est dommage, non ?
Pour réduire le poids des fichiers js, il est possible d'utiliser des versions compressé (on peut gagner 80ko).
Sinon, j'ai adapté le plugin pour DC2b7, avec en bonus la possibilité de choisir avec un autre effet utilisant aussi jQuery : Facebox (celui-ci permet d’avoir un diaporama sur les albums).
11 De Franck -
Je préfère l'effet Lightbox même s'il est plus lourd que l'autre, je trouve que les photos sont mieux mises en valeur.
Quand à la fonction de recherche, en effet cela limite son application aux photos hébergées ici. Ceci dit, je ne dois pas en avoir beaucoup qui viennent de l'extérieur car je préfère en héberger une copie localement. Cela évite qu'elle disparaissent pour une raison ou une autre et surtout cela économise la bande passante du serveur d'origine !
12 De Franck -
Je viens de remplacer les fichiers javascript par leurs versions compressées, on gagne effectivement presque la moitié. Tout bénéfice pour les visiteurs. Merci pour l'astuce Julien.
13 De Julien -
Moi aussi je préfère l'effet Lightbox.
Pour ce qui est des fichiers compressés, il faut tout de même se méfier du mode de compression. Voici un article qui explique très bien pourquoi. Pour résumé, il est sans doute préférable d'utiliser la compression JSMin plutôt que les packers javascript.
Mais on s'écarte un peu du sujet ;-)
14 De Franck -
Pour ce qui est des fichiers compressés, j'ai effectivement choisi l'option min, préférables à mon sens (j'en ai eu l'intuition avant de lire l'article que tu cite).