Discussion :

[joomoo79]

Salut les amis !

J’apprends javascript et ça me passionne ! J’ai besoin d’un coup de pouce cependant…

Pour mon site, un ami calé m’avait concocté un bout de code afin d’afficher des images plein écran et d’en faire un slide show. C’est d’ailleurs ce qui m’a donné envie d’apprendre javascript. Ce bout de code me va très bien sauf que, sur une partie du site, j’ai besoin d'afficher une seule photo plein écran, plus de slide show... Du coup, je voudrais bien séparer le resize du slide show dans mon code, et l'adapter afin de pouvoir l'utiliser à cette fin.

Alors, svp, est-ce qu’une âme charitable voudrait bien m’aider ? Et si ce n’est pas trop, j’aimerai bien aussi quelques explications, même sommaires, pour que je puisse comprendre.

Merci !!! (le code est ci-dessous) :yaisse2:

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
 
// background image ratio (width/height)
// use to resize background to get best view
var backgroundRatio = 1.9;
 
function preload_bg_images() {
	new Ajax.Updater('slide-images', 'get_images.php?what=bg', {
		asynchronous: true,
		onComplete: init_slideshow
	});
}
 
function init_slideshow() {
	resize_background();
 
	var lis = $('slide-images').getElementsByTagName('li');
	for( i=0; i < lis.length; i++){
		lis[i].style.display = 'none';
	}
	end_frame = lis.length -1;
 
	if (lis.length == 1) {
		// just appear the image
		Effect.Appear(lis[0], { duration: 1.0, from: 0, to: 1 });
	} else {
		// start rotate background images
		start_slideshow(0, end_frame, 0);
	}
}
 
function start_slideshow(start_frame, end_frame, delay) {
	setTimeout(fadeInOut(start_frame, start_frame, end_frame, 3000), 0);
}
 
function fadeInOut(frame, start_frame, end_frame, delay) {
	return (function() {
		lis = $('slide-images').getElementsByTagName('li');
		Effect.Fade(lis[frame]);
		if (frame == end_frame) { frame = start_frame; } else { frame++; }
		lisAppear = lis[frame];
		setTimeout("Effect.Appear(lisAppear);", 0);
		setTimeout(fadeInOut(frame, start_frame, end_frame, delay), delay + 3000);
	})
}
 
function resize_background() {
	var width = $('slide-images').getWidth();
	var height = $('slide-images').getHeight();
	var ratio = (width * 1.0) / height;
 
	var top = 0;
	var left = 0;
	if (ratio > backgroundRatio) {
		height = width / backgroundRatio;
		top = -(ratio - backgroundRatio) * height / 2;
	} else {
		width = height * backgroundRatio;
		left = -(backgroundRatio - ratio) * width / 2;
	}
 
	var lis = $('slide-images').getElementsByTagName('li');
	for( i=0; i < lis.length; i++){
		// resize image
		lis[i].style.top = 70 + top + "px";
		lis[i].style.left = left + "px";
		lis[i].style.width = width + "px";
		lis[i].style.height = height + "px";
	}
}
 
// fetch images after page is loaded, then start background image rotation
Event.observe(window, 'load', preload_bg_images);
Event.observe(window, 'resize', resize_background);

Voilà! Et même, si vous avez des obervations/commentaires par rapport au code existant (qui marche très bien au demeurant), ils sont les bienvenus. :mouarf:

[SpaceFrog]

Tu peux à priori te passer de l'ajax et modifier le code pour n'avoir qu'un li
à priori ça devrait suffire le slide ne se ferait que sur une seule image ...

[joomoo79]

Tu peux à priori te passer de l'ajax et modifier le code pour n'avoir qu'un li
à priori ça devrait suffire le slide ne se ferait que sur une seule image ...

Ah voui... ;-) Je vais essayer ça, mais j'aimerais bien aussi avoir un truc "propre". Mais, bon, j'essaie puis je reviens fair emon rapport! Merci!