Fancybox 1.3.4 - Display Title and Caption - Wordpress

815 views
Skip to first unread message

Jonathan Auch

unread,
Mar 14, 2012, 2:43:16 PM3/14/12
to fancybox
Hi everyone,
Great group you have here. I am hoping someone can help or point me in
the right direction for help.

Basically, I have Wordpress theme that has an 'preloaded' version of
Fancy box 1.3.4. It works almost exactly the way it should but it
displays an overlayed title: ie 'Image x of x'

This can be seen here:

http://leahyerpe.com/exhibit/paintings/

What I would like to do is change the settings to display the title,
caption and alt image tags on separate lines outside the image. Is
this possible?

How can I go about doing this? which settings might I change? Also
which file do I edit: jquery.fancybox-1.3.4.pack.js or
jquery.fancybox-1.3.4.js?

Sorry for all the questions, but this type of coding is completely
foreign to me and I am complete noob.

Thanks again for any direction.

best
j

Jonathan Auch

unread,
Mar 15, 2012, 12:41:54 PM3/15/12
to fancybox
Hi everyone,
I have been experimenting and have found how to edit the options for
fancybox in the js.options.php file of my theme. I am still having
problems, so if anyone can help me out that would be really great.
Here is the script from the js.options.php in regards to the title:

function(title, currentArray, currentIndex, currentOpts) {
return '<div class="gallery-image-title">' + (title &&
title.length ? '<strong>' + title + '</strong>' : '' ) + '<span
class="image-count">Image ' + (currentIndex + 1) + ' of ' +
currentArray.length + '</span></div>';
},
'onComplete' : function(){
jQuery("#fancybox-close").hide();
jQuery("#fancybox-title").hide();
jQuery("#fancybox-wrap").hover(function() {
jQuery("#fancybox-close").stop(true).fadeTo("fast", 1.0);
jQuery("#fancybox-title").stop(true).fadeTo("fast", 1.0);
}, function() {
jQuery("#fancybox-close").stop(true).fadeTo("fast", 0);
jQuery("#fancybox-title").stop(true).fadeTo("fast", 0);
});
}
});


What I am trying to do is remove the 'Image x of x' title and replace
it with a title that has breaks ie:

'Title of the image'
'Another Piece of info'
'Third Piece of Info'

Is this possible? Right now I can't even get the Title attribute to
display when I insert one in wordpress, all I can get to display is
the 'Image x of x'.

Thanks so much.
J

webdev

unread,
Mar 18, 2012, 9:07:16 AM3/18/12
to fancybox

>
> > this possible?
>

<code>
function(title, currentArray, currentIndex, currentOpts){
return '<div class="gallery-image-title">' + (title &&
title.length ? '<strong>' + title + '</strong>' : '' ) + '</div>';
}
</code>
or
<code>
function(title, currentArray, currentIndex, currentOpts) {
return '<div class="gallery-image-title">' + (title &&
title.length ? '<strong>' + title + '</strong>' : '' ) + '<br /><span
class="image-count">Image ' + (currentIndex + 1) + ' of ' +
currentArray.length + '</span></div>';
}
</code>

The "title" attribute must be on "<a rel="ha-gallery" href="image.jpg"
title="Orbit-test"><img alt="Orbit" src="image-165x100.jpg"></a>" tag.
Reply all
Reply to author
Forward
0 new messages