I don't know javascript at all, but I am trying to format my titles/captions for my pictures that are being displayed using FancyBox. In my title attribute in my <a> tag, I have an individuals name, major, and career written out. I would like to have their Name displayed on one line, and then major and career can be on the next. For example:

Joe Smith, BS '02
Major: CSR, Career: Retail Manager

I know I can't enter in a break in the title="", so is there an easy way to do this in my javascript function? I was hoping that I could just set my id attribute to the person's name and call it in my function, and then set the title to the rest, but that doesn't seem to work.

Here is the current function that works fine, just need to split my title somehow:

("a[rel=cdfs]").fancybox({

            'transitionIn'      : 'elastic',
            'transitionOut'     : 'elastic',
            'titlePosition'     : 'over',
            'titleFormat'       : function(title, currentArray, currentIndex, currentOpts) {
                return '<span id="fancybox-title-over">' + (title.length ? ' &nbsp; ' + title : '') + '<br/><p align="right" >Image ' + (currentIndex + 1) + ' / ' + currentArray.length + '</p></span>';
            }
        });

Thank you for any ideas or input! I appreciate it :)

I don't know javascript at all, but I am trying to format my titles/captions for my pictures that are being displayed using FancyBox. In my title attribute in my <a> tag, I have an individuals name, major, and career written out. I would like to have their Name displayed on one line, and then major and career can be on the next. For example:

Joe Smith, BS '02
Major: CSR, Career: Retail Manager

I know I can't enter in a break in the title="", so is there an easy way to do this in my javascript function? I was hoping that I could just set my id attribute to the person's name and call it in my function, and then set the title to the rest, but that doesn't seem to work.

Here is the current function that works fine, just need to split my title somehow:

("a[rel=cdfs]").fancybox({

            'transitionIn'      : 'elastic',
            'transitionOut'     : 'elastic',
            'titlePosition'     : 'over',
            'titleFormat'       : function(title, currentArray, currentIndex, currentOpts) {
                return '<span id="fancybox-title-over">' + (title.length ? ' &nbsp; ' + title : '') + '<br/><p align="right" >Image ' + (currentIndex + 1) + ' / ' + currentArray.length + '</p></span>';
            }
        });

Thank you for any ideas or input! I appreciate it :)

• javascript
• jquery
• fancybox

Share Improve this question Follow edited May 18, 2011 at 15:02 amosrivera 26.5k99 gold badges6969 silver badges7676 bronze badges asked May 18, 2011 at 14:48 AmandaAmanda 1311 silver badge33 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

You can break your title in two lines like that:

'titleFormat': function(title, currentArray, currentIndex, currentOpts){
temp=title.split('|');
if(!temp[1]){temp[1]=""};
return '<div>'+temp[0]+'</div><div>'+temp[1]+'</div>'

},

As you can see I am spliting the title by addition of '|' character, which need to be added to your title text, but you can do it differently. Also, in this simple example the formatting such as background etc is lost but that you can fix it easily.

good luck

K