showMe.js : le nouveau  visualiseur d’images javascript de type lightbox  mais en plus simple.

Travaillant dans l’informatique, je possède plusieurs sites  dont certains présentes des photos. J’ai notamment un site privé sur lequel je mets les photos et vidéos de mes enfants. Assez simple, le site utilisait un plugin lightbox pour afficher les photos ainsi que les vidéos (converties préalablement en flash).  Cela fonctionnait plutôt bien jusqu’à ce que certains navigateurs bloquent Flash. Apple le bloquait déjà depuis des années sur ses smartphones et tablettes. J’ai donc cherché une solution pour pouvoir palier à cela.  Finalement je n’ai pas trouvé grand chose. Je cherchais un visualiseur de photos ET vidéos simple à mettre en place, qui puisse les afficher en plein écran sur smartphones ou ordinateur, avec la possibilité de passer d’une photo à une autre facilement, tout cela sans fioriture. Malgré une dizaine d’essais, je n’ai pas trouvé exactement ce que je voulais, j’ai donc décidé de le développer moi-même et j’ai codé showMe.js

showMe.js affiche toutes les images du web, les vidéos au format mp4, les pdf, du contenu html ainsi que des pages entières d’autres sites (j’intégrerai les vidéos youtube, dailymotion et autres vimeo si le besoin s’en fait sentir). On passe d’un élément à un autre avec les flèches du clavier ou en cliquant sur les flèches gauche et droite.  La touche « Echap » ou un clic sur la croix fait sortir du mode plein écran et ainsi permet de retourner à la galerie.  Un pré-chargement est effectué afin de gagner du temps à l’affichage des photos et ainsi avoir une impression d’immédiateté plus importante. La couleur du fond s’adapte en fonction du contenu de l’image, ce qui, à mon goût, permet de mieux la mettre en valeur. Mais vous pouvez choisir vous-même la couleur de fond si vous le souhaitez.

Vous pouvez voir showMe.js en action ici : http://smoking.xig.fr/ecology (uniquement sur des images)

Sinon vous pouvez vous faire une idée est le tester sur la page showMe.js . J’y ai mis quelques exemples et la manière de l’utiliser.

J’ai essayé de faire en sorte qu’il soit très simple à intégrer dans une page web. Il n’a besoin que de la librairie jquery pour fonctionner.

Le projet est déposé sous github sous la licence GPL-3.0

N’hésitez pas à faire des retours s’il y a des améliorations ou autres bugs à prendre en compte.  Et merci de mettre un petit commentaire si vous l’utilisez. Vous pouvez même mettre un lien vers la page qui utilise showMe.js :-)