Fancybox add left/right buttons to the title

I just need help finishing this off now, the if statement that displays the prev/next buttons in the title are not working correctly.

Customising the standard fancybox by adding extra left / right buttons to the title like in the example image here:

This is what I have so far which adds the image count. Can the buttons be added to this, making it easier to style?

 $("a.fancybox").fancybox({
            'padding' : 5,
            'overlayShow' : true,
            'speedIn' : 600,
            'speedOut' : 500,
            'transitionIn': 'elastic',
            'transitionOut': 'elastic',
            'easingIn' : 'easeOutBack',
            'easingOut' : 'easeInBack',
            'titlePosition' : 'inside',
            'titleFormat' : function(title, currentArray, currentIndex, currentOpts) { 
                 $title = '';
                 var current = currentIndex + 1;
                 if(current >= currentArray.length){
                     $title += '<a href="javascript:;" onclick="$.fancybox.prev();" id="fancybox-prev-btn"></a>';
                 }
                 if(current <= currentArray.length){
                     $title += '<a href="javascript:;" onclick="$.fancybox.next();" id="fancybox-next-btn"></a>';
                 }
                 $title += '<span class="fancybox-title">' + title + '<span class="fancybox-title-count">(image ' +开发者_Python百科 (currentIndex + 1)  + ' of ' + currentArray.length + ')</span></span><br class="clearBoth"/>';
                 return $title;
            } 
        });

Try this instead (demo):

'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
  $title = '';
  var current = currentIndex;
  if(current > 0){
    $title += '<a href="#" onclick="$.fancybox.prev();return false;" id="fancybox-prev-btn"></a>';
  }
  if(current < currentArray.length - 1){
    $title += '<a href="#" onclick="$.fancybox.next();return false;" id="fancybox-next-btn"></a>';
  }
  $title += '<span class="fancybox-title">' + title + '<span class="fancybox-title-count">(image ' + (currentIndex + 1)  + ' of ' + currentArray.length + ')</span></span><br class="clearBoth"/>';
  return $title;
}

I changed the links to have a href="#" instead... just personal preference since I don't like seeing "javascript" pop up when I hover over a link.

Update for FancyBox 2.1+ (demo)

CSS

#fancybox-prev-btn, #fancybox-next-btn {
    position: absolute;
    top: 0;
    width: 30px;
    height: 30px;
    margin-left: -50px;
    cursor: pointer;
    z-index: 1102;
    display: block;
    background-image: url('http://i56.tinypic.com/s5wupy.png');
}

 #fancybox-prev-btn {
    background-position: -40px -30px;
    left: 0;
}
#fancybox-next-btn {
    background-position: -40px -60px;
    left: 30px;
}

Javascript

$(selector).fancybox({

    beforeLoad: function() {
        var title = '';
        if (this.index > 0) {
            title += '<a href="#" onclick="$.fancybox.prev();return false;" id="fancybox-prev-btn"></a>';
        }
        if (this.index < this.group.length - 1) {
            title += '<a href="#" onclick="$.fancybox.next();return false;" id="fancybox-next-btn"></a>';
        }
        title += '<span class="fancybox-title">' + $(this.element).find('img').attr('alt') + '<span class="fancybox-title-count">(image ' + (this.index + 1) + ' of ' + this.group.length + ')</span></span><br class="clearBoth"/>';
        this.title = title;
    }

});