Monday, October 22, 2007

issues with Flash content within lightbox

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:

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
I make no claims to knowing why some of these issues occurred either browser issues, users issues, etc. I just came up with the best solutions I could to solve the problem from not occurring again in the browsers.

With these issues, I took some time and built a Lightbox script that handles these conditions and supports Flash content plus any other content pretty well. I slapped it into a plugin a while back. I tried my best to make it backwards compatible with Redbox as much as possible, so we did not drastically need to change our code, so mostly its updated Javascript to handle the above conditions plus some extensions to the Helpers for width and height.

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.

4 comments:

superbnerb said...

howdy. i noticed you don't have a rake script update command, like redbox. Or have i missed that instruction somewhere?

i manually moved lightbox.js and lightbox.css to their respective public folders, and i get somewhere now.

part two to my question, is there a way to add a 'close' tag, similar to how redbox allows you to close an image. some guidance there would be fantastic.

good job. too bad you chose gpl however,no offence. MIT would have made this plugin nearly perfect.

jt archie said...

As I said, its an old plugin that hasn't changed much. If you would like me to add stuff to please let me know.

Per your request, the license has been changed. To be honest, I didn't even think about it when I first put it up. Do whatever you want to it. Mess around with it. Break it. All I ask if you do improve it let me know.

As for the close tag, I don't have any support for that. I just have the X at the top of the lightbox. I guess if you wanted to the support that it would be as simple as adding a link to close the lightbox and then adding the CSS to make it appear correctly.

I would need reference to what you want though. A screenshot perhaps.

Jaffer said...

Thanks for this list! Setting the wmode to opaque for my flash content fixed my problem!

Dr J said...

I've incorporated a few updates and tweaks to the files.

Wondering if you'd be willing to grant SVN access to the codebase or perhaps if I send you a patch file you could update the files on google code?