How to display fancybox title only on image hover

Question

I'm using the Fancybox plugin for an image gallery, and I want to display the image titles only when the user hovers over the image. I cannot figure out what part of the code to modify in order to accomplish this.

I've tried editing the CSS by adding a :hover state to the following:

.fancybox-title-over-wrap {
}

and I've even tried playing with the CSS visibility settings here:

.fancybox-opened .fancybox-title {
}

However, I've had no luck.

Must I change something within the actual JS file? Any help would be tremendously appreciated!

Answer 1

You don't need to mess with the original js or css files. You just need to create your own custom script and apply there some fancybox API options and methods to achieve that.

For example, having this html

<a class="fancyLink" href="images/01.jpg" title="lorem ipsum">open image</a>

you would need a custom script to fire fancybox like:

<script type="text/javascript">
$(document).ready(function() {
 $(".fancyLink").fancybox();
}); // ready
</script>

now, within the script above, try the following options for the title effect you want:

<script type="text/javascript">
$(document).ready(function() {
 $(".fancyLink").fancybox({
  helpers: {
   title : {
    type : 'over'
   }
  },
  afterShow : function() {
   $(".fancybox-title").hide();
   $(".fancybox-wrap").hover(function() {
     $(".fancybox-title").show();
    }, function() {
     $(".fancybox-title").hide();
   });
  }
 });
}); // ready
</script>

You could even add some nice animation to show the title like

<script type="text/javascript">
$(document).ready(function() {
 $(".fancyLink").fancybox({
  helpers: {
   title : {
    type : 'over'
   }
  },
  afterShow : function() {
   $(".fancybox-title").hide();
   $(".fancybox-wrap").hover(function() {
     $(".fancybox-title").stop(true,true).slideDown(200);
    }, function() {
     $(".fancybox-title").stop(true,true).slideUp(200);
   });
  }
 });
}); // ready
</script>

NOTE : this is fancybox v2.x

Answer 2

From their site:

Make sure this is in your main page at the top:

<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.0.4" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.0.4"></script>

<!-- Optionaly add button and/or thumbnail helpers -->
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=2.0.4" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=2.0.4"></script>

<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=2.0.4" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=2.0.4"></script>

Then add this type of syntax to the images you want to do this with.

<a class="fancybox" rel="group" href="big_image_1.jpg"><img src="small_image_1.jpg" alt="" /></a>
<a class="fancybox" rel="group" href="big_image_2.jpg"><img src="small_image_2.jpg" alt="" /></a>

Lastly, make it all function with a little bit of jScript.

<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox();
    });
</script>

And if you're still having trouble, refer here: http://docs.jquery.com/Tutorials:How_jQuery_Works

To make the descriptions appear as you requested, maybe try this in the javascript:

$(document).ready(function() {
    $(".fancybox").fancybox({
        openEffect  : 'none',
        closeEffect : 'none'
    });
});

And this as your image syntax:

<a class="fancybox" rel="gallery1" href="http://path-to-image.com/images/photo.jpg" title="Some Description Here.">
    <img src="http://path-to-image.com/images/photo.jpg" alt="" />
</a>