jquery - Fancybox2: Title positioning and format

Question

Just getting started with Fancybox2.

The demo http://webdesignandsuch.com/posts/fancybox-download/fancyBox2/ I am playing with has the title as a centred black box, with white font, aligned one line below the image.

I want to show my title area within the bottom margin (ie black text on white background) so that whatever its height it expands to fit within the overall margin of the image and does not ingress into the image area.

I would also like to show 'Image x of y' on final line of the title area.

Can anyone give me a simple pointer as to which CSS or settings I need to change to achieve this.

Thanks

mcl

Answer 1

Use this script:

<script type="text/javascript">
 $(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
</script>

If you set the title attribute on your links with class="fancybox", it will display the title on the first line(s) and 'Image x of y' in the final line. If you didn't specify any title, only 'Image x of y' will be displayed.

UPDATE: For v2.0.6+ use beforeShow instead of afterLoad.