[Conseil] Comment faire un slider à la SlideShare?

27/05/2017, 10h37 #1

_Alt_

Candidat au Club

[Conseil] Comment faire un slider à la SlideShare?

Bonjour à tous,

Depuis quelques temps, j'ai la volonté de faire un site et dans ce dernier je voudrais créer un équivalent du slider de SlideShare (voir). J'ai cherché sur internet mais je n'ai rien trouvé. Après un rapide coup d’œil au code du site j'ai cru comprendre qu'il était - au moins en partis - écrit avec du js (voir l'image en dessous). Pourriez-vous me donner des indications sur les langages de programmation à utiliser, des techniques et si vous avez des conseils n'hésiter pas je suis preneur . (Désolé si ce sujet n'est pas dans la bonne catégorie je ne savais pas exactement laquelle mettre car c'est ma première fois sur ce forum.)

Merci d'avance.

Répondre avec citation 0 0

27/05/2017, 13h00 #2

Archimède

Membre Expert

Bonjour, tu peux sans aucun problème te faire un objet de ce type là en javascript.
En fait, un composant, ce n'est qu'un leurre... C'est une zone de dessin qui réagit à des événements...
tu n'as pas grand -chose sur ton composant. : deux boutons, une jauge et une div qui accueille tes images.
Tu utilises le context d'un canvas pour dessiner tes boutons et ta jauge et tu ajoutes des événements dessus.

Pour la jauge, un simple fillRect() dans un canvas dont tu modifies la longueur à l'aide d'un simple scale en x en fonction du nombre d'images à présenter...

J'avais fait un bouton il y a quelques temps pour me familariser un peu avec javascript (pour te donner un exemple) :
Button.js

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
 
