City Hunter
Utilisateur : anonyme   Vendredi 23 Août 2019 
     
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)

 
ça fonctionne à merveille !!
Voici le lien où j'ai utilisé le script avec 7 photos :

http://www.legnoch.com/article-1211390.html

C'est génial !! Merci Forrest !!
Commentaire de legnoch (site web) le jeudi 24 novembre 2005 - 06:24

 
Bon sur mon blog, dans les infos pratiques (marge de gauche) j'ai mis un lien sur cet article qui s'appelle "créer un diaporama en ligne"... Voilà c'était pour info !
@+
Commentaire de legnoch (site web) le jeudi 24 novembre 2005 - 06:40

 
Merçi de ton commentaire et surtout de tes précieux conseils pour ce montage diapo. Je vais tenter de faire la même chose mais c'est pas gagner, je suis pas doué dans ce domaine. Amicalement
Commentaire de christian (site web) le jeudi 24 novembre 2005 - 08:39

 
J'aime bien Olivier de Kersauzon. Il est très marrant. Hein je te l'ai soufflée celle-là Forrest!
Commentaire de Ludo (site web) le jeudi 24 novembre 2005 - 09:55

 
et il n'a pas la grosse tete...
Commentaire de MP (site web) le jeudi 24 novembre 2005 - 12:18

 
legnoch : merci de m'avoir donné l'occasion de l'expérimenter sur over-blog. Au passage, j'ai trasformé ton lien en un vrai lien. et merci aussi pour le lien supplémentaire.

christian : tu peux le faire ;)

Ludo : j'étais tellement fatigué quand j'ai fait l'article que je n'y avais même pas pensé (-_-)ZZzzz...

MP : alors, même pas un petit témoignage de réussite ?
Commentaire de Forrest (site web) le vendredi 25 novembre 2005 - 15:42

 
Merci pour cette info...je l'a cherchais...je vais l'essayer ;-)
Commentaire de Pascal (site web) le vendredi 25 novembre 2005 - 19:19

 
N'hésite pas à me faire part d'éventuels problèmes rencontrés : les CSS d'over-blog peuvent créer des effets inatendus, mais tout reste améliorable.
Commentaire de Forrest (site web) le lundi 28 novembre 2005 - 00:39

 
C'est génial, je vais tenter de suite l'aventure!^^ La pub de Legnoch à marché ^^ Je viens souvent sur son blog et comme je suis de nature curieuse je suis venue voir! Je te tiens au courant si ça à marché!^^

sugi
Commentaire de sugi (site web) le lundi 28 novembre 2005 - 15:14

 
Et voila^^ test réussi!
C'est vraiment super!!!!
J'ai fait un petit article avec un lien vers ton site! Je vais te rajouter dans ma liste de liens technique (module de gauche)

Sugi
Commentaire de sugi (site web) le lundi 28 novembre 2005 - 15:55

 
oups j'ai oublié de mettre le lien vers l'article^^
http://sugihyde.over-blog.com/article-1290310.html
Commentaire de sugi (site web) le lundi 28 novembre 2005 - 15:58

 
Comme c'est plaisant de se sentir utile :)
Merci d'avoir pu expérimenter avec succès mon diaporama.
Ca vaut bien la peine que je transforme ton lien en un vrais lien.
Commentaire de Forrest (site web) le lundi 28 novembre 2005 - 17:25

 
Salut Forrest !
Mille mercis pour cette trouvaille, je cherchais depuis un petit moment ce genre de diaporama visible avec tous les navigateurs :)
J'ai évidemment cité ton site !
Bonne continuation ,)
Amitiés
Article : http://kikojo.over-blog.com/article-1298129.html
Commentaire de kikojo (site web) le mardi 29 novembre 2005 - 22:17

 
Décidément, mon script est la porte vers mon succès :)
Merci a toi, kikojo, pour cette belle utilisation du diaporama.

Pour la compatibilité, je n'ai pu tester que sur IE et Firefox, mais c'est déjà pas mal. Il me reste à savoir ce que ça donne sur Mac. Quelqu'un a un Mac ?

Woketi Poketi, encore un lien transformé.
Commentaire de Forrest (site web) le mardi 29 novembre 2005 - 23:27

 
Salut Forrest !
Merci de ta visite ,)
Ben non, pas de mac mais le plus important c'est que ça fonctionne avec tous les navigateurs... Je ne pense pas, que l'on est un pc ou un mac, que cela change quelque chose ?! Sait-on jamais, tu fais bien de poser la question quand même ,)
Bonne journée et à bientôt !
Amitiés ;)
Oups ! Merci pour le lien :)
Commentaire de kikojo (site web) le mercredi 30 novembre 2005 - 11:18

 
Wouahhhh ! Alors là c'est encore plus fort :)
Je le précise de suite dans mon article ,)
Bravo Forrest !
Commentaire de kikojo (site web) le mercredi 30 novembre 2005 - 14:38

 
Heu... Et avec une touche "marche" et "arrêt" c'est trop demandé ;o)))))
Commentaire de kikojo (site web) le mercredi 30 novembre 2005 - 14:39

 
Le case "automatique" était la solution la plus simple et la moins risquée au niveau bug.
J'ai mis en place ce système après la remarque de Briesing dans cet article.

