begin process at 2012 02 13 22:00:53
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Formulaire

 > DIAPO SIMPLE ET TOUT PRET

DIAPO SIMPLE ET TOUT PRET


 Information sur la source

Note :
4 / 10 - par 3 personnes
4,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Formulaire Niveau :Initié Date de création :23/08/2004 Date de mise à jour :24/08/2004 17:01:33 Vu / téléchargé :18 620 / 1 441

Auteur : GillesWebmaster

Ecrire un message privé
Commentaire sur cette source (22)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
Voila un codes qui permet d'afficher un diaporama tout simple:
Une image un bouton suivant, un bouton retour et c'est parti....
Non c'est pas aussi simple mais bon...

Source

  • //début du code--------------------------------------->
  • <script language="JavaScript">
  • nodiapo=1;
  • nbdiapos=39;
  • //à changer la valeur de "nbdiapos=" et y mettre le nombre de vos photos...
  • function diaporama(diaposuivante)
  • {
  • nodiapo=nodiapo + diaposuivante;
  • if(nodiapo > nbdiapos)
  • {
  • nodiapo = 1;
  • }
  • if(nodiapo == 0)
  • {
  • nodiapo = nbdiapos;
  • }
  • document.emplacementdiapo.src="diapo" + nodiapo + ".jpg";
  • //mettre ici les chiffres (ou lettres) qui précèdent et suivent le numero du diapo
  • //(ci vos images s'appèlent: Pascal1.jpg, Pascal2.jpg... -->="Pascal" + nodiapo + ".jpg";
  • //Attention toutes vos images doivent avoir le même nom, a part les chiffres.!!!!!
  • }
  • </script>
  • </head>
  • <body>
  • <form name="form1" method="post" action="">
  • <table width="350" border="0" align="center" cellpadding="0" cellspacing="0">
  • <tr>
  • <td colspan="2" align="center" valign="middle"><img src="diapo1.jpg" name="emplacementdiapo" width="283" height="191" id="emplacementdiapo"></td>
  • </tr>
  • <tr align="center" valign="middle">
  • <td>
  • <input type="button" name="précédent" value="&lt;&lt;" onClick="diaporama(-1);"></td>
  • <td>
  • <input name="suivant" type="button" class="input" onClick="diaporama(1);" value="&gt;&gt;"></td>
  • </tr>
  • </table>
  • </form>
//début du code--------------------------------------->
<script language="JavaScript">
nodiapo=1;
nbdiapos=39;
//à changer la valeur de "nbdiapos=" et y mettre le nombre de vos photos...
function diaporama(diaposuivante)
{
	
	nodiapo=nodiapo + diaposuivante;
	
	if(nodiapo > nbdiapos)
	{
	nodiapo = 1;
	}
	
	if(nodiapo == 0)
	{
	nodiapo = nbdiapos;
	}	
	
	document.emplacementdiapo.src="diapo" + nodiapo + ".jpg";
//mettre ici les chiffres (ou lettres) qui précèdent et suivent le numero du diapo
//(ci vos images s'appèlent: Pascal1.jpg, Pascal2.jpg... -->="Pascal" + nodiapo + ".jpg";
//Attention toutes vos images doivent avoir le même nom, a part les chiffres.!!!!!
}


</script>
</head>

<body>
<form name="form1" method="post" action="">
  <table width="350" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr> 
      <td colspan="2" align="center" valign="middle"><img src="diapo1.jpg" name="emplacementdiapo" width="283" height="191" id="emplacementdiapo"></td>
    </tr>
    <tr align="center" valign="middle"> 
      <td> 
        <input type="button" name="précédent" value="&lt;&lt;" onClick="diaporama(-1);"></td>
      <td> 
        <input name="suivant" type="button" class="input" onClick="diaporama(1);" value="&gt;&gt;"></td>
    </tr>
  </table>
</form>

 Conclusion

un Prob... www@gilles4.com

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

24 août 2004 17:01:38 :
Un Prob... GIlles@gilles4.com

 Sources de la même categorie

Source avec Zip Source avec une capture BOITE DE DIALOGUE MODALE DE SÉLECTION D'UNE LISTE D'ICONES par JJDai
Source avec Zip Source avec une capture RÉSOLUTION D'UN SYSTÈME D'ÉQUATIONS LINÉAIRES À N INCONNUES par william voirol
Source avec Zip Source avec une capture PLUGIN JQUERY LISTE MODIFIABLE (COMBO) AUTOCOMPLÉTÉE par medkarim
GESTION DE NUMÉRO DE TÉLÉPHONE SIMPLE DANS FIREFOX7 par rotomtom
Source avec Zip Source avec une capture RECOMMANDER CETTE PAGE AVEC MAILTO, ACCENT ET RETOUR LIGNE D... par weabow

Commentaires et avis

Commentaire de leris le 23/08/2004 20:21:42

les commentaires ne sont pas "isolés" et provoquent une erreur .

// isoler une ligne

/*
isoler
un
paragraphe
*/

L.

Commentaire de coucou747 le 24/08/2004 13:35:20 administrateur CS

