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