11550 sujets

JavaScript, DOM et API Web HTML5

JavaScript et positionnement css float

Bonjour,

Je galère un peu ajourd'hui sur une gallerie de photos...

Ma page est composé de <div> contenant une vignette de photo.
Ces divs sont tous stylés avec float: left.
De cette manière, j'ai mes vignettes qui se succèdent, prenant toute la largeur de la page.

Jusque là tout va bien !

J'ai rajouté une action sur le onClick des vignettes. je voudrais que le <div> qui contient la vignette, s'aggrandisse jusqu'à une largeur et une hauteur fixée.

Là aussi pas de problème, mais !

Je voudrais que les vignettes continuent à s'adapter autour de ce div agrandi, et là ça ne va plus du tout, car le div aggrandi ne pousse pas les autres autour de lui.

Comment faire ce genre de comportement ?

Merci !

GS
Ta réponse n'est pas si anodine puisqu'elle m'a permis de voir une erreur Smiley smile

Ce qui m'amène à une nouvelle question !

Le code de base est une succession de:


<div class="vignette" onClick="displayPic(this,'aIMG_4824.jpg')">
	<a name="aIMG_4824.jpg">
	<img src="/somewhere/vig_IMG_4824.jpg" alt="vig_IMG_4824.jpg">
</div>


et la fonction JS qui va avec :

function displayPic(divignette, nomimage)
{
	base = 168;
	for (i=1 ; i<=100 ; i++)
    	{
    		divignette.style.width = base + ( 5 * i );
    	}
    	divignette.style.width = 680;
}


Le comportement est presque nickel à deux choses près:

La boucle for du script me laissait espérer que l'agrandissement serait progressif, alors qu'à l'image c'est immédiat...

Imaginons que la vignette sur laquelle je clique soit au milieu d'une ligne, elle va se retrouver sur la ligne suivante, seule ! (680px c'est la largeur de mon conteneur de vignettes, ce qui explique qu'elle soit seule !

Seulement, j'aurais préféré que l'image reste sur sa ligne mais que les vignettes se trouvant à sa gauche et à sa droite descendent en dessous.

Oui mais comment ?

Merci

GS
Sujet clos
Aller à