t'as mis tes commentaires comme on le fait en Qbasic...

Commentaire de GillesWebmaster le 24/08/2004 16:58:30

OUi peut etre car je suis habitué à l'ASP!!!
DéSOLééé
G_____

Commentaire de fg85 le 02/09/2004 11:16:09

Bof , je préfère mon script (hihih) : http://www.javascriptfr.com/code.aspx?id=24706

Commentaire de shadow125 le 04/07/2005 19:37:28

génial cette source ! Propre et efficace.

Commentaire de GillesWebmaster le 04/07/2005 19:54:14

Oui merci

Commentaire de pihay le 09/02/2006 18:47:38

etant totalement néophyte j'ai un petit soucis
comment charge t-on les photos sur le diaporama avec le script ci dessus?

Commentaire de GillesWebmaster le 08/03/2006 22:31:56

Tu changes la ligne 21:
si tes photos  s'appèlent: Pascal1.jpg, Pascal2.jpg... -->
document.emplacementdiapo.src="Pascal" + nodiapo + ".jpg";

Commentaire de qisbug le 22/04/2006 16:02:39

Bonjour

Je suis en train d'essayer ce script.
Mais j'ai la même question que ci-dessus :
j'ai bien compris comment il fallait appeler les photos
et comment il fallait changer la ligne 21.
Mais où doivent-elles être ces photos ?

à la racine du site distant ? ou ailleurs, dans un dossier spécial ?  b.poiraud@wanadoo.fr

Merci d'avance.

B.POiraud

Commentaire de aannick le 14/05/2006 20:56:35

moi non plus j'y arrive pas , pas très explicite pour débutant
il aurait fallut mettre un truc qui marche ds le zip avec les photos


document.emplacementdiapo.src="diapo" + nodiapo + ".jpg";
'"Po"1."jpg";"Po"2."jpg;"Po"3."jpg;"Po"4."jpg;"Po"5".jpg;"Po"6."jpg"; mettre ici les chiffres (ou lettres) qui précèdent et suivent le numero du diapo
'(ci vos images s'appèlent:   ... -->="Pascal" + nodiapo + ".jpg";
'Attention toutes vos images doivent avoir le même nom, a part les chiffres.!!!!!
}

Commentaire de mitchoumy le 23/05/2006 08:54:26

Bonjour a tous et tout d'abord merci pour ce petit script qui passe partout !
Deux petites questions:
- peut on isoler les photos dans un sous-dossier ?
J'ai essayé en changeant la ligne 21 pour :
document.emplacementdiapo.src="photos/diapo" + nodiapo + ".jpg";
mais ca ne fonctionne pas...
- Peut-on changer les boutons pour des images ?
J'ai essayé aussi en remplacent les lignes 39 et 41 avec :
<input type="image" src="precedent.jpg"
mais ca me reload la page sans changer la photo...
Si vous avez une idée...
Merci !  

Commentaire de fg85 le 23/05/2006 14:45:24

FGJSDIAPO ... FGXMLDIAPO ... ok je sort :D

-------------
http://fg.logiciel.free.fr
http://longhornrc.free.fr

Commentaire de El Griiingo le 10/05/2007 09:04:27

Bonjour,

tres sympa et tres simple ce script, marche sous Firefox et Ie7 !
Le seul soucis et de remplacer les commentaires précédés de " ' " par "<!--" et cela fonctionne nickel.

Commentaire de pppooddd le 22/11/2007 11:29:18

ben chez moi ca marche pas ce diaporama.
quand je clique sur le bouton ca ne passe pas à l' image suivante. ?????
help me

Commentaire de pppooddd le 22/11/2007 12:51:13

ha ouais ben j' ai enfin trouvé le souci :
il manque le code suivant ---->


#return diaposuivante;
#}

à mettre enfin du script décrivant la function diaporama(diaposuivante)

donc revu et corrigé ca donne ca :


# function diaporama(diaposuivante)
# {
#
# nodiapo=nodiapo + diaposuivante;
#
# if(nodiapo > nbdiapos)
# {
# nodiapo = 1;
# }
#
# if(nodiapo == 0)
# {
# nodiapo = nbdiapos;
# }
#
# document.emplacementdiapo.src="diapo" + nodiapo + ".jpg";
# //mettre ici les chiffres (ou lettres) qui précèdent et suivent le numero du diapo
# //(ci vos images s'appèlent: Pascal1.jpg, Pascal2.jpg... -->="Pascal" + nodiapo + ".jpg";
# //Attention toutes vos images doivent avoir le même nom, a part les chiffres.!!!!!
# }
#
#return diaposuivante;
#}
#
#
# </script>


juste un truc j'ai pas corrigé les erreurs de commentaires dslé

8)


Commentaire de pppooddd le 04/12/2007 16:33:07

sinon est ce normal que le curseur ne se change pas en petite main lors du survol du bouton ??

Commentaire de tribalmantha le 27/12/2008 12:12:44

ça ne fonctionne pas...les images de défilent pas lorsque l'on clique sur le bouton et cela malgré la correction "return..."

