Question

I have a custom formatTitle for jQuery Fancybox. I need show next and prev buttons and span like that “Image 1 of 4”. So, I have done it, but if I have just one image it is still shows “Image 1 of 1” and buttons too, it is not good looking. I have tried to do ‘if else’ statements for current index, but if I have more than one image – buttons are not showing and “Image 1 of 4” and when you are clicking next it’s start shown. Please, see the code:

function formatTitle(title, currentArray, currentIndex, currentOpts) {
    if(currentIndex == 0) {
        return '<div id="custom-title"><span><a href="javascript:;" onclick="$.fancybox.close();"><img src="/data/closelabel.gif" /></a></span>' + (title && title.length ? '<b>' + title + '</b>' : '' ) + '</div>';
    } else {
        return '<div id="custom-title"><span><a href="javascript:;" onclick="$.fancybox.close();"><img src="/data/closelabel.gif" /></a></span>' + (title && title.length ? '<b>' + title + '</b>' : '' ) + '<span><a href="javascript:;" onclick="$.fancybox.prev();">prev</a> <a href="javascript:;" onclick="$.fancybox.next();">next</a></span> Image ' + (currentIndex + 1) + ' of ' + currentArray.length + '</div>';
    }
}

And here is the link
Anybody help please?

Answer 1

You need to ask if currentArray.length==1.

Your question gives all times true because when the page load the index is zero.