Bonjour,
J'utilise jquery pour afficher une gallery dans une div, comme ceci:
Mon css est 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>....
et mon hover est traité en javascript:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4 .container_image { position: absolute; overflow : visible; }
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.
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);
Si vous avez des idées ou besoin de plus de détails, dites moi le. Merci beaucoup.
Partager