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.

6 comments:

ulewin said...

Really helpful, have been looking into that same problem.

With rails we used the following block in the controller:
render :update do |page|
page.call "lightwindowInit();",""
end

steven@levenswonder.be said...

Hi TechSavvy,

this seemed like the page i was looking for, but now i a figuring: how do i initiate the lighwindow after the ajax call? I treid to put lightwindowInit(); in my javascript, but it doesn't work...

I would be very grateful if you could show me how...

Steven

sumanth krishna said...

sure no worries, please let me know the how you want to trigger this js function? I can help you better.

Thanks

steven@levenswonder.be said...

Hi TechSavvy,

thank you for the quick answer. I got it working now. have one other problem though: the dark background stops in the middle of the page when ajax content is larger than original... do you know any way to fix this?


Steven

Chilmans said...

This is a nice solution, but when I initialize lightwindow, it reloads the galleries.
Meaning: When I open a picture (with liightbox) and click galleries, I have every gallery a few times.
Is there a way to delete the already loaded galleries or even disable the whole galleries button?

Chilmans said...

I made it work:
1. Open lightwindow.css
2. Go to:
a#lightwindow_galleries_tab, a:link#lightwindow_galleries_tab,
a:visited#lightwindow_galleries_tab {
3. Set display to "none" instead of "block"

It won't display the galleries tab at all.
Still, if you have a workaround to delete the galleries on using lightwindowInit(), I'd like to hear it.