City Hunter
Utilisateur : anonyme   Mardi 23 Avril 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)

SOFUN - Blog, article : Quotidien japonais samedi 12 novembre 2005 - 02:53
Quotidien japonais


 
Suite à une suggestion de legnoch, j'ai entrepris de créer un diaporama pour donner un meilleur effet que le roll-over. Après plusieurs heures d'un travail acharné, j'ai fini de peaufiner un script satisfaisant, tant sur le rendu qu'au niveau des possibilités de paramétrage. Je reste tout de même un peu déçu de ne pas parvenir à le faire marcher dans le lecteur RSS alors que le rollover y parvient, mais il faut avouer que le roll-over c'est de la rigolade à coté du diaporama. Voici donc ce que cela peut donner :


Les quatre photos constituant ce diaporama ont été prises en Aout 2002 dans le secteur de la gare de Nagoya, au Japon, lors de mon séjour chez Ludo. Celles-ci font partie d'une collection sans grande prétention : je n'avais pas cherché à prendre quelque chose d'exceptionnel mais plutôt à immortaliser un environnement quotidien.

Concernant le script en lui même, je vous le proposerai dans un prochain article car je viens de sauter quatre repas (sans compter le fait que je n'ai pas pris de petit déjeuner ni de goûter). C'est inquiétant d'avoir à ce point la flemme de faire la cuisine.
En revanche, je n'ai pas pu le tester avec succès sur le compte de test que j'ai créé sur Over-blog. En effet, étant en mode "confiance", je n'ai pas la possibilité de mettre de javascript dans les articles. Je ne sais pas si certains d'entre vous, utilisateurs d'Over-blog, sont dans le mode Privilège, mais j'espère que certains pourront utiliser ce diaporama créé pour toi, public ;)
 
publié par Forrest
Ajouter un commentaire

Voir les commentaires (17)

SOFUN - Blog, article : Roll-Over à 10000 Yen dimanche 06 novembre 2005 - 16:56
Roll-Over à 10000 Yen


 
J'ai pu constater dernièrement sur les blogs environnants que la question sur la mise en place d'un roll-over intéresse quelques personnes.
Voici donc un petit article pour détailler ce procédé.

D'abord, nous mettons en place notre image de base :

<img src="http://mon.serveur.fr/.../image1.jpg">


Cette image va devoir ensuite être capable de détecter le passage de la souris. Pour cela, nous disposons de deux événement, onMouseOver et onMouseOut, qui sont solicités lorsque le curseur de la souris entre et sort de la zone image.

L'utilisation de ces deux événements est assez simple :
  • onMouseOver="action1"
  • onMouseOut="action2"
    où action1 va permettre de faire afficher la nouvelle image et action2 va permettre de faire afficher l'image initiale.

    Bon, j'espère que je ne vais pas embrouiller les esprits.

    Les deux instructions vont donc ressembler à ça :
  • onMouseOver="this.src='http://mon.serveur.fr/.../image2.jpg'"
  • onMouseOut="this.src='http://mon.serveur.fr/.../image1.jpg'"

    Afin d'éviter toute mauvaise surprise, il faut bien faire attention d'encadrer les deux URLs de simples guillemets (apostrophes) pour ne pas causer de problème avec les doubles guillemets qui encadrent l'action.

    Il ne reste plus qu'à intégrer les deux événements à l'intérieur même de la balise permettant l'affichage de l'image :
    <img src="http://mon.serveur.fr/.../image1.jpg" onMouseOver="this.src='http://mon.serveur.fr/.../image2.jpg'" onMouseOut="this.src='http://mon.serveur.fr/.../image1.jpg'">

    Bien entendu, il est préférable d'éviter le s retours à la ligne.

    Pour mon exemple concrêt, voici ce que ça donne :

    <img src="http://so.fun.free.fr/modules/blog/photos/10000yen_face1.jpg" width="400" onMouseOver="this.src='http://so.fun.free.fr/modules/blog/photos/10000yen_face2.jpg'" onMouseOut="this.src='http://so.fun.free.fr/modules/blog/photos/10000yen_face1.jpg'" border="3">


    Je pense qu'il s'agit de la plus simple manière de faire car elle ne nécessite pas l'appel de fonctions.
    J'espère que cela vous sera utile.
    		•
     
    publié par Forrest
    Ajouter un commentaire

    Voir les commentaires (23)


    Plus r�cents




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