Discussion :

[lili2704]

Bonjour,

J'utilise jquery pour afficher une gallery dans une div, comme ceci:

Code :

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

1
2
3
4
5
<div class="container_image">
<ul class="thumb">
 
	<li><a href="images/thumb1.jpg"><img src="images/thumb1.jpg" alt="" /></a></li>
	<li><a href="images/thumb2.jpg"><img src="images/thumb2.jpg" alt="" /></a></li>....

Mon css est ceci:

Code :

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

1
2
3
4
.container_image {
	position: absolute;
	overflow : visible; 
}

et mon hover est traité en javascript:

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
$("ul.thumb li").hover(function() {
	$(this).css({'z-index' : '10'});
	$(this).find('img').addClass("hover").stop()
		.animate({
			marginTop: '-110px', 
			marginLeft: '-110px', 
			top: '50%', 
			left: '50%', 
			width: '174px', 
			height: '174px',
			padding: '20px' 
		}, 200);
 
	} , function() {
	$(this).css({'z-index' : '0'});
	$(this).find('img').removeClass("hover").stop()
		.animate({
			marginTop: '0', 
			marginLeft: '0',
			top: '0', 
			left: '0', 
			width: '80px', 
			height: '80px', 
			padding: '5px'
		}, 400);

Tout ceci fonctionne parfaitement, mon img grossit lorsque je passe dessus sauf que ma div contenant des images a une taille fixe et si j'augmente le nombre de mes images, elles dépassent de la div. Du coup, je veux mettre un ascenseur. Or si je mets un ascenseur dans ma div, par exemple avec un overflow: scroll; je me retrouve avec mes images se trouvant au bord de la div ne pouvant plus grossir correctement: je m'explique: le hover marche toujours mais l'affichage se fait à l'intérieur de la div uniquement et du coup l'image est rogné sur le hover.

Si vous avez des idées ou besoin de plus de détails, dites moi le. Merci beaucoup.

[gtraxx]

Je ne sais pas si c'est cela que vous cherchez, mais j'ai fais jadis un plugin jquery avec un effet similaire:

magicalHover

[lili2704]

C'est effectivement l'effet désire, c'est d'ailleurs ce que j'arrive à obtenir grâce à mon code sauf que tu moment que je mets un ascenseur ce n'est plus bon.

Voici de quoi je suis partie: http://www.sohtanaka.com/web-design/...es/image-zoom/

Je suis donc toujours coincée :-)
Merci

[danielhagnoul]

Bonjour.

L'overflow scroll est bien la source du problème, même en mettant le changement de zIndex sur l'image plutôt que sur le li rien ne change hélas !

Code :

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

$(this).find('img').addClass("hover").css("zIndex","9999").stop().animate({...

[lili2704]

Ah.... c'est pas rassurant ce que tu me dis là.
Est-ce qu'il y aurait une alternative à l'overflow scroll pour pouvoir avoir un ascenceur?
Merci d'avoir regardé