Pour la prochaine version, je penserai à ajouter cette possibilité.
Commentaire de Forrest (site web) le mercredi 30 novembre 2005 - 15:56

 
Bonsoir !
C'est magnifique cette succession de voiliers !
J'ai encore une remarque à faire, si tu permets...;) serais-tu gaucher, par hasard ? Pour moi, ce serait plus confortable si le déroulement des photos se produisait de gauche à droite... dans le sens de la lecture.
J'ai hâte de passer en privilège pour tenter ça !
Bonne soirée
Commentaire de Briesing (site web) le mercredi 30 novembre 2005 - 19:48

 
Je ne suis pas gaucher, et le fait que je lis des manga n'y est pas plus pour quelque chose.
En fait, c'était moins compiqué au niveau de la programmation.
Je vais ajouter cela à la liste des améliorations à y apporter.

Humpf, j'aurai dû commencer par la transition floue : pas de problèmes de droite ou de gauche. Ca commence à ressembler à un débat politique :D
Commentaire de Forrest (site web) le mercredi 30 novembre 2005 - 20:01

 
un coucou en passant^^
Bizzzzzzz

sugi
Commentaire de sugi (site web) le mercredi 07 décembre 2005 - 19:33

 
Merci beaucoup pour ces quelques lignes de programmation qui m'ont permis enfin de réaliser un diaporama en ligne.

Mais peut être beaucoup d'autres lignes de code sont cachées derrière le .js ?
En tous cas, merci beaucoup et si le logiciel doit recevoir des améliorations, je serai preneur.

Par exemple pour positionner la case de pose au dessus de la photo plutôt qu'en dessous (pour être toujours visible).

Merci encore.


Yvon Cuzon

J'ai intégré le logiciel à mon blog: 250 photos haute définition visibles à http://pixel29.blog.lemonde.fr/pixel29/
Commentaire de Yvon Cuzon (site web) le vendredi 03 février 2006 - 20:37

 
Je suis toujours aussi satisfait du fonctionnement de ce logiciel.
Je fais une proposition d'amélioration pour le confort de l'internaute: pourquoi ne pas démarrer l'affichage des photos dès que quelques photos sont disponibles. Le temps d'attente du téléchargement des suivantes serait masqué par le temps de visualisation des premières photos du diaporama ?
Commentaire de Yvon Cuzon (site web) le mardi 07 février 2006 - 10:15

 
Merci Yvon, c'est toujours plaisant de voir son travail apprécié.

Pour ta proposition d'amélioration, je vais ajouter ça à ma liste de chose à faire. Je pense que cette amélioration est tout de même moins évidente que ça n'en a l'air, mais je vais essayer de m'y coller en même temps que tout le reste.
Commentaire de Forrest (site web) le mardi 07 février 2006 - 21:07

 
Je suis attentif au temps d'affichage d'un diaporama.
36 photos (6 M0)chargées en 3 minutes sur mon PC.
Etonnement car 6 Mo de données d'un autre site arrivent en 17 secondes.
As-tu une piste pour expliquer cette différence?

Peux tu essayer sur ta machine le chargement du diporama pour écran 1280 pixels sur mon site et me le communiquer?

Merci encore,

Yvon
Commentaire de Yvon Cuzon (site web) le lundi 13 février 2006 - 18:30

 
Je pense que la différence de vitesse viens simplement de la bande passante de l'hébergement du site.
Pour ma part, je dispose d'une petite connexion en 512Ko :( et quand je suis à fond, il me faut un minimum de 5 secondes pour une photo de ton diaporama, il m'est donc impossible de descendre en dessous de 3 minutes.
Pour le moment, essaie d'optimiser le poids de tes photos, pour les personnes qui ont une petite connexion : imagine, un minimum de 30 minutes sur une connexion RTC car il y en a encore ;)
Je pense que c'est possible sans perdre en qualité de manière visible.
Commentaire de Forrest (site web) le samedi 18 février 2006 - 15:34

 
Ce diaporama est superbe.. mais je vois que je suis la seule à ne pas réussir à faire fonctionner le script..

J'ai besoin d'aide Forrest!!!!

Je travail mon site sous Adobe PageMill.
Voila un copier coller de ma page en html :


<HTML>
<HEAD>
 <META NAME="GENERATOR" CONTENT="Adobe PageMill 3.0 Win">
 <TITLE>Document sans titre</TITLE>
</HEAD>
<BODY>

