Fancybox title / caption - fancybox

Question

I'm very new to website design and can't write js scripts as yet. My CSS is fairly basic. I'm using FB 1.3.4 and it all works fine but I want to change the format of the image title / caption.
I currently have this format:
"Image 1 of 10 This is the caption for this image. [Photo: a Smith]"
What I want is this:
"This is the caption for this image. [Photo: A Smith]
Image 1 of 10"
Note that the Image 1 of 10 is on a new line. I would also like extra spaces between the end of the image caption and the [Photo: A Smith] although I can't work out how to show it here
My script is:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'overlayColor' : '#000000',
'overlayOpacity' : '0.90',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' of ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
});
});
</script>
My CSS for fancybox-title-over is:
.fancybox-title-over {
position: absolute;
bottom: 0;
left: 0;
color: #FFF;
text-align: left;
}
I know that I need to alter titlePosition to 'inside' but can't get beyond that! Can anyone help me with this? Many thanks.

Answer 1

For your titleFormat, replace this line:
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' of ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
with this:
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span>'+title+'<br />Image ' + (currentIndex + 1) + ' of ' + currentArray.length + (title.length ? ' ' : '') + '</span>';
}
For the extra spaces you want, you may use the character code (one for each extra space you need) inside your title attribute like
title="This is the caption for this image. [Photo: a Smith]"
Also, change the titlePosition to inside like
'titlePosition' : 'inside'
and last: I wouldn't advice you set the title with position: absolute. You may change the text-align to the left with an inline CSS declaration (after you loaded the fancybox CSS file) though with:
.fancybox-title-inside {
text-align: left;
}