Galerie d’images Mozaic

Tout ce que je voulais, c’était copier un ou plusieurs dossiers de photos sur un serveur FTP, et les rendre immédiatement visibles par une page web dynamique, sous une forme qui ait de la gueule :

Mozaic - Galerie d'images

Première tentative avec une table HTML générée dynamiquement, mais ce n’est pas très adaptable à de multiples résolutions, et encore moins au redimensionnement.

Au final, j’ai préféré générer des balises <div>, contenant les miniatures, et positionner ces <div> par javascript, mais attention, encore une fois : de la gueule, bordel !

Donc, direction http://script.aculo.us/ et leurs incroyables fonctionnalités d’animation.

En ce qui me concerne, un simple Effect.move() me satisfait amplement.

Les miniatures sont donc positionnées dynamiquement ET joliment, en fonction de la largeur d’écran disponible.

Et pour zoomer sur une image, merci à lightbox, c’est du beau boulot 🙂

Ça, c’était pour la partie client ; je n’ai fait qu’assembler des briques existantes de façon… disons harmonieuse. Avec un peu de CSS pour faire joli.

Côté serveur, c’est évidemment en PHP, et il y a eu un petit peu plus de boulot.

J’ai repris mon framework maison habituel, avec comme moteur de template Dwoo (tip top, et bien plus léger que Smarty)

Comme il n’y a qu’une page, c’est peut être un peu masturbatoire de mettre en place cette structure (même si elle reste légère), mais au moins elle est là pour la suite si j’ai des envies futures.

Bref ! Dans ce type d’application, il est à mon humble avis judicieux de générer des miniatures pour l’affichage dans la galerie. Pas question de faire télécharger aux clients des images full-size pour les afficher à 200 pixels de large…

Donc, une petite fonction génère un cache de miniatures sur le serveur, et ce sont ces miniatures qui sont envoyées pour l’affichage global de la galerie. Et si l’utilisateur veut grossir une des images, alors on peut lui envoyer une image plus grande (dans mon cas, je n’envoie pas l’image full-size non plus, mais une image à 800px). Et si VRAIMENT on veut pouvoir accéder à l’image full size, il n’y a qu’à générer un lien par image.

Côté sécurité, il y a une protection contre le path traversal, c’était la moindre des choses.

Voici le résultat : http://mozaic.dirtymarmotte.net. Appréciez le comportement quand on redimensionne la fenêtre…

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Es-tu capable de répondre à ça? * Time limit is exhausted. Please reload the CAPTCHA.