Export d'un script dans un .js

Version imprimable

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:

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:

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 ! :D

07/11/2012, 08h25
SpaceFrog

pourquoi dupliquer le script ???
le but de l'externalisation est d'avoir un seul fichier ...
07/11/2012, 21h29
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:

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

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

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

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:

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:

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:

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 :/

09/11/2012, 10h08
NoSmoking
Citation:

Code:

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:

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:

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

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:

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:

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:

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 ...

12/11/2012, 06h48
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 ?
12/11/2012, 18h58
Antoinejdu44

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

Le lien pour l'explication est dans mon premier message ;)
13/11/2012, 20h04
NoSmoking

Citation:

Code:

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

voila quelque chose qui va faire capoter ton projet :aie:

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