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

1 Answer 1

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