Fonction hover sur image [Résolu]

[zepokpok]

Salut à tous !

j'essaie d'adapter ce bout de code jquery ( http://buildinternet.com/2009/03/sli...s-with-jquery/) pour une galerie d'images. Seulement problème je ne peux pas faire ce que je veux avec la structure html du site, je passe par un CMS (contao que je vous conseille au passage).

donc en gros sur le modèle de cette structure simple :

Code html :

1
2
3
4
5
6
7
8
<div class="boxgrid captionfull">
		<img src="jareck.jpg"/>
		<div class="cover boxcaption">
			<h3>Jarek Kubicki</h3>
			<p>Artist<br/><a href="http://www.nonsensesociety.com/2009/03/art-by-jarek-kubicki/" target="_BLANK">More Work</a></p>
 
		</div>		
	</div>

avec cette fonction :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
 
<script type="text/javascript">
			$(window).load(function() {
			//Full Caption Sliding (Hidden to Visible)
				$('.boxgrid.captionfull').hover(function(){
					$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
				}, function() {
					$(".cover", this).stop().animate({top:'260px'},{queue:false,duration:160});
				});
 
			});
		</script>

J'essaie de l'adapter à mon architecture qui est la suivante :

Code html :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="boxgrid captionfull>
<div class="layout_latest block first even">
 
<div class="image_container">
<img src="tl_files/monsite/images/syndicat_rea.jpg" width="257" height="141" alt="Charte finale" />
</div>
 
 
<div class="cover boxcaption"> 
<h2><a href="test.html" title="Lire l'article: Syndicat ">Syndicat</a></h2>
<p class="teaser"></p>
<p class="more"><a href="index.php" title="Lire l'article">En savoir plus... <span class="invisible">Syndicat </span></a></p>
</div>
</div>

Je me suis bien débrouillé pour recréer une "div" boxgrid captionfull qui englobe le cover boxcaption mais à mon avis dans la fonction jquery le chemin ne doit pas être bon et j'avoue ne pas être assez calé pour le réécrire correctement.

j'ai essayé plusieurs trucs dont

Code :

1
2
3
4
5
6
7
8
9
10
11
		<script type="text/javascript">
			$(window).load(function() {
				//Full Caption Sliding (Hidden to Visible)
				$('.boxgrid.captionfull.image_container').hover(function(){
					$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
				}, function() {
					$(".cover", this).stop().animate({top:'260px'},{queue:false,duration:160});
				});
 
			});
		</script>

mais rien n'y fait.
Ce n'est pas un problème d'exécution du jquery car si je le colle tel quel dans ma page cela fonctionne...

si quelqu'un voit le problème je suis tout ouïe

Merci encore !

[danielhagnoul]

Bonsoir

Je n'ai pas suffisamment de code pour faire un test qui fonctionne, mais je suggère d'essayer :

Code :

1
2
3
4
5
6
7
$('.boxgrid.captionfull').hover(
	function(){
		$(this).find(".cover").stop().animate({top:'160px'}, {queue:false, duration:160});
	}, function() {
		$(this).find(".cover").stop().animate({top:'260px'}, {queue:false, duration:160});
	}
);

[zepokpok]

woot ça marche !

bon je m'explique, comme le code était généré par php il fallait en fait faire des echo pour faire apparaitre une balise </div> qui passait à la trappe si je la collais telle quelle. Mon html était donc erroné, ça ne gênait pas la page, mais du coup le chemin vers l'image était faux.

Ton code marche nickel, ça n'a pas résolu mon problème dans un premier temps mais ça m'a incité à chercher plus loin.

Merci à toi !

Bonne journée