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);
}