Discussion :

[ptit_fumiste]

Bonjour,
Je suis en train de développer un petit site web pour un ami, et malheureusement je me heurte à un problème que je n'arrive pas a résoudre : aprés avoir inséré dans la page des div qui contiennent des images que je génère en javascript, je n'arrive pas à appliquer des propriétés css sur ces images...
Voici la fonction charge les images, et qui appelle la fonction CreateImageListItem, qui incorpore les images dans la page html.

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
 
function LoadImages()
{
		CreateImageListItem(currentImageIndex);
 
		currentImageIndex ++;
 
		var img = new Image();
		img.onload = function() { LoadImages(); }
		img.onerror = function() { SetThumbnailsPosition(); }
		img.src = "images/affiches/thumbnails/affiche_" + currentImageIndex + ".jpg";
}
 
function CreateImageListItem(index)
{
	var url = "images/affiches/affiche_";
 
	var dotIndex = url.lastIndexOf('/');
	var url_part1 = url.substring(0, dotIndex);
	var url_part2 = url.substring(dotIndex);
	var thumbnailUrl = url_part1 + '/thumbnails' + url_part2 + index + '.jpg';
 
	var imageUrl = url + index + '.jpg';
 
	var item =  ' \
				<div style="position: relative"> \
					<a href="' + imageUrl + '"> \
						<img id=" thumbnailAffiche' + index + '" src="' + thumbnailUrl + '" alt="Affiche '+ index + '" class="thumbnail" /> \
					</a> \
				</div>';
 
	if(index <6)
		$('#container #thumbnailsGallery_left').append(item);
	else
		$('#container #thumbnailsGallery_right').append(item);
}

jusque là, tout marche, le CSS que je met dans la class "thumbnail" marche sans problème (changement d'opacité, etc).
Voici ensuite la fonction qui est censée appliquer ce CSS. Malheureusement, je n'arrive pas récupèrer la largeur des images, afin de calculer le margin-left qui servira à aligner du point de vue horizontal.

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
function SetThumbnailsPosition()
{
	var thumbnailId;
	var thumbnailWidth;
	var thumbnailMarginLeft;
	var i;
 
	for(i = 1; i <= numberOfImages; i++)
	{
		thumbnailId = "#thumbnailAffiche" + i;
		thumbnailWidth = $(thumbnailId).width();
		thumbnailMarginLeft = (-1) * ((thumbnailWidth - (thumbnailWidth % 2)) / 2);
 
		$(thumbnailId).css({'margin-left': thumbnailMarginLeft + 'px'});
	}
}

La variable thumbnailWidth me retourne la valeur null à chaque fois...
Quelqu'un pourrait-il m'éclairer sur ce sujet? Merci d'avance

[emmanuel.remy]

Salut,

width est un attribut, pas une fonction:

Code :

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

thumbnailWidth = $(thumbnailId).width;

ERE

[ptit_fumiste]

Si j'écris "thumbnailWidth = $(thumbnailId).width;", et que je fais un alert(thumbnailWidth ), cela me retourne :

Code :

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

1
2
3
4
5
function (K) {
    return this[0] == l ? document.compatMode == "CSS1Compat" &&
        document.documentElement["client" + G] ||
        document.body["client" + G] : this[0] == document ? Math.max(document.documentElement["client" + G], document.body["scroll" + G], document.documentElement["scroll" + G], document.body["offset" + G], document.documentElement["offset" + G]) : K === g ? this.length ? o.css(this[0], J) : null : this.css(J, typeof K === "string" ? K : K + "px");
}

L'application du css ne marche toujours pas... Je précise au cas ou que j'utilise la librairie jquery.

[emmanuel.remy]

L'application du css ne marche toujours pas... Je précise au cas ou que j'utilise la librairie jquery.

Tu fais bien je croyais que c'était du prototype... pour lequel le width fonctionne.

ERE

[emmanuel.remy]

Re,

As tu vérifié que $(thumbnailId) renvoie l'image ?

ERE

[ptit_fumiste]

normalement, object.width() est censé retourner la tailler de l'objet (d'aprés la doc sur jquery.com)
Sinon thumbnailId contient bien l'id de dl'image que je vise (#thumbnailAffiche1, #thumbnailAffiche2, etc). Il me semble que le $(thumbnailId) est seulement censé me sélectionner l'image, je ne sais pas comment faire pour vérfier qu'il me renvoie l'image...

[ptit_fumiste]

bon, désolé du dérangement, dans la fonction CreateImageListItem() j'avais mi comme id : " thumbnailAffiche" au lieu de "thumbnailAffiche".....