Customizing FancyBox's title

Question

I am trying to customize FancyBox 2 to not show the title attribute when hovering over the image. Now the way I have it set up is for the first image in the group to display on the page and when you click on it, the fancybox loads and you can scroll through to see the other images. I don't want them all displayed on the page, just the first image. I did this by hiding the anchors that followed the first (I didn't see an example of how to do this on FancyBox's website, so this was my first inclination and it works)

MY HTML

<li class="web">
  <a href="img/sites/salonantebellum.jpg" class="thumb web fancybox" rel="group1" title="My title">
    <h2 class="title">Web</h2>
    <span>
      <img class="button" src="web.jpg" alt="Web" title="image">Web
    </span>
  </a>
  <div id="myCaption" style="display: none;"><p>My Caption</p></div>
  <a href="img/sites/staceys.jpg" class="fancybox hidden" rel="group1" title="My title"></a>
  <a href="img/sites/mcfpd.jpg" class="fancybox hidden" rel="group1" title="My title"></a>
  <a href="img/sites/redstone.jpg" class="fancybox hidden" rel="group1" title="My title"></a>
</li>

My script in the head is

$(document).ready(function() {
  $(".fancybox").fancybox({
    afterLoad: function(){
      this.title = $('#myCaption').html();
    },
    helpers: {
      title : {
        type : 'inside'
      }
    }
  }); // fancybox
}); // ready

So my titles are going to be long descriptions of the image so I don't want them to show when you hover over the image. I just need to fix the first image since the rest are hidden anyway. I found this post on how to hide: How do I hide the tooltip on hover from the title tag when using FancyBox 2.0?

And you can see in my code above that I'm trying to use the hidden div, but when I scroll through in FancyBox and get back to the first image, it's displaying the "title" again and not the "myCaption".

How do I do this? I am a designer, NOT a developer so please explain well.

UPDATE: I feel like I'm not explaining well enough what my situation is, so I've updated my site to include my latest code: mckernanms.com Notice when you scroll through the Web images and return to the first, the "title" displays. And the first image of the other galleries is displaying the caption from the first web image which is wrong.

Answer 1

Based on your comment, here's the right solution to your issue:

See this working Fiddle Example!

Change you code into this:

$(document).ready(function() {
  $(".fancybox").fancybox({
    beforeLoad : function() {
      this.title = $(this.element).find('img').attr('alt');
    }
  }); // fancybox
}); // ready

And like that you can pass your current caption from the title on the <a></a> to the alt on the img.

The browser will not show it since the image is wrapper by the link and the link contains no title.

e.g.,

<a rel="example_group" title="" href="path_to_image.jpg">
    <img alt="This is the title, the title is mine!" src="path_to_image.jpg">
</a>

Found the solution on the documentation here!

Answer 2

If you're talking about the title "pop-ups", those are a part of the browser/os. It's not something you can disable except for not including a title attribute.

<a href="img/sites/staceys.jpg" title="My title"></a>

The above code will cause a pop-up on hover due to browser 'features', such as seen in Chrome's preview pane and the "Stack Overflow" pop-up bubble:

I believe FancyBox also uses this attribute to generate the captions for the image as well. I'm not familiar enough with FancyBox but a work-around might be to design your own custom HTML to display the image. FancyBox can pop-up mini-HTML content.

So, you would so something like:

<a href="#" class="fancybox">
    <img src="..." alt="" />
    <b class="caption">Lorem ipsum...</b>
</a>

You manually show your image and caption via HTML, instead of using FancyBox's default image view HTML.

This should allow you to have a caption while avoiding using the "title" attribute for A or IMG tags.

I hope that helps.

Cheers!

update 1

Perhaps I'm missing something, but I just removed the "title" attributes and it seemed to work just fine.

<ul class="gallery">
    <li class="web"><a ... title="Salon Antebellum">

Just remove that [title="Salon Antebellum"] bit and the equivalent ones on the next 2 elements.

Also remove the title attribute from this:

<span><img class="button" src="web.jpg" alt="Web" title="image">Web</span>

See if that works, if not, please try to explain what's missing. There's quite a few things going on and I might not pickup on some of the details.