De temps à autres, pour me détendre, je consulte en ligne une bande dessinée que j'avais l'habitude de lire dans le programme télé. En français, cette BD s'appelle Grimmy, ce nom étant celui de cette espèce de chien jaune qui semble être un cousin proches des smileys les plus courants.
En version originale, cette BD s'intitule Mother Goose & Grimm (Mère l'oie & Grimmy) et vous pouvez consulter quotidiennement ses aventures dans la section "Comics", en passant par le lien précédant ou en cliquant sur directement sur l'image.
Aujourd'hui, pas d'effet spectaculaire.
Euuh, maintenant que j'y pense, s'il n'y a pas d'effet spectaculaire sur l'image dans l'article, j'ai tout de même ajouté une nouvelle fonctionnalité : il est désormais possible d'ajuster les menus de gauche à votre convenance, comme me l'avait suggéré Ludo dans les commentaires de cet article. Dites-moi ce que vous en pensez.
(^_^).oO
Humm, après ça, il ne me reste plus qu'à finaliser correctement l'interface d'admin pour les laisser écrire les articles qui leurs plaise comme ça je pourrai glander.
SOFUN - Blog, article : Armada Rouen 2003 en Diaporama Javascript
mercredi 23 novembre 2005 - 23:42
Voici enfin la première mise à disposition publique du script permettant de créer un diaporama.
Pour me faire pardonner du temps écoulé entre la mise en apétit et ce présent article, et pour consoler ceux qui ne l'utiliseront pas, ce n'est pas moins de 14 clichés que je vous offre aujourd'hui.
Ces photos ont été prises lors de l'Armada de Rouen en 2003, et plus précisément à la fin, lors de la descente de la Seine en bateau. Pour l'occasion, j'avais participé techniquement au site web de l'événement. Les connaisseurs, dont je ne fait pas partie, pourront y reconnaître le trimaran d'Olivier de Kersauson.
Et maintenant, la partie technique.
Afin de mettre en place un diaporama, procédez ainsi :
insérez le code suivant à l'emplacement souhaité :
50 : temps, en millisecondes, entre chaque étape de réduction de la photo au premier plan. Plus le nombre est grand, plus la transition est longue, et inversement.
10 : nombre de pixels retirés à chaque étape de réduction de la photo au premier plan. Varie entre 1 et la largeur de la photo. Plus le nombre est petit, plus la transition est fluide et lente.
2000 : temps de pause, en millisecondes, entre chaque photo.
500 : largeur des photos en pixel. La photo réelle doit avoir exactement cette largeur car elle ne sera pas redimentionnée automatiquement comme avec une balise IMG.
600 : hauteur des photos en pixel. La photo réelle doit avoir exactement cette hauteur car elle ne sera pas redimentionnée automatiquement comme avec une balise IMG.
ligne "ajoutePhoto" : cette ligne permet d'ajouter une photo au diaporama. Il faut un minimum de trois photo pour le faire fonctionner. Le maximum n'est limité que par le nombre de vos photos. Je pense qu'il est inutile de préciser que la partie en gras doit être remplacée par l'adresse de vos photos.
ligne "masquerPanneauCommande" : cette fonction, facultative (je vous invite à supprimer cette ligne entièrement), permet de masquer la case à cocher servant à mettre en pause le diaporama.
ligne "ajouteCadre" : une autre ligne facultative qui permet d'ajouter une bordure au diaporama.
3 : épaisseur de la bordure en pixels.
#000000 : code couleur pour la bordure.
Si vous conservez la toute première ligne intacte, le script sera utilisé à partir de ce site. Cela ne me pose aucun problème. Je tiens seulement à préciser que celui-ci peut être modifié à tout moment afin d'apporter des corrections pour résoudre les problèmes qui me sont signalés ou d'y ajouter de nouvelles fonctionnalités. En revanche, et bien que je fasse tout ce qui m'est possible pour éviter d'y apporter tout problème nouveau par rapport aux versions précédentes, il n'est pas impossible d'obtenir des effets secondaires indésirables (je ne parles pas de risques d'embrasement instantanné d'immeubles, je me suis ammélioré depuis). Je vous conseille donc de garder une copie du javascript que vous pouvez télécharger ici. (Avec Firefox, il faut faire un "click droit" sur le lien puis "Enregistrer la cible du lien sous..."). Dans le cas de utilisation de votre copie du fichier javascript, il vous faut remplacer l'adresse par la votre.
Voila, je pense que ça devrait suffire comme explication, mais n'hésitez pas à demander des précisions.
Je vous invite également à laisser un commentaire avec le lien de vos diaporamas afin de montrer que ça marche ailleurs qu'ici.
PS : depuis le 05/03/06, une mise à jour du script a été effectuée pour permettre d'utiliser des transitions en fondu enchaîné.