I am having trouble getting this to work by following the example you have documented. I notice that the earth image you use in this example is 1400 x 1400 pixels resized to 527 x 527 however I cannot see how this has happened.

I have put an image on my site but when I click on it the image opens at its full size in the browser window (which is far too large), not as your example above.

I have just copied your code and replaced the images with my own. But changing the "maxContentHeight:640" doesn't do anything.

Can you please help?

It is indeed maxContentHeight that is controlling the maximum size the floatbox can open to in that example. This option was introduced in version 5.0.0. If it is being ignored in your case, perhaps you are using an older version.

Thanks for your reply - I am using Floatbox 5.7.2 - any other ideas?

I can't guess, and probably should not have tried in my first response. Can you please link me into a page that shows the problem and I'll take a look and sort it out.

http://www.yorkshireconservatoryroofinsulation.co.uk/tiled-roof-system

Look down the right hand side to Gallery and click on the image?

Thanks for your help.

Floatbox is not even being used on that image or gallery. There is no 'floatbox' class assigned to the link and no floatbox options (such as maxContentHeight) are set anywhere. It is just a plain link that navigates the current browser tab to the raw image.

I am not sure why you are saying this as this is the code that I have just copied from the page:

<td class="floatbox" data-fb-options="group:globe controlsPos:tr centerNav:true navType:button maxContentHeight:200 enableWrap:false caption2Pos:br showItemNumber:false caption:href caption2:`&lt;a href='//visibleearth.nasa.gov/'&gt;visibleearth.nasa.gov&lt;/a&gt;`">
Gallery<br />
<a href="images/guardian/Guardian1.JPG"><img src="images/guardian/Guardian1.JPG" height="140" width="140" /></a>
<a href="images/guardian/Guardian2.JPG"></a>
</td>

Oh, I see what's going on. You have the link inside a <td> element and the floatbox markup on the td element, not on the link. There are no <table> or <tr> elements around that <td> element. You can't have a free-floating table element outside of a table. The browser just discards it and removes it from the rendered markup, leaving only the unadorned <a> element.

Discard the orphan <td> element and put the floatbox markup directly on the currently bare <a> element.

I'm sorry you've pretty much lost me here - I tried the following without the td stuff around it:

class="floatbox" data-fb-options="group:globe controlsPos:tr centerNav:true navType:button maxContentHeight:200 enableWrap:false caption2Pos:br showItemNumber:false caption:href caption2:`&lt;a href='//visibleearth.nasa.gov/'&gt;visibleearth.nasa.gov&lt;/a&gt;`">
Gallery<br />
<a href="images/guardian/Guardian1.JPG"><img src="images/guardian/Guardian1.JPG" height="140" width="140" /></a>
<a href="images/guardian/Guardian2.JPG"></a>

But this hasn't worked - is it possible for you to amend this code and send it back?

I'm very reluctant to get into authoring people's main page html for them.

I'm not sure how else to say it. Remove the <td> element. Assign the floatbox class and options to the <a> element link that you want to open the floatbox from.

Perhaps review the early sections of the instructions for information on configuring links. Keep it simple.

OK I got there thanks for your help.