jquery - fancybox image count title display -

i have page uses fancybox 2.1.4 display multiple different image galleries according respective rel attributes.

i've been struggling getting image count of each gallery displayed in current image title. after copying method described jfk via this stack overflow post, remaining script becomes disabled.

my code below. can help?

    <script type="text/javascript">         $(document).ready(function() {             $(".fancybox").fancybox({                 helpers : {                     title: {                         type: 'outside'                         }                    }, // helpers                    afterload : function() {                     this.title = (this.title ? " + this.title + '<br />' : ") + 'image ' + (this.index + 1) + ' of ' + this.group.length;                    }                                     });              //start fade transition             (function ($, f) {                 f.transitions.resizein = function() {                     var previous = f.previous,                         current  = f.current,                         startpos = previous.wrap.stop(true).position(),                         endpos   = $.extend({opacity : 1}, current.pos);                      startpos.width  = previous.wrap.width();                     startpos.height = previous.wrap.height();                      previous.wrap.stop(true).trigger('onreset').remove();                      delete endpos.position;                      current.inner.hide();                      current.wrap.css(startpos).animate(endpos, {                         duration : current.nextspeed,                         easing   : current.nexteasing,                         step     : f.transitions.step,                         complete : function() {                             f._afterzoomin();                              current.inner.fadein();//this rule controls fadein of next image                         }                     });                 };              }(jquery, jquery.fancybox));              $(".fancybox")                 /*.attr('rel', 'gallery')// commenting out each gallery loops through versus next gallery*/                 .fancybox({                     nextmethod : 'resizein',                     nextspeed  : 200,//this rule controls white flash action happens after image advanced                      prevmethod : false,                      helpers : {                         title : {                             type : 'outside'                         }                     }                 }); //end fade transition          });              </script> 

the problem script line

beforeshow: function () {     this.title = (this.title ? " + this.title + '<br />' : ") + 'image ' + (this.index + 1) + ' of ' + this.group.length; } 

you said following post here same line in code looks :

beforeshow: function () {     this.title = (this.title ? '' + this.title + '<br />' : '') + 'image ' + (this.index + 1) + ' of ' + this.group.length; } 

are sharp enough see difference? ... let's put them side side in same order (only concerned part) :

this.title = (this.title ? " + this.title + '<br />' : ")   // this.title = (this.title ? '' + this.title + '<br />' : '') // me 

the single quotes in script creating empty space, while double quotes creating string shouldn't there.