diaporama : Slideshow

**xGio10** · 19/03/2012, 12h00

Salut , je suis débutant dans les site web et je suis entrain de créé mon site perso et je voudrais savoir comment réalisez un diaporama avec dreamweaver car j'ai fais mais page avec dreamweaver . Je voudrais un truc classe et simple

Je vous remercie d'avance .

**Kaamo** · 19/03/2012, 13h44

Il y a beaucoup d'exemples sur internet qui sont accessibles aux débutants. Sinon, en voici deux que j'ai adopté, très simples d'utilisation et complet :

Html5 Slides : pour les diaporamas "pro"
Highslide : pour les images

**Bovino** · 19/03/2012, 15h04

http://lmgtfy.com/?q=Slideshow

**xGio10** · 19/03/2012, 15h08

Tes diaporama me plait beaucoup , mais ce n'est pas sa que je recherche c'est un exemple comme ceci http://soledinapoli.be/check.php?v=fr simple et qui change tout seul .

Merci d'avance je galére a trouver je m'y connais pas

**Kaamo** · 20/03/2012, 11h17

Et bien en regardant simplement le code source de cette page, tu te rendras compte qu'un script est utilisé pour faire ceci.
De plus, les commentaires permettent de le comprendre.

**xGio10** · 20/03/2012, 12h33

il y a pas moyen que vous me procurez un script slideshow ? J'ai inspecter l'élément mais je c'est pas comment le prendre le script

**Kaamo** · 20/03/2012, 13h28

en cherchant "javascript défilement image", il y a plein d'exemples déjà prêts et simple d'utilisation. Il suffit juste de les adapter à votre fonctionnement.

**xGio10** · 20/03/2012, 15h12

Voila j'ai trouver un scripte mais je ne c'est pas si c'est bon , comment mettre mes images a moi et l'introduire dans ma page ( je travaille avec dreamweaver sa ne cause pas de problémes ? )

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<script language="JavaScript">
var temp=600
var nbr_de_cellule=6
var xx=nbr_de_cellule-1
var suivi=0
tbimage=new Array("d7","d7_02","d7_03","d7_04","d7_05","d7_06","d8","d8_02","d8_03","d8_04","d8_05","d8_06","d10","d10_02","d10_03","d10_04","d10_05","d10_06","d1","d1_02","d1_03","d1_04","d1_05","d1_06","d2","d2_02","d2_03","d2_04","d2_05","d2_06","d3","d4","d4_02","d4_03","d4_04","d4_05","d4_06","d5","d5_02","d5_03","d5_04","d5_05","d5_06","d6","d6_02","d6_03","d6_04","d6_05","d6_06")
tblien=new Array("d7","d7_02","d7_03","d7_04","d7_05","d7_06","d8","d8_02","d8_03","d8_04","d8_05","d8_06","d10","d10_02","d10_03","d10_04","d10_05","d10_06","d1","d1_02","d1_03","d1_04","d1_05","d1_06","d2","d2_02","d2_03","d2_04","d2_05","d2_06","d3","d4","d4_02","d4_03","d4_04","d4_05","d4_06","d5","d5_02","d5_03","d5_04","d5_05","d5_06","d6","d6_02","d6_03","d6_04","d6_05","d6_06")
function function1() {
if(xx>=tbimage.length-1){
xx=xx-tbimage.length
}
xx++
document.getElementById("ntab").rows[0].insertCell(nbr_de_cellule)
document.getElementById("ntab").rows[0].cells[nbr_de_cellule].appendChild(document.createElement('a')).href='images/'+tblien[xx]+'.jpg';
document.getElementById("ntab").rows[0].cells[nbr_de_cellule].lastChild.appendChild(document.createElement('img'));
document.getElementById("ntab").rows[0].cells[nbr_de_cellule].lastChild.lastChild.style.height=150+"px"
document.getElementById("ntab").rows[0].cells[nbr_de_cellule].lastChild.lastChild.src='images/'+tbimage[xx]+'.jpg'
document.getElementById("ntab").rows[0].deleteCell(0)
}
function function2() {
if(xx<=0){
xx=tbimage.length+(xx)
}
xx--
document.getElementById("ntab").rows[0].insertCell(0)
document.getElementById("ntab").rows[0].cells[0].appendChild(document.createElement('a')).href='images/'+tblien[xx]+'.jpg';
document.getElementById("ntab").rows[0].cells[0].lastChild.appendChild(document.createElement('img'));
document.getElementById("ntab").rows[0].cells[0].lastChild.lastChild.style.height=150+"px"
document.getElementById("ntab").rows[0].cells[0].lastChild.lastChild.src='images/'+tbimage[xx]+'.jpg'
document.getElementById("ntab").rows[0].deleteCell(nbr_de_cellule)
}
function aller() {
if(suivi==0){
suivi=1
bozo=setInterval('function1()',temp)
}
else{
clearInterval(bozo)
suivi=0
}
}
 