<!--SELECTION--><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("<IMG SRC="file:///C:/Site%20dogues/images%20dogues/007.jpg");
   monDiaporama[nouveau_id_diaporama].ajoutePhoto("<IMG SRC="file:///C:/Site%20dogues/images%20dogues/assur2mois1.jpg");
   monDiaporama[nouveau_id_diaporama].ajoutePhoto("<IMG SRC="file:///C:/Site%20dogues/images%20dogues/assur3mois.jpg");
   monDiaporama[nouveau_id_diaporama].masquerPanneauCommande();
   monDiaporama[nouveau_id_diaporama].ajouteCadre(3, "#000000");
   monDiaporama[nouveau_id_diaporama].placeDiaporama();
   monDiaporama[nouveau_id_diaporama].testImagesOk();
</script><!--/SELECTION-->

</BODY>
</HTML>

Merci de me sauver.. ma connerie doit être énorme mais j'ai du mal à comprendre se language !!!
Merci encore
donia
Commentaire de donia le vendredi 24 février 2006 - 19:49

 
Le problème vient du code que tu as inséré dans la fonction ajoutePhoto.
Il faut que tu supprimes <IMG SRC=".

Pour les lignes concernées, tu obtiens donc :
   monDiaporama[nouveau_id_diaporama].ajoutePhoto("file:///C:/Site%20dogues/images%20dogues/007.jpg");
   monDiaporama[nouveau_id_diaporama].ajoutePhoto("file:///C:/Site%20dogues/images%20dogues/assur2mois1.jpg");
   monDiaporama[nouveau_id_diaporama].ajoutePhoto("file:///C:/Site%20dogues/images%20dogues/assur3mois.jpg");


N'oublie pas de remplacer les URLs de tes images lorsque tu mettras ta page en ligne ;)
Commentaire de Forrest (site web) le vendredi 24 février 2006 - 23:03

 
j'ai pris note pour<IMG SRC=".
Voila le nouveau script mais ça ne fonctionne encore pas.

<HTML>
<HEAD>
<META NAME="GENERATOR" CONTENT="Adobe PageMill 3.0 Win">
<TITLE>Essai de Diaporama</TITLE>
</HEAD>
<BODY>

<!--SELECTION--><!--/SELECTION-->
<BR>
<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(&quot;http://perso.wanadoo.fr/doniadogue/images%20dogues/diaporama.jpg&quot;);
monDiaporama[nouveau_id_diaporama].ajoutePhoto(&quot;http://perso.wanadoo.fr/doniadogue/images%20dogues/diaporama2.jpg&quot;);
monDiaporama[nouveau_id_diaporama].ajoutePhoto(&quot;http://perso.wanadoo.fr/doniadogue/images%20dogues/diaporama3.jpg&quot;);
monDiaporama[nouveau_id_diaporama].ajoutePhoto(&quot;http://perso.wanadoo.fr/doniadogue/images%20dogues/diaporama4.jpg&quot;);
//monDiaporama[nouveau_id_diaporama].masquerPanneauCommande();
monDiaporama[nouveau_id_diaporama].ajouteCadre(3,&quot;#000000&quot;);
monDiaporama[nouveau_id_diaporama].placeDiaporama(); monDiaporama[nouveau_id_diaporama].testImagesOk();
</script>
<BR>
<BODY BGCOLOR="#000000"><BODY>

</BODY>
</HTML>

Est ce que je l'ai placé au bon endroit dans ma page?
donia
Commentaire de donia le samedi 25 février 2006 - 14:40

 
Voici l'adresse de ma page internet, en affichant la source ça sera peut etre plus facile de voir mon erreur...!
http://perso.wanadoo.fr/doniadogue/diaporama

merci encore
Commentaire de donia le samedi 25 février 2006 - 14:59

 
Bon, j'ai été voir le code source de ta page, mais sans vouloir te vexer, il est truffé d'erreurs de recopie.

Donc on va partir du code source que tu as tenté de copier/coller dans les commentaires et que j'ai modifié pour qu'il s'affiche.

Dans ce code, il y a deux type d'erreur : 3 ouvertures de balise BODY. Le mieux est de concerver celle qui contient le paramètre de couleur et de la placer à l'endroit de la première.

Deuxième erreur, répétée 10 fois : les guillemets dans les fonctions ajoutePhoto et ajouteCadre ont été remplacé par &quot;.

Je te laisse faire le remplacement par toi même ;)
Commentaire de Forrest (site web) le lundi 27 février 2006 - 21:22

 
Bonsoir Forrest,

Je ne me vexe pas !! je crois que c'est en faisant des erreurs qu'on apprends..!
Par contre lorsque j'ai recopié le script j'ai bien utilisé des guillemets et non les ".. mais des que je met ma page sur le net,ce sont ces codes qui s'affichent..

je viens de recopier le script sur une autre page test qui sera similaire à celle avec le vrai diaporama.. mais sans succés..
http://perso.wanadoo.fr/doniadogue/planbis

je ne comprends vraiment pas.. j'ai beau relire ton script et tes explications une fois sur le net nos deux codes ne se ressemblent plus...

Donia
Commentaire de donia le mardi 28 février 2006 - 20:13

Ajouter un commentaire




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