title: Customizing FancyBox's title
body: <p>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)</p>
  
  <p><strong>MY HTML</strong></p>
  
  <pre><code>&lt;li class="web"&gt;
    &lt;a href="img/sites/salonantebellum.jpg" class="thumb web fancybox" rel="group1" title="My title"&gt;
      &lt;h2 class="title"&gt;Web&lt;/h2&gt;
      &lt;span&gt;
        &lt;img class="button" src="web.jpg" alt="Web" title="image"&gt;Web
      &lt;/span&gt;
    &lt;/a&gt;
    &lt;div id="myCaption" style="display: none;"&gt;&lt;p&gt;My Caption&lt;/p&gt;&lt;/div&gt;
    &lt;a href="img/sites/staceys.jpg" class="fancybox hidden" rel="group1" title="My title"&gt;&lt;/a&gt;
    &lt;a href="img/sites/mcfpd.jpg" class="fancybox hidden" rel="group1" title="My title"&gt;&lt;/a&gt;
    &lt;a href="img/sites/redstone.jpg" class="fancybox hidden" rel="group1" title="My title"&gt;&lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p><strong>My script in the head is</strong></p>
  
  <pre><code>$(document).ready(function() {
    $(".fancybox").fancybox({
      afterLoad: function(){
        this.title = $('#myCaption').html();
      },
      helpers: {
        title : {
          type : 'inside'
        }
      }
    }); // fancybox
  }); // ready
  </code></pre>
  
  <p>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: 
  <a href="https://stackoverflow.com/questions/9610883/how-do-i-hide-the-tooltip-on-hover-from-the-title-tag-when-using-fancybox-2-0">How do I hide the tooltip on hover from the title tag when using FancyBox 2.0?</a></p>
  
  <p>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". </p>
  
  <p>How do I do this? I am a designer, NOT a developer so please explain well.</p>
  
  <p>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: <a href="http://mckernanms.com/" rel="nofollow noreferrer">mckernanms.com</a> 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.</p>