Discussion :

[Antoinejdu44]

Bonjour à tous,

Je suis en train de créer un portfolio et j'ai trouvé un script pas mal sur internet pour faire défiler les photos (je ne connais pas du tout le js, j'ai donc cherché à avoir quelque chose de simple et que je puisse comprendre)

-> http://www.leebrimelow.com/flash/canvasphoto/ (ne fonctionne pas sur FF, mais je fixerais ça plus tard)

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
<script>
 
var context;
var x = 0;
var ind;
var offset;
 
var photos = new Array();
for(var i=1; i<15; i++) {
	var im = new Image();
	im.src = "p" + i + ".jpg"; //nom des images à la racine
	photos.push(im);	
}
 
function init() {
	context = document.getElementById('canvas').getContext('2d');	
	setInterval(loop, 1);
}
 
function loop() {
	x += (slider.value - x) * 0.04;
	ind = Math.floor(x/800);
	offset = x % 800;
	context.drawImage(photos[ind], offset, 0, 800-offset, 600, 0, 0, 800-offset, 600);
	context.drawImage(photos[ind+1], 0, 0, 800, 600, 800-offset, 0, 800, 600);
}
 
</script>

J'ai besoin d'utiliser plusieurs fois ce script sur ma page avec des images venant de dossiers différents, or je ne vois pas du tout comment faire ...

J'ai pensé le mettre dans chaque dossier en l'incluant au début du fichier html de cette manière :

Code :

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

1
2
3
<script src="dossier1/script.js></script>
<script src="dossier2/script.js></script>
<script src="dossier3/script.js></script>

Mais sans succès ...

Si quelqu'un a une solution, ça serait cool !

[SpaceFrog]

pourquoi dupliquer le script ???
le but de l'externalisation est d'avoir un seul fichier ...

[Antoinejdu44]

Merci de ta réponse

J'ai pensé dupliquer le script car je ne vois pas comment le modifier pour qu'il charge les images venant de tel dossier.

Par exemple, il doit charge les images "p" +i venant de dossier1 et "q"+i venant de dossier2 et je ne vois pas comment faire ...

Il est chargé avec cette ligne dans le .html

Code :

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

<canvas width="600" height="400" id="canvas"></canvas>

[NoSmoking]

Bonsoir,
il existe un truc sympa que l'on appel paramètre et que l'on peut passer à un fonction
par exemple

Code :

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

1
2
3
4
5
6
7
function chargePhoto( chemin, radical){
  for(var i=1; i<15; i++) {
    im = new Image();
    im.src = chemin + radical + i + ".jpg";
    photos.push(im);	
  }
}

[Antoinejdu44]

Merci de vos réponses

J'ai essayé de modifier ta fonction afin d'avoir le chemin en fonction de la valeur d'un id présent dans un balise canvas

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
       <div id="slide2">
        <div class="slide_inside">
			<canvas width="600" height="400" id="concerts"></canvas>
        </div>
      </div>
 
      <div id="slide3">
        <div class="slide_inside">
			<canvas width="600" height="400" id="sports"></canvas>
            <br />
            <input type="range" id="slider" style="width:600px" min="0" max="1200" step="1" value="0">
        </div>
      </div>
 
       <div id="slide4">
        <div class="slide_inside">
			<canvas width="600" height="400" id="divers"></canvas>
        </div>

Et voici le javascript :

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
var chemin="";
var j;
function chargePhoto ()
{
	var id_canvas = document.getElementsByName("canvas").id;  
	
	switch (id_canvas) {
	case "concerts":
	chemin = "./photos/concerts";
        j = 26;
	break;
	case "sports":
	chemin = "./photos/sports";
        j = 17;
	break;
	case "divers":
	chemin = "./photos/divers";
	break;
	default:
	break;
	}
	
	for(var i=1; i<j; i++) {
		im = new Image();
		im.src = chemin + radical + i + ".jpg";
		photos.push(im);	
	}
}

Pour cette ligne là :

Code :

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

var id_canvas = document.getElementsByName("canvas").id;

Je ne suis pas sur du tout que ça soit bon ...
Je veux récupérer les id présents dans la balise canvas


Par contre, pour le radical, je ne vois pas du tout comment faire étant donné que j'en ai plusieurs différents par dossier :/

[NoSmoking]

Code :

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

var id_canvas = document.getElementsByName("canvas").id;

n'est pas correct

pour récupérer les éléments canvas d'un document, on utilise la méthode getElementsByTagName('CANVAS'); qui retourne une collection.

Pour atteindre un élément il suffit, à la manière d'un Array, d'utiliser l'index de sa position dans la liste

Code :

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

