Using titles outside the image means the image is not sized correctly

[jonanwyl]

Hi there

I’d like to use titles outside the image (Outside or Float) instead of Inside or Overlay. But when I set it up that way, the images open at a size that seems to ignore the title. The title is off the bottom of the screen often.
You can see examples on most pages at http://www.welljudged.com, including the home page

Is there a way to fix this? Obviously the ideal would be for the sizing to take into account the title and size appropriately, but I’d also be able to work with something where I could just size all images at say 90% of what they would have been otherwise.

And one other related question – is it possible to have different fancyboxes on different pages using different settings? At the moment I think I can only have titles on ALL my fancyboxes set to e.g. Inside. Is it possible to have one set to Overlay and another on another page set to Inside?

Thanks for your help!
Jon

[RavanH]

Hi,

The title (with position outside, float or inside) really only has space for one line. A second line might just fit but it depends on font sizes, line height and other styling (in your case added padding)…

There is an unused parameter (called margin) in FancyBox that allows to set a larger margin between the browser and the FancyBox frames. I’ll take this as a feature request for the upcoming Pro version 🙂

… is it possible to have different fancyboxes on different pages using different settings?

It is not possible to have different settings per page, but you can specify different parameters per media link. You will need to activate the option ‘Include Metadata jQuery extension’ which allows settings parameters like {titlePosition:over} to the link class. Available parameters and their values can be found on http://fancybox.net/api

In fact, if you can define/add classes for the slider on your homepage, then you could start using a different margin right away. Use something like {margin:60} for more title space…

[jonanwyl]

Ah thanks – I think I’m almost there but not quite.
I’ve added a class to the links that open the images from the slider (fb-margin) and I’ve added some jQuery code which runs on every page, but it’s not working. No doubt I’m doing something dumb as I’m a bit of a novice.

The jQuery I’m using is

$(".fb-image").fancybox({
		'margin'	: 60
	})

Is that what you meant by “setting parameters to the link class”?

Any tips would be very welcome!

Thanks
Jon

[RavanH]

Hi jon, no I was actually referring to the use of the Metadata extension. You can see an example on http://wordpress.org/plugins/easy-fancybox/faq/ under “How do I show content with different sizes?” …

You will have to do:
1. Go to Settings > Media and check the option “Include Metadata jQuery extension…”
2. Change class"fb-margin" that you added to the links to class"fancybox {titlePosition:outside,margin:60}"

Now you are free to change the default title position to anything other, the slider images will always use Outside and a margin of 60…

Hope that helps 🙂

[jonanwyl]

Ah excellent. Works! Thank you. In case this helps anyone else a small typo in the above – you need to set class="fancybox {titlePosition:'outside',margin:60}"

(Quotes around the outside are necessary)

Marvellous – opens up all sorts of flexibility 🙂

[Author]

Posts