Question

First post, so apologies in advance.

I’m using this
How to display fancybox title only on image hover
and it works a treat, except when you click prev/next and the cursor is ALREADY hovering, the title doesn’t appear – you have to hover out and back in again.

Any idea how to make the title appear if you’re already hovering when the image loads?

Example here
http://www.richardbarry.co.uk/fancyhover.php

It worked in fancybox 1, like this-
http://www.richardbarry.co.uk/gallery.php

Any help much appreciated

Answer 1

As a workaround, you may try adding a function to detect if the mouse is already hovering the fancybox content as in this post …. then show the fancybox title if so.

$(".fancybox").fancybox({
  helpers: {
    title: {
      type: 'over'
    }
  },
  afterShow: function () {
    $(".fancybox-title").hide();
    // shows/hides title on hover
    $(".fancybox-wrap").hover(function () {
      $(".fancybox-title").stop(true, true).slideDown(200);
    }, function () {
      $(".fancybox-title").stop(true, true).slideUp(200);
    });
    // detects if mouse is already hovering
    $(".fancybox-outer a, .fancybox-outer img").hover(function () {
      $(this).data('timeout', setTimeout(function () {
        $(".fancybox-title").stop(true, true).slideDown(200);
      }, 100));
    }, function () {
      clearTimeout($(this).data('timeout'));
    });
  }
});

See JSFIDDLE … it seems to work fine in IE7+ and FF