Discussion :

[Hultra]

Bonjour à tous

Je vais essayer d'exprimer mon problème au mieux, bien que ce ne soit pas si facile

Voilà je développe actuellement 2 plugin jQuery, un pour faire une galerie d'image et un pour une galerie de vidéos (hébergés sur les principales plateformes de vidéos).

J'affiche une liste de miniatures qui correspondent (quand cela est possible) aux miniatures des vidéos. Sinon je met une miniature par défaut.

Bref, je rencontre le même problèmes pour mes 2 plugins. En effet, dans le plugin pour les images, je retaille forcément les images trop grande (ainsi que la miniature correspondante), et pour les miniatures de vidéos pareil.

Je fais tout ceci en javascript(+jQuery), mais le problème c'est que lorsque je fait un Ctrl+F5 ou parfois même au premier chargement de la page (surtout pour le plugin des vidéos), les images bugs et se retrouvent avec une taille de 0 width et 0 height.

Bien évidemment ce n'est pas ma fonction de retaille d'images qui retaille mal, puisque celle-ci marche très bien une fois que je fait F5.

J'ai également un test au début de mon plugin qui fait patienter l'exécution de celui-ci tant que toutes les images ne sont pas chargés (car chrome n'aime pas ça).

J'ai l'impression que dans ces cas là, le navigateur envoi tout simplement ma fonction bouler et retourne donc des tailles de 0.

Et j'ai beau essayer de faire un test ensuite pour refaire une nouvelle fois la retaille si la largeur ou la hauteur sont égales à 0, mais cela ne change rien..

Voici le code de ma fonction, peut-être est-elle mal écrite ?

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
 
// Redimensionne une image
newImageSize: function(thisWidth, thisHeight, maxWidth, maxHeight, thumb) {
 
	// Definition des dimensions max (passe en parametre ou non)
	if (!maxWidth || maxWidth == '')
		var maxWidth		= this.zeGally.subsettings.maxWidth;
	if (!maxHeight || maxHeight == '')
		var maxHeight	= this.zeGally.subsettings.maxHeight;
 
	var newWidth		=	thisWidth;
	var newHeight	= thisHeight;
 
	// Dimensions max des miniatures si passe en parametre
	if (thumb === true) {
		maxWidth	= this.settings.maxThumbWidth;
		maxHeight	= this.settings.maxThumbHeight;
	}
 
	// Width ou Height trop grande
	if (thisWidth >= maxWidth || thisHeight >= maxHeight) {
		// Width et Height trop grande
		if (thisWidth >= maxWidth && thisHeight >= maxHeight) {
			// On prend la plus grande valeur
			if (thisWidth > thisHeight) {
				newWidth		= maxWidth;
				newHeight	= parseInt((thisHeight * newWidth) / thisWidth, 10);
			}
			else {
				newHeight	= maxHeight;
				newWidth		= parseInt((thisWidth * newHeight) / thisHeight, 10);
			}
		}
		// Width trop grande
		else if (thisWidth >= maxWidth) {
			newWidth		= maxWidth;
			newHeight	= parseInt((thisHeight * newWidth) / thisWidth, 10);
		}
		// Height trop grande
		else {
			newHeight	= maxHeight;
			newWidth		= parseInt((thisWidth * newHeight) / thisHeight, 10);
		}
	}
 
	// Renvoi des nouvelles dimensions stockees dans un objet
	var sizeImage	= {'newWidth' : newWidth, 'newHeight' : newHeight};
	return sizeImage;
 
},

J'espère que vous avez compris ce que je tente d'expliquer, n'hésitez pas si vous avez des questions et merci d'avance pour votre précieuse aide

[scourjean]

Niveau HTML pour les images tu as quoi ? Parce qu'il y a plein de plugin qui font déjà cela miniature et après un content qui se met à jour au clic ou bien une lightbox qui s'ouvre.

[Hultra]

Ben niveau HTML c'est des balises img, ensuite le plugin les récupères (avec toutes les infos qui vont bien) et il les reconstruit en fonction des paramètres que l'utilisateur a rentré.

Je sais qu'il y a pleins de plugins qui existent pour ça, mais il y a toujours une fonctionnalité manquante que je veux, et puis je souhaitais faire mon propre plugin donc voilà

[scourjean]

Bah pour les images, je pense que l'utilisateur peut paramétrer une taille des vignettes, pourquoi tu ne mets pas un truc du genre lors de ta boucle sur chaque élément image :

Code :

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

1
2
$(this).attr("width",param_width_vignette);
$(this).attr("height",param_height_vignette);

[Hultra]

Ben une fois que la fonction de retaille est faites et a renvoyé les nouvelles dimensions je fais bien ceci :

Code :

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

1
2
3
 
$(this.zePic).find('img').attr('width', newSize.newWidth);
$(this.zePic).find('img').attr('height', newSize.newHeight);

this.zePic étant le div contenant l'image en cours de traitement.

J'ai l'impression que ce bug ne se fait que sur Firefox, les autres ne me l'ont en tout cas pour l'instant pas fait... (Chrome, IE).

[scourjean]

Essaye sans la fonction de retaille, juste le nouveau param width et height