Hi there,

I hope you can help me. I have a page where the user can chose to view different images by clicking on a 'previous' or 'next' button which will cycle through each image; this is an existing bit of functionality that doesn't use fB at all and is controlled via JavaScript when either button is clicked.

Now what I am looking to add in is an option that when a different link is clicked a larger version of the image can be viewed in a floatBox window. I have got this working to a point in that when you enter the page and click on the link before clicking either of the previous or next buttons the larger image appears.

However, if for example I arrive on the page looking at 01.jpg and then click the 'next' button to view 02.jpg then the call to the floatBox window will still show me the first image 01.jpg and not 02.jpg.

I have tried adjusting my own javascript to change the href value of this line <a id="floatBoxZoom" data-fb-options="caption:href;caption2Pos:br;enableWrap:false;maxContentHeight:800;V7:floatbox;"> but it doesn't seem to work. So I am assuming that there is something else that I would need to change if it is possible?

Is this something that I am able to do please.

Thanks
Gav

When you dynamically add, remove or modify links that are marked for floatbox behaviour, you need to run fb.activate() to have Floatbox pick up those changes.

It sounds like you want to show only one image in the floatbox, and not present a navigable gallery set of multiple images. If this is the case, the easiest way to handle your dynamic content would be to place an onclick action of onclick="fb.start(this); return false;" on each of those changing image links, and remove the floatbox class from them altogether.

Alternatively, run fb.activate() after modifying the page.

This is thoroughly discussed in the instructions at http://floatboxjs.com/instructions#dynamic