Question

I have a lightbox that comes up with instructions in it. It has remote links that then flip through several pages of content, replacing elements in the lightbox remotely.

The problem I have is that when new content is rendered in the lightbox, it doesn’t reposition the lightbox. It DOES however, reposition the box if you attempt to resize the window.

Does anyone know how I can add a line of code to reposition the lightbox following a remote page change?

Background information: I render content in the lightbox as such:

 <%= render 'partial1' %>

The link that remotely changes this partial uses a “next_page” action in a controller. This action responds remotely, and thus a next_page.js.erb file is available (wherein maybe a solution could be added).

If there is other relevant background information I can provide, please let me know.

Answer 1

If the lightbox re-sizes itself when the browser is re-sized, try triggering a resize event on the window object (since the lightbox probably has an event listener for the resize event):

$(window).trigger('resize);

Add the above code to the end of the JavaScript that updates the contents of your lightbox.

There are also a couple options in the Fancybox API that may help:

1. $.fancybox.resize – You can cal this method and the lightbox will re-size itself based on the height of its current content.
2. autoDimensions – this is an option you can set to true when initializing the lightbox and Fancybox will automatically re-size itself to the dimensions of new content. As the documentation states:

“Make sure it has dimensions otherwise this will give unexpected
results”

Here’s where I found the API options: http://fancybox.net/api