Forums

Jquery help show hide a caption

Permalink
Hey all. Im making a project were i need to show and hide caption using hover. When i hover the image i need the caption to show and when i dont it should dissappear.

Let me just say im kinda new with jquery but i got this working - but my problem now is that EVERY caption is showed when i hover 1 image. This makes sence though due to my script is not advanced enough, but im not sure how to continue this script so it will work to my needs and therefor i hope some of you clever people are willing to help me out.

here we go.

This script i use to show the div with the caption info.

<script type="text/javascript">
$(document).ready(function(){
        $(".caption-custom").hide();
        $(".thumbnail").show();
   $('.thumbnail').hover(function(){
   $(".caption-custom").slideToggle();
   });
});


this is the code from the vimeo gallery block which i have added some stuff to, so i could get this working. Now i just need only the picture i hover to show the caption and not all the captions for all the pictures when i just hover one image.

<ul class="clearfix thumbnails">
         <?php  foreach ($videos->video as $video): ?>
            <li>
               <a href="<?php  echo $video->url ?>" class="thumbnail" rel="fjhadd_vg<?php  echo $bID; ?>[fjhadd_vg_gallery<?php  echo $bID; ?>]">
                  <img src="<?php  echo $video->thumbnail_medium ?>" />
               </a>
                  <div class="caption-custom"><!-- smid under a for at lave tilbage til original-->
                  <span class="vimeo-title"><?php echo $video->title?></span><br>
                  <span class="vimeo-description"><?php echo $video->description?></span>
                  </div>
            </li>   
         <?php  endforeach ?>
      </ul>


hope someone will help me out.

thank you
 
mkly replied on at Permalink Best Answer Reply
mkly
<script type="text/javascript">
$(document).ready(function(){
  $(".caption-custom").hide();
  $(".thumbnail").show();
  $('.thumbnail').hover(function(){
    $(this).next('.caption-custom').slideToggle();
  });
});
</script>

There is probably a fancier way. But the problem you are having is that jQuery will apply that to all ".caption-custom" matches, so you need to drill down to only the one you want. You can do that a lot of different ways.
berteldk replied on at Permalink Reply
this seems to work perfect! Thank you. Now i just have one new issue, if u have time please look here:

http://thefeist.dk.linux22.unoeuro-server.com/custom/...

can you see that now when u hover and the mouse is on the div that comes to show when the image is hovered it glitches... you see what i meen? Any idea how to fix this?
berteldk replied on at Permalink Reply
Anyone have an idea of how i can make the caption div not visible for the mouse ? Or how do i get arround this glitch here:

Watch what happens when i hover the image caption here:

http://thefeist.dk.linux22.unoeuro-server.com/custom/...
berteldk replied on at Permalink Reply
Anybody ?
PauloCarvalhoDesign replied on at Permalink Reply
PauloCarvalhoDesign
You need to add .stop() on animation script, sot it stop everything before animate, then animate.
berteldk replied on at Permalink Reply
Could you show me how? Im not so good at coding. Thank you

Like this? 

<script type="text/javascript">
$(document).ready(function(){
 $(".stop")
  $(".caption-custom").hide();
  $(".thumbnail").show();
  $('.thumbnail').hover(function(){
    $(this).next('.caption-custom').slideToggle();
  });
});
</script>
PauloCarvalhoDesign replied on at Permalink Reply
PauloCarvalhoDesign
http://tutsplus.com/lesson/full-control-with-animate/