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:
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 :
J'essaie de l'adapter à mon architecture qui est la suivante :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>
Code:
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 dontmais rien n'y fait.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>
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 :D
Merci encore !