Adding description in Fancybox

Question

I have this fancybox code --> jsfiddle: http://jsfiddle.net/uZCC6/5192/

CSS:

.hidden {
    display: none;
}

JQUERY:

 $('.fancybox').fancybox({
                prevEffect : 'fade',
                nextEffect : 'fade',

                closeBtn  : true,
                arrows    : true,
                nextClick : true,

                helpers : {
                    thumbs : {
                        width  : 50,
                        height : 50
                    }
                }
            });

I'm trying to add a description to the image popping out using this method provided by JFK Adding a title to fancy box.

<a href="images/Gallery/large/wing-back-chair.jpg" caption="Early 1900'....." rel="Sold" class="fancybox"><img width="304" height="350" alt="Winged back chair and ottoman" src="images/Gallery/tn/wing-back-chair.jpg"></a>

 $(document).ready(function() {
  $(".fancybox").fancybox({
   helpers : { 
    title : { type : 'inside' }
   }, // helpers
   beforeLoad: function() {
    this.title = $(this.element).attr('caption');
   }
  }); // fancybox
 }); // ready

However when i try to implement his code, the thumbnails are disappearing, any help on the correct method of applying his answer?