How can I display the image number with the new fancybox 2.0.6?

Question

Let's say I have 15 images in a gallery, and I want to add some thing like "Image 1 of 15". In the previous version, I could use something like:

'titlePosition': 'over'
'titleFormat': function(currentArray, currentIndex, currentOpts) { return '<span id="fancybox-title-over">Image ' +  (currentIndex + 1) + ' / ' + currentArray.length + '</span>'

Any help would be appreciated.

Answer 1

You can do this way DEMO:

<script type="text/javascript">
$(document).ready(function() {
 $('.fancybox').fancybox({
  prevEffect : 'fade',
  nextEffect : 'fade',
  afterLoad : function() {
   this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
  },
  helpers: {
   title: {
    type: 'inside'
   },
   thumbs: {
    width   : 50,
    height  : 50
   }
  }
 });
});
</script>

Answer 2

From another question: "[...] for version 2.0.6, we can't use the afterLoad callback as we did it for v2.0.1 (this is what it makes the titles disappear).... we will use beforeShow instead."

so:

  beforeShow : function() {
   this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
  }

Works!