Background: Power Reviews
Power Reviews is a small company trying to make a name for themselves in the product reviews marketplace.
They are relatively new to the scene and scheduled to come out of beta at the end of 2008.
My employer hooked up with them in Third Quarter 2008 while still in their beta period, and we met with some of their growing pains.
Growing pains are to be expected, especially for a small company.
Background: Lightbox
Lightbox is a javascript behaviors library built upon Prototype.js and Script.aculo.us which lets you embed anchor links in your page with a rel= value of “lightbox” or “lightbox[array_value]” and an href= value of an image. The script parses your page onload and dynamically writes in some divs and other containing elements to render the image in a quazi-modal, grayed-out box on top of your page, with next and previous links to let the user scroll through all the images in the array (if using the lightbox[] array notation).
It’s pretty slick, actually, and I used it on this site whenever there is a thumbnail image.
The Problem
Power Reviews renders content dynamically on the page using javascript to talk with the page’s DOM.
Lightbox renders content dynamically on the page using javascript to talk to the page’s DOM.
The two don’t play nicely together.
The Solution
In short, we abandoned Lokesh Dhakar’s Lightbox solution and went with Lytebox by Markus F. Hay. Markus’ version, as he puts it, “was to write a self-contained object that eliminated the dependency of prototype.js, effects.js, and scriptaculous.js. Since the original version of Lytebox (which released with iFrame support), major modifications have been made to improve performance as well as "Slideshow" support, "Themes" support, HTML content support (as opposed to just images) and many more configurable options that allow you to customize the look and feel of Lytebox.” Pretty loft goals, and he really nailed it.
But Lytebox still didn’t work for us, not out of the box anyway, again due to the two scripts (Lytebox and Power Reviews) trying to dynamically write to page via the DOM. Bryan did a bit of his magic jiggery:
- writing the dynamically generated divs and whatnot onto the page as static elements.
- modifying the javascript to NOT dynamically write these elements.
- modifying the javascript to hide the static divs (and whatnot).
Once those changes were made, now all the script has to do is update the already pre-existing divs (and whatnot) and apply the styles and behaviors.
Byran is writing up the details of his magic jiggery, so you’ll have to be patient regarding the specifics.
In the meantime, you can see our implementation here: http://www.buylifetime.com/Products/BLT/PID-6405.aspx
