10.30.2007

Lightbox 2

Après avoir discuté hier soir avec le VP du club photo Optica de mon université, nous avons décidé de changer le look du site autant au point de vue de la forme que du contenu. Pour le moment, mon mandat est de trouver un template intéressant en CSS qu'on peut utiliser sans faire de modification majeure.

On veut également rendre l'expérience utilisateur plus attrayante pour qu'il vienne sur le site pour avoir du plaisir et se renseigner et non seulement pour consulter le calendrier des activités par exemple. Ainsi, nous avons quelques idées en banque comme incorporer les items partagés de Google Reader, inclure des photos (soit de picasa, flickr, etc) des membres, etc. Ma mission consiste, à court terme, à parcourir le web pour voir ce qui est intéressant pour un site sans langage de programmation. On veut simplement du html, du css et du javascript.

Donc, après avoir fouillé sur le web et discuté avec quelques collègues du bureau, je suis tombé sur Lightbox, un framework qui ajoute une magnifique animation (un slideshow) à vos images à la manière de Picasa. Le tout est en javascript et on a simplement besoins d'inclure les scripts dans l'entête HTML ainsi que la CSS associé. Voici un exemple d'appel de lightbox:

<a href="http://www.blogger.com/images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Comme vous voyez, c'est très simple. On ajoute l'attribut rel="lightbox" et un titre optionnel. Ces animations sont vraiment jolies. Elles sont simples et efficaces. Il y a fort à parier que je vais les inclure dans le site.

Prochaines étapes: trouver un moyen d'incorporer des images de flickR (et Picasa) dans le site.


Aucun commentaire:

Mes items partagés de Google Reader