The lightbox concept in webpages started around 2 years ago (as far as I can remember). It allows certain content to be focused in on a webpage, so that nothing else can be distraction. Its been used for photo galleries, ajax content, [new form] popup advertisement, etc. In my case, it needed to show Flash content for configurations of content providers (widgets).
Example screenshot (will be provided once I can get the image to upload)
The problem that was occurring was that the Redbox plugin (for Rails) could not provide the correct support for the Flash content. Redbox is still a nice plugin.
The following is a list of issues that were occuring, so that others may learn from my testing with Flash content in lightboxes:
- Redbox uses CSS transparency to creat the grayed out portion of the lightbox -- known as the background overlay. There were problems that occurred with it across the browsers with flash content. Mainly if the user tried to scroll the browser the Flash movie would disappear. The transparency problems were resolved by creating a alpha-PNG to be used for all browsers except IE6 that uses the CSS filter property.
- Some control was not provided by Redbox to handle the width and height of the lightbox. This was needed because the Redbox plugin sets the div that displays the lightbox to auto height and width, which is great for content such as images and text. Unfortunately, the width and height of the Flash movie do not get considered into this calculation (a DOM problem I assume) of the width and height of the div containing the lightbox. This would cause the lightbox display to be much smaller than it was supposed to be. The width and height need to be set manually.
- On the page where the lightbox was being displayed there are scroll bars that are part of a large select box. In some browsers, *cough* IE, like to overlay the scroll bars over all content, completely ignoring z-index. They need to be hidden while the lightbox is being displayed. It also needs to be taken into consideration that the scroll boxes within the lightbox are not removed.
- In Safari (and maybe some other browsers), content loaded from an Ajax request into lightbox needs to be removed from the lightbox even when the lightbox 'innerHTML' is set to empty string. This problem would occur if the same lightbox with Ajax request was performed again the content from the previous request would be there again. This is solved by removing the child HTML elements from the lightbox when the lightbox is no longer needed.
- Proper positioning of the lightbox to be centered with respect to the current browser windows scrolled at position, not with respect to just the top of the content. This one was pretty trivial to solve as it was a professional design choice for our content. I label it as an issue because it seems that lightbox should work with respect to the user's view and not force the user to scroll to where the lightbox appears in the browser window.
- In Mozilla browsers (FF2) on Mac, the Flash movie likes to disappear every once and awhile depending on the condition that there were two flash movies playing in the same window -- one in a lightbox and one in the background. The other condition is that the flash movie in the background had a flashvar 'wmode' set to 'opaque'. Set this 'wmode' to a different value and the problem no longer occurs.
Note: I would just like to point out that this code is kind of old. Its still in use at my current employer's website. It works well and has proven to be quite stable. At the time of its creation there were no nice Rails plugins with lightbox support except Redbox, which did not work well with the Flash content.