function retour() {
if(suivi==0){
xx=xx-(nbr_de_cellule-1)
suivi=1
bozo=setInterval('function2()',temp)
}
else{
clearInterval(bozo)
xx=xx+(nbr_de_cellule-1)
suivi=0
}
}
</script>
<div align='center'>
<table id="ntab" border='no'  rules='none'>
   <tr  id='fg'>
<td> <a href='images/d7.jpg'> <img src='images/d7.jpg' height=150></a> </td>
<td> <a href='images/d7_02.jpg'> <img src='images/d7_02.jpg' height=150> </a> </td>
<td> <a href='images/d7_03.jpg'> <img src='images/d7_03.jpg' height=150> </a> </td>
<td> <a href='images/d7_04.jpg'> <img src='images/d7_04.jpg' height=150> </a> </td>
<td> <a href='images/d7_05.jpg'> <img src='images/d7_05.jpg' height=150> </a> </td>
<td> <a href='images/d7_06.jpg'> <img src='images/d7_06.jpg' height=150> </a> </td>
</tr>
</table>
<div align='center'>
<img src='retour2.jpg' onmouseover='aller();this.src="retour.jpg"' onmouseout='aller();this.src="retour2.jpg"'>
<img src='aller2.jpg' onmouseover='retour();this.src="aller.jpg"' onmouseout='retour();this.src="aller2.jpg"'>
</div>
</div>
</body>
</html>

**Kaamo** · 20/03/2012, 17h24

Quelle est votre page ? Avez-vous compris ce code ? A quoi sert-il ? Est-ce qu'il répond bien à vos attentes ?

Je pense qu'il vaut mieux commencer par des bases simples, quitte ensuite à enrichir le code, vu votre niveau.

Faites d'abord le listing de ce dont vous avez besoin :

* une liste d'image
* un truc qui affiche une image
* un truc qui stocke le nom des images
* un truc qui permet de changer le nom de l'image en cours d'affichage
* un truc qui permet de répéter toutes les X secondes le changement d'image

....

Et on obtient un machin qui, toutes les X secondes, permet d'appeler un truc qui change le nom d'une image dans un truc qui affiche l'image.
Essayez de comprendre le mécanisme du code ci-dessous et n'hésitez pas à poser des questions

Si vous n'avez jamais fait de javascript/html, je vous conseille de vous documenter sur les bases.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
  <head>
    <title>Mon truc qui fait défiler mes images</title>
  </head>
  <!-- Le truc qui permet de changer l'image -->
  <body onload ="change_image(0)">
    <!-- Le truc qui affiche l'image -->
    <img src="image1.gif" alt="Mon image qui change !" id="image_a_changer" />
  </body>
</html>

Le code javascript à placer dans <head>

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
      // Le truc contenant le nom des images à afficher
      var tab_img = new Array('image1.gif','image2.gif','image3.gif','image4.gif');
      // Le temps d'attente entre chaque image
      var x_seconde = 2;
      // L'id de l'image qui changera de nom
      var id_image = 'image_a_changer';
 
      // Le truc qui permet de changer le chemin de l'image toutes les X secondes
      function change_image(i_img) {
        // on affecte l'image à afficher
        document.getElementById(id_image).src = tab_img[i_img];
        // incrémentation du numéro de l'image à afficher avec remise à zéro si on dépasse le nombre d'image défini dans le tableau contenant les noms des images à afficher
        i_img = (i_img == (tab_img.length-1)) ? 0 : (parseInt(i_img)+1);
        // le truc qui relance de la page toutes les x secondes (setTimeout prend en paramètre des millisecondes)
        setTimeout("change_image('"+i_img+"')",(x_seconde * 1000)); 
      }
    </script>

