Monday, July 6

Making Light window & Ajax Pagination to work simultaneously on a single module

Here is one more simple tip to make both Ajax Pagination & Light Window work together.

It's not that great solution but a simple thought which would not strike when you are struck. Before moving ahead with problem and solution, few words on light window & Ajax pagination.
Light Window: A javascript library that relies on porotype & scriptaculous for it's effective visuals.
Ajax Pagination: A simple pagination in ajax way, doesn't need to reload the page.

In one of our enhancing projects, the lightwindow was implemented to maximize or enlarge the thumbnail photo. And then on, simple pagination to update the images/thumbnail in the album one by one. Both are working fine, but as and when we navigate to second page and all further inside pages the enlarge link doesn't seem to work as expected. Instead maximizing the image in pop-up it redirected and opened the image in browser window.

Though the parameters, function calls and all other required setup is same still this did not work.

No surprise!!

Digging little deep into the way how Light Window works, an object is instantiated at the time of page loading.

function lightwindowInit() {

myLightWindow = new lightwindow();

}


And all the pop-up's would be simple effects that will be derived. Here is the catche, since we are doing ajax pagination which does not do any page reload so also the lightwindow function is not called second time.

Quick fix: To initate the object.

Be it in rails or in any other frameworks to use the combination effects we need to make sure the function is triggered.

Bonus:
same goes with other 'box' approaches (lightbox, modalbox, redbox...). For lightbox it's initLightbox(), just dig in to find out the function in respective javascript libraries and then enjoy both pop-up and ajax pagination effects.