LiteBox Activation When Page Loads

[morestar]

So I'm trying to make a registration form for a client who wants the form to open up in a litebox - for those who don't know what the litebox is, it's usually used in image galleries - when a user clicks on one of the images, it pops up with 'next' and 'previous' buttons and allows you to browse through all the pictures in the gallery...

the site that let's you download the script and see an example is here:
Lightbox 2

BUT! I have seen a few sites that use that functionality for other purposes - namely the one I am trying to achieve today - where when a user gets to a page, the page blackens out (dims to black), you can still see the page but a litebox opens with content in it.

I think I can figure out how to get the content rather than an image to display in the litebox but I need it to activate when the page loads...if anyone knows of this hack let me know.

Thanks everyone...

[morestar]

I think I may have just found the solution at: ThickBox 3.1

I shall return and let you know...

[morestar]

OK ThickBox isn't working as I planned and hoped...still searching...

[epep]

Looks like they no longer support ThickBox, did you check out the list of alternatives at the top of the page?

http://colorpowered.com/colorbox/
http://jqueryui.com/demos/dialog/
http://fancybox.net/
http://swip.codylindley.com/DOMWindowDemo.html
http://www.shadowbox-js.com/index.html

[morestar]

So now I narrowed down my search and found ShadowBox which seems to be the same type of script as LiteBox but allows you to display content within the LiteBox (ShadowBox) and load the content when the page loads...

My client wants the submission form to load in the ShadowBox when the page loads...a serious 'Call to Action'...

So now, I was able to nicely implement this script but my last problem is as follows, maybe someone can help me:

The page that has the ShadowBox (a form of LiteBox) script installed on it, works fine but it has a flash header. When the page loads and the ShadowBox script executes, everything is nice and beautiful but the Flash header disappears until the ShadowBox is closed...

I'm searching and searching to no avail...

I need the flash to continue displaying behind the ShadowBox, but obviously in the same way the other HTML elements are displaying...

[morestar]

Thank you epep...

[epep]

It may be a question best asked in the ShadowBox Forum (Shadowbox.js Media Viewer Forum). But you may be able to play around with the z-index of the flash object to get it to display properly, just a stab in the dark though.

[morestar]

ya I'm at the forum but z-index might be an option, my only concern is that it will display over the 'fade-into-black'...

there was a fix that was posted at the forum there but on my end it didn't fade out the flash - only the rest of the content was...

It mentioned taking out this line in the shadowbox.js file:

el.style.visibility = 'hidden';

I'm still trying...thanks for your help epep...

[marc_in_london]

if you go to willmaster . com you'll find what you need if you search for

Content Box (Lightbox) Overlay On Shaded Web Page

[morestar]

Thanks, I'll check that out, I don't know if it works for ShadowBox but I might be able to snag a snippet and throw it into the .js file I'm working with now...

[DaveSawers]

Another option you might want to consider is to use this: dhtmlxWindows – Feature rich, skinnable dialog windows for web applications

This allows you to place dialog windows over the main browser window, greying out the browser window behind (if the window is set modal). The dialog box can contain any HTML so can easily accommodate your login form, etc.

It handles all major browsers, is skinnable and it's free to use.

[morestar]

Well thank you Dave, I had a look at the link and it's not what my client wants but I'm bookmarking that link for future use...thanks again man...

I think I may have found the flash fix...I'm not sure why the fix isn't so easy to find. There are so many forums and blog comments asking for help with the flash issue and ShadowBox...you'd think by now someone would have the real fix for it...

Tomorrow is another day...

[morestar]

ok that was brutal...but I got it to finally work.

For ShadowBox, there is a javascript file named shadowbox.js.

In there, on line 1986, there is a line of code that reads:

el.style.visibility = 'hidden';

I changed it to the following

el.style.visibility = 'visible';

That allowed any flash objects on the page to still display when the ShadowBox overlay is activated...But at this point the flash objects wouldn't display behind the ShadowBox overlay but instead right on top and over it.

So I added...

wmode="transparent"

...to the flash embed code AND placed the embed code in a div with a z-index:0 attribute.

In the end that finally worked!

The end result is haltonautolease.com/test.htm


I feel sorry for the people who are trying to find a fix for this flash disappearing issue with ShadowBox or Litebox because there are tons of questions and very few answers - I had to look at many answers and put together my own.



Thank you everyone for your help !



P.S. I do very little SEO for this site just in case you're wondering...although the little I did do (on-page, a few classifieds links) is working pretty good for them...locally...