application de css en javascript
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:
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:
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 :)
