If you’re using the jQuery.fancybox plugin and you’re not happy with the titleformat options, you might want to create the fancybox title on your own. And here’s how you do so.

First of all you need to write a function, which creates the title. This function has to have 4 parameters:

title: as described in the fancybox options
currentArray:  array with the elements (>1 if it’s a gallery)
currentIndex: the key of the current array element
currentOpts: the object which contains the fancybox options

In my example I’m gonna show you how i made the custom title for this website, consisting of the image title and an information which image of a gallery it is.
First of all i added 2 options to the fancybox config object, custom_counterText(my custom option) and titleFormat(see fancybox API). custom_counterText contains two strings I’m gonna replace in the callback function of titleFormat with the needed information.

$(document).ready(function(){
    $('a.fancy').fancybox({
        custom_counterText: 'Image {#index#} of {#count#}',
        titleFormat: fancyTitle
    });
});

The callback function is very simple. It just creates the necessary DOM elements (as jQuery objects), fills them with content and assembles them. Then it returns the main element ($container).

function fancyTitle(title, currentArray, currentIndex, currentOpts){
    if(title != ''){
        var counterText = currentOpts.custom_counterText;
        var $container = $('<div id="fancybox-custom-title-container"></div>');
        var $title = $('<span id="fancybox-custom-title"></span>');
        if(currentArray.length > 1){
            var $counter = $('<span id="fancybox-custom-counter"></span>');
            $counter.text(
                counterText
                .replace('{#index#}', (currentIndex+1))
                .replace('{#count#}', currentArray.length));
            $container.append($counter);
        }
        $title.text(title);
        $container.append($title);
        return $container;
    }
}

Add a little bit of CSS and that’s all – nothing more, nothing less.