Adding a title to fancy box

Question

Hi you probably think this is a dumb question but I am trying to get titles added to fancy box 2. I know very little about javascript but have this at the bottom of my html

<script type="text/javascript">
$(document).ready(function() {
    $(".fancybox").fancybox();
});
</script>

AND if I try to add in

$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
    beforeLoad: function() {
        this.title = $(this.element).attr('caption');
}
});

I get all sorts of syntax errors.

Site is: http://bit.ly/Wan5kr

Answer 1

Your current script is :

 $(document).ready(function() {
  $(".fancybox").fancybox({
   helpers : { 
    title : { type : 'inside' }
   }, // helpers
   afterLoad : function() {
    this.title = (this.title ? '' + this.title + '<br />' : '') + 'Image ' + (this.index + 1) + ' of ' + this.group.length;
   } // afterLoad
  }); // fancybox
 }); // ready

... but should be (if you don't want to have "page 1 of 6") :

 $(document).ready(function() {
  $(".fancybox").fancybox({
   helpers : { 
    title : { type : 'inside' }
   } // helpers
  }); // fancybox
 }); // ready

On the other hand, if you prefer to use a caption attribute (because the title shows up as tooltip when you hover the images) the change title by caption like

<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>

and use this script

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

Answer 2

One (and the simplest) option is to set the tittle attribute of the parent href.

Just like:

<a href="./bigimg/image.jpg" title="My custom title here" id="example">
    <img src="./thumbs/image.jpg" alt="thumbnail of image">
</a>

If you want to place the title inside the lightbox instead of right below it, you need to change the 'titlePostion' attribute. Just like this:

$("a.fancybox").fancybox({
    'titlePosition'  : 'inside'
});

Instead of 'over' you can also place it 'inside' or 'outside'. Outside is the default fancybox behavior. It positions your title right below (outside) of the lightbox. 'Over' places the title inside the lightbox, but on top of your picture with a dark alpha transparent background. 'Inside' places your title inside the lightbox, but below the picture, in the white lightbox border.

You can see the different results on the frontpage of fancybox.net. See the three pictures under: "Different title positions - 'outside', 'inside' and 'over'"