**xGio10** · 21/03/2012, 12h25

Oui , je pense que vous avez raison , mais dsl de vous faire perdre du temps j'ai du mal a a comprendre

je c'est pas comment mettre mes propres image dans le code et comment l'introduire dans ma page web ?

Je travaille avec dreamweaver sa ne cause pas de problèmes ?

Ma page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<html>
<head>
<title>accueil</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
 
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<style type="text/css">
body {
        background-color: #000;
}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/accueil_color.jpg')">
<!-- Save for Web Slices (accueil.psd) -->
<table width="1050" height="900" border="0" align="center" cellpadding="0" cellspacing="0" id="Tableau_01">
	<tr>
		<td colspan="9">
			<img src="images/accueil_01.jpg" width="1050" height="5" alt=""></td>
	</tr>
	<tr>
		<td rowspan="4">
			<img src="images/accueil_02.jpg" width="5" height="895" alt=""></td>
		<td rowspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','images/accueil_color.jpg',1)"><img src="images/accueil_03.jpg" name="Image13" width="156" height="82" border="0"></a></td>
		<td colspan="3">
			<img src="images/accueil_04.jpg" width="155" height="1" alt=""></td>
		<td rowspan="2">
			<img src="images/accueil_05.jpg" width="164" height="82" alt=""></td>
		<td rowspan="2">
			<img src="images/accueil_06.jpg" width="209" height="82" alt=""></td>
		<td rowspan="2">
			<img src="images/accueil_07.jpg" width="1" height="82" alt=""></td>
		<td rowspan="2">
			<img src="images/accueil_08.jpg" width="360" height="82" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/accueil_09.jpg" width="1" height="81" alt=""></td>
		<td>
			<img src="images/accueil_10.jpg" width="153" height="81" alt=""></td>
		<td>
			<img src="images/accueil_11.jpg" width="1" height="81" alt=""></td>
	</tr>
	<tr>
		<td colspan="8">
			<img src="images/accueil_12.jpg" width="1045" height="727" alt=""></td>
	</tr>
	<tr>
		<td colspan="8">
			<img src="images/accueil_13.jpg" width="1045" height="86" alt=""></td>
	</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

**Kaamo** · 21/03/2012, 13h48

Si vous comprenez votre page, vous n'aurez pas de soucis à comprendre la mienne

Vous pouvez travailler avec n'importe quoi. Dreamweaver est un outil d'édition de code. Vous pouvez très bien travailler avec Notepad, le résultat sera le même.

Comment l'introduire dans votre page ? Je ne sais pas, ça dépend à quel emplacement vous souhaitez le mettre. Il faut :

- mettre le script javascript entre les balises <head> et l'appeler dans le onload du <body>

- mettre <img src="image1.gif" alt="Mon image qui change !" id="image_a_changer" /> dans votre page à l'emplacement voulu.

- modifier image1.gif par le nom d'une de vos images.

- modifier var tab_img = new Array('image1.gif','image2.gif','image3.gif','image4.gif'); par la liste de vos images

- mettre vos images dans le même répertoire que le fichier html.

**xGio10** · 21/03/2012, 14h05

Ok , je vous remerci mais le code faut le mettre entre les head de ma page que j'ai préparé ?

**Kaamo** · 21/03/2012, 14h45

Tout dépend si vous souhaitez ou non garder cette page. Elle est utile ? Elle vous sert ? Vous êtes le seul à décider de ça.

J'ai l'impression que c'est du chinois pour vous. Les tutoriels que l'on peut trouver sur ce site (ou d'autres) sont bien meilleurs que moi pour vous enseigner la réalisation de page HTML

**mcvovol** · 01/04/2012, 18h13

Salut,

je ne peux malheureusement pas te conseil par rapport au slideshow car j'ai moi même cherché pendant 3 jours pour mettre en place le mien sur un site alors qu'il est pas super optimisé...

Cependant, je te conseil de faire tes pages sous Notepad++ en tapant le code toi même plutôt que de passer par Dreamweaver (WYSIWYG => What You See Is What You Get / Ce que tu vois est ce que tu aura)

Le codage via traitement de texte et surement plus rigolo a faire et réduit la marge d'erreur entre navigateur il me semble

Bon courage a toi pour la suite ^^

diaporama : Slideshow

HTML

Discussions similaires

Partager

Partager