1
2
var lstCanvas = document.getElementsByTagName('CANVAS');
alert( lstCanvas[2].id); // affiche Divers

Donc pour récupérer TOUTES les ID il suffit de parcourir cette liste

Code :

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

1
2
3
4
5
var lstCanvas = document.getElementsByTagName('CANVAS');
var i, nb = lstCanvas.length;
for( i=0; i < nb; i++){
  alert( lstCanvas[i].id);
}

[Antoinejdu44]

J'ai opté pour cette solution plus simple me permettant de donner la valeur du chemin en fonction de la page où se trouve l'utilisateur :

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
function chargePhoto ()
{
	var url = document.write(window.location.hash);
 
	switch (url) {
	case "#2":
	chemin = "./photos/concerts";
        nbPhotos = 26;
	break;
	case "#3":
	chemin = "./photos/sports";
	nbPhotos = 17;
	break;
	default:
	chemin = "./photos/divers";
	nbPhotos = 12;
	break;
 
	}
 
	for(var i=1; i<nbPhotos; i++) {
		im = new Image();
		im.src = chemin + "photo" + i + ".jpg";
		photos.push(im);	
	}
}

Par contre, je ne vois pas comment appeler cette fonction ...

script :

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
var context;
var x = 0;
var ind;
var offset; 
var chemin="";
var nbPhotos, url;
 
var photos = new Array();
 
function chargePhoto ()
{
	var url = document.write(window.location.hash);
 
	switch (url) {
	case "#2":
	chemin = "./photos/concerts";
    nbPhotos = 26;
	break;
	case "#3":
	chemin = "./photos/sports";
	nbPhotos = 17;
	break;
	default:
	chemin = "./photos/divers";
	nbPhotos = 12;
	break;
 
	}
 
	for(var i=1; i<nbPhotos; i++) {
		im = new Image();
		im.src = chemin + "photo" + i + ".jpg";
		photos.push(im);	
	}
}
 
function init() {
	context = document.getElementsByTagName('CANVAS').getContext('2d');	
	setInterval(loop, 1);
}
 
function loop() {
	x += (slider.value - x) * 0.04;
	ind = Math.floor(x/600);
	offset = x % 600;
	context.drawImage(photos[ind], offset, 0, 600-offset, 400, 0, 0, 600-offset, 400);
	context.drawImage(photos[ind+1], 0, 0, 600, 400, 600-offset, 0, 600, 400);
}

html :

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
<body onLoad="init()">
 
  <span id="s1"></span> 
  <span id="s2"></span>
  <span id="s3"></span>
  <span id="s4"></span>
 
    <div id="wrap">
 
      <div id="nav">
        <div class="item"><div class="rond"></div><a href="#s1">Accueil</a></div>
       	<div class="item"><div class="rond"></div><a href="#s2">Concerts</a></div>
        <div class="item"><div class="rond"></div><a href="#s3">Sports</a></div>
        <div class="item"><div class="rond"></div><a href="#s4">Divers</a></div>
        <div class="item"><div class="rond"></div></div>
      </div> 
 
      <div id="slide1">
        <div class="slide_inside_intro">
 
        </div>
      </div>
 
       <div id="slide2">
        <div class="slide_inside">
			<canvas width="600" height="400" id="concerts"></canvas>
			<br />
			<input type="range" id="slider_concerts" style="width:600px" min="0" max="1200" step="1" value="0">
        </div>
      </div>
 
      <div id="slide3">
        <div class="slide_inside">
			<canvas width="600" height="400" id="sports"></canvas>
            <br />
            <input type="range" id="slider_sports" style="width:600px" min="0" max="1200" step="1" value="0">
        </div>
      </div>
 
       <div id="slide4">
        <div class="slide_inside">
			<canvas width="600" height="400" id="divers"></canvas>
			<br />
			<input type="range" id="slider_divers" style="width:600px" min="0" max="1200" step="1" value="0">
        </div>
      </div>
 
    </div>
 
  </body>

Peut etre avec onClick dans le menu, mais je ne suis pas sur ...

[arnogues]

Pourquoi mets tu tes images dans un canvas au lieu d'une simple balise IMG ?
tu fais des traitements dessus où alors tu veux essayer d'empêcher le téléchargement de tes images ?

[Antoinejdu44]

C'est un diaporama qu'il y a dans le canvas ,)

Le lien pour l'explication est dans mon premier message

[NoSmoking]

Code :

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

var url = document.write(window.location.hash);

voila quelque chose qui va faire capoter ton projet

un simple var url = window.location.hash; est trés largement suffisant.

Une fois ta page chargée c'est à ce moment que tu dois faire ton initialisation.
- initialisation de tes photos
- initialisation de ton espace de travail, ou inversement
- lancement du diaporama