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