Se connecter avec
S'enregistrer | Connectez-vous

Création de diaporama automatique

Dernière réponse : dans Programmation

Bonjour!
Je suis à la recherche d'aide concernant la création d'un diaporama automatique à insérer dans un site internet. J'ai essayé d'en faire un avec différents logiciels puis de la charger sur le net mais avec plus de 300 photos, le trucs fait plus de 30Mo, donc j'ai vite abandonné.
Si vous avez des scripts à me proposer ou des pages web d'aide, merci de me le faire savoir.
Merci.

Autres pages sur : creation diaporama automatique

Lassé par la pub ? Créez un compte

Ben en fait, ce que je recherche, c'est le moyen de faire défiler eds photos tout seul, avec un timer, comme une présentation powerpoint, tu vois? qu'on puisse l'arreter, le relancer, avec une légende pour chaque photo...
Si c'est ce que tu as a me proposer, je veux bien l'essayer. Et mon hébergeur est free, alors je sais pas si il acceptera ou non...

Je viens aux nouvelles...

J'étais bloqué par mon serveur en php4 et j'ai trouvé la solution qu'il me fallait. Je n'ai certes pas les commentaires sous les photos encore mais je pense que ça va être faisable par la suite en se plongeant dans le javascript.

Je suis parti de la base JSDIAPO (que vous trouverez sans problème avec une googlerie)

Gallery semble bien sinon mais assez lourd pour le serveur (10Mo)
JSDIAPO est nettement plus simple et pas lourd du tout (quelques Ko)

Pour voir un exemple: www.designmobilier.com/diaporama.html

Bonne journée à vous et bon courage.

Voila un javascript de diaporama automatique, séquentiel et aléatoire.

  1. <script>
  2. //
  3. // ======= DIAPORAMA SEQUENTIEL, ALEATOIRE ET AUTOMATIQUE ==============
  4. // Mettre les images visuel1.jpg à visuelXXX.jpg dans un dossier diaporama
  5. //  ================================================================
  6. // on initialise le compteur d'images
  7. var compteur = 1;
  8.  
  9. // le nombre total d'images
  10. var total_img = 215;
  11.  
  12. // i pour le tirage aléatoire
  13. var i;
  14.  
  15. // le délai du défilement automatique en secondes
  16. var timeDelay = 5;
  17. timeDelay *= 1000;
  18.  
  19. // La fonction pour faire monter le compteur
  20. function monter() {
  21. compteur += 1;
  22. if ( compteur == (total_img + 1) ) {
  23. compteur = 1;
  24. }
  25. document.vignette.src = "diaporama/visuel" + compteur + ".jpg";
  26. document.formulaire.numero.value = compteur;
  27. }
  28.  
  29. // La fonction pour faire descendre le compteur
  30. function descendre() {
  31. compteur += -1;
  32. if ( compteur < 1 ) {
  33. compteur = total_img;
  34. }
  35. document.vignette.src = "diaporama/visuel" + compteur + ".jpg";
  36. document.formulaire.numero.value = compteur;
  37. }
  38.  
  39. // La fonction de remise à zéro
  40. function zero() {
  41. document.vignette.src = "diaporama/visuel1.jpg";
  42. compteur = 1;
  43. document.formulaire.numero.value = compteur;
  44. }
  45. // La fonction de tirage aléatoire - Préciser le Nbre de photos
  46. function imagealeatoire() {
  47. i = Math.floor(215 * Math.random() + 1);
  48. compteur = i;
  49. document.vignette.src = "diaporama/visuel" + compteur + ".jpg";
  50. document.formulaire.numero.value = compteur;
  51. }
  52. // Le bouton du défilement automatique
  53. function ap(text) {
  54. document.formulaire.slidebutton.value = (text == "Désactiver le défilement automatique") ? "Activer le défilement automatique" : "Désactiver le défilement automatique";
  55. rotate();
  56. }
  57. // La fonction de défilement
  58. function rotate() {
  59. if (document.formulaire.slidebutton.value == "Désactiver le défilement automatique") {
  60. compteur = (compteur == total_img) ? 1 : compteur+1;
  61. document.vignette.src = "diaporama/visuel" + compteur + ".jpg";
  62. document.formulaire.numero.value = compteur;
  63. window.setTimeout("rotate()", timeDelay);
  64.    }
  65. }
  66. </script>


Avec le code Html pour afficher le diapo et les boutons de commande.

  1. <table border="0" cellspacing="0" cellpadding="0" width="100%">
  2.  <tr>
  3.    <td valign="middle" align="left">
  4. <form name="formulaire">
  5. <input type=button name="slidebutton" class="txtchapeau" onClick="ap(this.value);" value="Activer le défilement automatique" title="Toutes les 5 secondes."><br><br>
  6. <input type="button" value="Retour au début" OnClick="zero();">
  7. <input type="button" value="Précédent" OnClick="descendre();">
  8. <input type="button" value="Suivant" OnClick="monter();">
  9. <input type="button" value="Tirage aléatoire" OnClick="imagealeatoire();">
  10. N° <input type="text" name="numero" size="3" value=""> / 215 images.<br><br>
  11. <image src="diaporama/visuel1.jpg" name="vignette" border="0">
  12. </form>
  13.    </td>
  14.  </tr>
  15. </table>

Bonjour à tous,
Nouveau sur le forum, je suis en train de créer un site. Le script précédent me conviendrai, cependant j'ai un petit souci qui est que les boutons sont sans effet. Je les aperçoit, la première photo de mon diaporama s'affiche mais je ne parviens pas à utiliser les boutons.
Je pense que cela est du à la balise que j'ai mis dans head qui est :
<SCRIPT LANGUAGE="Javascript" SRC="diaporama.js"type="text/javascript">
j'ai également essayé avec
<link rel="stylesheet" href="diaporama.js" type="text/javascript" />
mais en vain.
Je débute en programmation aussi soyez indulgent, et merci de votre aide.
Lassé par la pub ? Créez un compte

Répondre Créer un nouveau sujet