City Hunter
Utilisateur : anonyme   Jeudi 21 Novembre 2024 
     
Provenance géographique des visiteurs


SOFUN - Blog, article : Armada Rouen 2003 en Diaporama Javascript mercredi 23 novembre 2005 - 23:42
Armada Rouen 2003 en Diaporama Javascript


 
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é :
    <script src="http://so.fun.free.fr/modules/commun/scripts/diaporama_objet.js"></script>
<script>
	nouveau_id_diaporama = monDiaporama.length;
	monDiaporama[nouveau_id_diaporama] = new Diaporama(nouveau_id_diaporama, 50, 10, 2000, 500, 600);
	monDiaporama[nouveau_id_diaporama].ajoutePhoto("http://mon.serveur.fr/.../photo_01.jpg");
	monDiaporama[nouveau_id_diaporama].ajoutePhoto("http://mon.serveur.fr/.../photo_02.jpg");
	monDiaporama[nouveau_id_diaporama].ajoutePhoto("http://mon.serveur.fr/.../photo_03.jpg");
	monDiaporama[nouveau_id_diaporama].ajoutePhoto("http://mon.serveur.fr/.../photo_xx.jpg");
	monDiaporama[nouveau_id_diaporama].masquerPanneauCommande();
	monDiaporama[nouveau_id_diaporama].ajouteCadre(3, "#000000");
	monDiaporama[nouveau_id_diaporama].placeDiaporama();
	monDiaporama[nouveau_id_diaporama].testImagesOk();
</script>

  • apportez les modification suivantes :
    • ligne "new Diaporama" :
      • 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é.
 
publié par Forrest
Ajouter un commentaire

Voir les commentaires (32)





Nombre de surfeurs égarés en ce moment : 1
SOFUN - Le Site Où il Fallait Un Nom