Commentaire de mailliam le 12/08/2009 16:51:07

Moi ca marche!! disons ca marche presque car la 1ère image ne s'affiche pas, ensuite pour les suivantes y a pas de problème il faut juste les appeler "xx1.jpg" et pas "xx01.jpg" (dès qu'on met 0 ca plante..)
je redonne le code sans les commentaires, j'ai modifié pour qu'on puisse mettre les photos dans un répertoire c'est + propre :)

donc:
mettez vos image dans un répertoire nommé "img"
donnez des noms sans zéro devant les chiffres dans mon code je les ai appelées "a1.jpg" a2.jpg ... a12.jpg

ensuite voici le code html:
<html>

<head>

<title>Diaporama</title>
<script language="JavaScript">
nodiapo=1;
nbdiapos=12;
function diaporama(diaposuivante)
{
nodiapo=nodiapo + diaposuivante;
if(nodiapo > nbdiapos)
{
nodiapo = 1;
}
if(nodiapo == 0)
{
nodiapo = nbdiapos;
}
document.emplacementdiapo.src="img/a" + nodiapo + ".jpg";
}

</script>
</head>
<body>
<form name="form1" method="post" action="">
<table width="350" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" align="center" valign="middle"><img src="diapo1.jpg" name="emplacementdiapo" width="283" height="191" id="emplacementdiapo"></td>
</tr>
<tr align="center" valign="middle">
<td>
<input type="button" name="precedent" value="&lt;&lt;" onClick="diaporama(-1);"></td>
<td>
<input name="suivant" type="button" class="input" onClick="diaporama(1);" value="&gt;&gt;"></td>
</tr>
</table>
</form>
</body>

</html>

au debut du code bien noter le nombre de vos photo nbdiapos=12;
et le nom qu'elles portent document.emplacementdiapo.src="img/a" + nodiapo + ".jpg";
(si au lieu de a1.jpg c'est photo1.jpg mettre src="img/photo" + nodiapo + ".jpg";

et voilou.. par contre si qqun arrive a trouver pourquoi la 1ère photo ne s'affiche pas, là moi j'ai séché...
A++ les loulous

Commentaire de mailliam le 12/08/2009 17:33:31

ahah j'ai trouvé pourquoi ca marchait pas!! hihi
j'ai pas mis le même nom de fichiers dans le code html à la ligne 35..

donc revoici le code html, avec des flèches à la place des boutons (c'est + joli)
et un répertoire "img" pour mettre les photos dedans (c'est + propre)
(donc les fichiers s'appellent "a1.jpg" a2.jpg ... a12.jpg faut pas mettre de 0 devant les chiffres genre a01.jpg..)
ah oui donc dans le répertoire img, avec les photos, il faut mettre 2 image de flèches et les appeler "next_arrow.gif" et "back_arrow.gif"

<html>

<head>

<title>Diaporama</title>
<script language="JavaScript">
nodiapo=1;
nbdiapos=12;
function diaporama(diaposuivante)
{
nodiapo=nodiapo + diaposuivante;
if(nodiapo > nbdiapos)
{
nodiapo = 1;
}
if(nodiapo == 0)
{
nodiapo = nbdiapos;
}
document.emplacementdiapo.src="img/a" + nodiapo + ".jpg";
}

</script>
</head>
<body>
<form name="form1" method="post" action="">
<table width="350" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" align="center" valign="middle"><img src="img/a1.jpg" name="emplacementdiapo" width="283" height="191" id="emplacementdiapo"></td>
</tr>
<tr align="center" valign="middle">
<td>
<img src="img/back_arrow.gif" alt="" onClick="diaporama(-1);" height="18"></td>
<td>
<img src="img/next_arrow.gif" alt="" onClick="diaporama(1);" height="18"></td>
</tr>
</table>
</form>
</body>

</html>

Voilou les loulous!
j'trouve ce code génial car tellement simple :)
A++

Commentaire de thalijp le 11/01/2010 00:02:07

Salut,

Merci pour cette excellente source, j'ai juste une question, comment serait-il possible de faire en sorte que le diaporama ne boucle pas. Qu'il n'aille pas plus loin que la dernière et ne puisse pas aller avant la première ?.

merci beaucoup.

Commentaire de jpthali le 13/01/2010 21:58:22

J'ai eu la réponse précise et rapide à ma question sur le forum, pour ceux que ça intéresse:
http://www.javascriptfr.com/forum/sujet-COMMENT-FAIRE-SORTE-QU-DIAPORAMA-NE-BOUCLE-PAS_1396055.aspx#2

Commentaire de magefepmdk le 18/03/2010 19:02:38

Bonjour à tous!
Je souhaite installer ce script dans mes pages et je n'ai aucun problème d'affichage. cependant je ne peux voir que ma première image, quand je clique rien ne suit.
J'ai bien vu que pppooddd  avait eu le même problème, j'ai bien essayé de suivre ton "nouveau code ", mais néophyte je n'ai vraiement pas trouvé de différence....
Can someone could help me please?

 Ajouter un commentaire




Nos sponsors


Sondage...

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,858 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales