CODEWITHSUNDEEP
fancybox
user1247077
user1247077

Reputation: 1

Fancybox title / caption

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 ? ' &nbsp; ' + 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.

Upvotes: 0

Views: 10853

Answers (1)

JFK
JFK

Reputation: 41143

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 ? ' &nbsp; ' + title : '') + '</span>';
}

with this:

'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
  return '<span>'+title+'<br />Image ' + (currentIndex + 1) + ' of ' + currentArray.length + (title.length ? ' &nbsp; ' : '') + '</span>';
}

For the extra spaces you want, you may use the character code &nbsp; (one for each extra space you need) inside your title attribute like

title="This is the caption for this image. &nbsp;&nbsp;[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;
}

Upvotes: 2

Related Questions