function Button(x, y, w, titre) {
	var skin = new Array(3);
	var ctxskin = new Array(3);
 
	var h = w / 3;
	var hfont = h / 2.5;
	var _caption = "Button";
	var _posx = x;
	var _posy = y;
 
	if (titre !== undefined)
		_caption = titre;
 
	this.innerHTML = window.document.createElement('div');
	document.body.appendChild(this.innerHTML);
 
	this.innerHTML.style.cursor = "pointer";
 
	for (var i = 0; i <= 2; i++) {
		skin[i] = window.document.createElement('canvas');
		this.innerHTML.appendChild(skin[i]);
		skin[i].width = w;
		skin[i].height = h;
		skin[i].style.left = x;
		skin[i].style.top = y;
		skin[i].style.zIndex = i;
		skin[i].style.visibility = "hidden";
		skin[i].style.position = "fixed";
 
		ctxskin[i] = skin[i].getContext('2d');
 
		switch(i) {
			case 0:
				var degrade = ctxskin[0].createLinearGradient(w / 2, 0, w / 2, h);
				degrade.addColorStop(0, "#f2f2f2");
				degrade.addColorStop(0.45, "#ebebeb");
				degrade.addColorStop(0.55, "#dddddd");
				degrade.addColorStop(1, "#cfcfcf");
 
				ctxskin[0].beginPath();
				ctxskin[0].fillStyle = degrade;
				roundRect(0, 0, w, h, h / 10, ctxskin[0]);
				ctxskin[0].fill();
				break;
			case 1:
				var degrade = ctxskin[1].createLinearGradient(w / 2, 0, w / 2, h);
				degrade.addColorStop(0, "#eaf6f2");
				degrade.addColorStop(0.45, "#d9f0fc");
				degrade.addColorStop(0.55, "#bef6fd");
				degrade.addColorStop(1, "#a7d9f5");
 
				ctxskin[1].beginPath();
				ctxskin[1].fillStyle = degrade;
				roundRect(0, 0, w, h, h / 10, ctxskin[1]);
				ctxskin[1].fill();
				break;
			case 2:
				var degrade = ctxskin[2].createLinearGradient(w / 2, 0, w / 2, h);
				degrade.addColorStop(0, "#deedf6");
				degrade.addColorStop(0.45, "#c4e5f6");
				degrade.addColorStop(0.55, "#98d1ef");
				degrade.addColorStop(1, "#66afd7");
 
				ctxskin[2].beginPath();
				ctxskin[2].fillStyle = degrade;
				roundRect(0, 0, w, h, h / 10, ctxskin[2]);
				ctxskin[2].fill();
				break;
		}
	}
	skin[0].style.visibility = "visible";
 
	var cantitle = window.document.createElement('canvas');
	cantitle.style.position = "fixed";
	cantitle.width = w;
	cantitle.height = h;
	cantitle.style.left = x;
	cantitle.style.top = y;
	cantitle.style.zIndex = 3;
	cantitle.style.visibility = "visible";
	cantitle.style.background = "none";
	this.innerHTML.appendChild(cantitle);
 
	var ctxtitle = cantitle.getContext('2d');
 
	function addtitle() {
		ctxtitle.clearRect(0, 0, w, h);
		ctxtitle.font = "" + hfont + "px Arial";
		ctxtitle.fillStyle = "#000000";
		ctxtitle.fillText(_caption, (w - ctxtitle.measureText(_caption).width) / 2, h / 2 + hfont / 3);
	}
 
	addtitle();
 
	this.innerHTML.addEventListener('mouseout', onMouseOut);
	this.innerHTML.addEventListener('mouseover', onMouseOver);
	this.innerHTML.addEventListener('mousedown', onMouseDown);
	this.innerHTML.addEventListener('mouseup', onMouseUp);
 
	function roundRect(posx, posy, tailx, taily, R, context) {
		const pi = Math.PI;
		context.arc(posx + R, posy + R, R, pi, 3 * pi / 2);
		context.lineTo(posx + tailx - R, posy);
		context.arc(posx + tailx - R, posy + R, R, 3 * pi / 2, 0);
		context.lineTo(posx + tailx, posy + taily - R);
		context.arc(posx - R + tailx, posy - R + taily, R, 0, pi / 2);
		context.lineTo(posx - R + tailx, posy + taily);
		context.arc(posx + R, posy + taily - R, R, pi / 2, pi);
		context.lineTo(posx, posy + R);
	}
 
	function onMouseOver(event) {
		skin[0].style.visibility = "hidden";
		skin[1].style.visibility = "visible";
		skin[2].style.visibility = "hidden";
	}
 
	function onMouseOut(event) {
		skin[0].style.visibility = "visible";
		skin[1].style.visibility = "hidden";
		skin[2].style.visibility = "hidden";
	}
 
	function onMouseDown(event) {
		skin[0].style.visibility = "hidden";
		skin[1].style.visibility = "hidden";
		skin[2].style.visibility = "visible";
	}
 
	function onMouseUp(event) {
		skin[0].style.visibility = "visible";
		skin[1].style.visibility = "hidden";
		skin[2].style.visibility = "hidden";
	}
 
	function replaceX(val) {
		for (var i = 0; i <= 2; i++)
			skin[i].style.left = val;
		cantitle.style.left = val;
	}
 
	function replaceY(val) {
		for (var i = 0; i <= 2; i++)
			skin[i].style.top = val;
		cantitle.style.top = val;
	}
 
 
	Object.defineProperty(this, 'caption', {
		get : function() {
			return _caption;
		},
		set : function(value) {
			_caption = value;
			addtitle();
		}
	});
 
	Object.defineProperty(this, 'x', {
		get : function() {
			return _posx;
		},
		set : function(value) {
			_posx = value;
			this.innerHTML.x = value;
			replaceX(value);
		}
	});
 
	Object.defineProperty(this, 'y', {
		get : function() {
			return _posy;
		},
		set : function(value) {
			_posy = value;
			this.innerHTML.y = value;
			replaceY(value);
		}
	});
 
}

une instance de bouton

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
 
<html>
	<body>
		<script src="Button.js"></script>
		<script>
			var permute = false;
			var but  = new Button(100, 100, 200,"Click");
			but.innerHTML.addEventListener('click', onClick);
 
 
			function onClick(event) {
				permute = !permute;
				if (permute)
					but.caption = "ReClick";
				else
					but.caption = "Click";
			}
		</script>
	</body>
</html>

A toi de jouer...