PDA

View Full Version : Flash, Lightbox 2 Show/Hide Fix, with JS Flash check

72dpi
05-25-2006, 03:05 AM
okkies

This is a code hack/nmod/addon for anyone using the awesome
Lightbox 2 Gallery method.

A few ppl have flash, problem is, even setting window to "Transparent", you are never guaranteed that the flash will sit below your new div layer, when using a drop down nav, Lightbox 2 gallery etc.

My simple test, adds another level of control.

Basically, we show/hide layers for this problem. I have added a function called :
turn_on() <-- Shows our Flash layer
turn_off <-- Hides Div layer

I have added this to tyhe core function of "lightbox.js" in the js folder.

Wanna see what i am raving aboput?

http://www.72dpi.net.au/testbed2/jpg_rotate_fx/
Click, reload, play.

Please note, this is a TEST, therefore needs extensive testing on ALL browsers.

I have also added for u:

Javascript to do a flash check, with an alternate image.

Wanna download all the goodies in one big hit?

http://www.72dpi.net.au/testbed2/jpg_rotate_fx/jpg_rotate_fx.zip (http://www.72dpi.net.au/testbed2/jpg_rotate_fx/jpg_rotate_fx.zip)

Download, Play, comment, make it better!

<-- EDit * Fixed URL
shanhard
05-25-2006, 03:31 AM
Fantastic work 72dpi&#33; Great addition&#33;
72dpi
05-25-2006, 03:41 AM
Cheers Matey.

Will be applying this code to ur site a bit later.
I will get it ready & send to u (hopefully tonight).

Will include all tricks & be commented.
Just gonna test it on a few more browsers (but should be fine).

=)
IGGY
05-25-2006, 07:38 AM
That is freekin sweet&#33;

I&#39;ll play with it more when I get my comp back up and running.
kernel
05-25-2006, 06:02 PM
<div class='quotetop'>QUOTE(72dpi &#064; May 25 2006, 02&#58;41 AM) 6189</div>
Cheers Matey.

Will be applying this code to ur site a bit later.
I will get it ready & send to u (hopefully tonight).

Will include all tricks & be commented.
Just gonna test it on a few more browsers (but should be fine).

=)
[/b]

The lightbox.js which is included in your archive does not help me to solve the problem when another flash on same site stays above the image. I mean the other flash does not hide (make dark) AND it stays over the opened image. Very annoying...
72dpi
05-25-2006, 11:19 PM
The method i am using, targets a "Specific" flash elemnt in a div.
The code is to show people how to hide a "Single" element.

This would bea easy to modify for multiple elements.
HeavyEddie
05-26-2006, 12:00 AM
Very impressive 72&#33;&#33;&#33;
kernel
05-26-2006, 04:48 PM
<div class='quotetop'>QUOTE(72dpi &#064; May 25 2006, 10&#58;19 PM) 6226</div>
The method i am using, targets a "Specific" flash elemnt in a div.
The code is to show people how to hide a "Single" element.

This would bea easy to modify for multiple elements.
[/b]

Well How can I hide the Weather plugin which is Flash based ? I cant understand much from the file I downloaded?&#33; :blink:
IGGY
07-25-2006, 10:48 PM
Hey 72dpi,

How can I get this hack to work with all flash elements? (If it&#39;s possible :))
72dpi
07-26-2006, 01:51 AM
hey Iggy,
I haven&#39;t tried, but there should be a way, I will look into this on lunch and get back to you....
72dpi
07-26-2006, 02:17 AM
Okkies, This MAY work.

Definately works in Firefox, IE ignores IT, but that&#39;s fine, cos IE has no problems.

Ok, You are gonna have to Change the javascript & CSS to:
&#60;script language=&#34;JavaScript1.2&#34; type=&#34;text/javascript&#34;&#62;
// Function to Show/Hide Our Flash div, for Uninterrupted Graphics
function turn_on&#40;&#41;
{
****for &#40;i=0;i&#60;document.getElementsByTagName&#40;&#34;div&#34;&#41;.length ; i++&#41; {
********if &#40;document.getElementsByTagName&#40;&#34;div&#34;&#41;.item&#40;i&#41;.clas sName == &#34;flashLayer&#34;&#41;{
************document.getElementsByTagName&#40;&#34;div&#34;&#41;.i tem&#40;i&#41;.style.visibility = &#34;visible&#34;;
********}
****}
}

function turn_off&#40;&#41;
{
****for &#40;i=0;i&#60;document.getElementsByTagName&#40;&#34;div&#34;&#41;.length ; i++&#41; {
********if &#40;document.getElementsByTagName&#40;&#34;div&#34;&#41;.item&#40;i&#41;.clas sName == &#34;flashLayer&#34;&#41;{
************document.getElementsByTagName&#40;&#34;div&#34;&#41;.i tem&#40;i&#41;.style.visibility = &#34;hidden&#34;;
********}
****}
}

&#60;/script&#62;
&#60;style type=&#34;text/css&#34;&#62;
&#60;&#33;--
.flashContainer {
padding&#58;0;
background&#58;#CDCCAE url&#40;jpg/1.jpg&#41; no-repeat right center;
color&#58;inherit;
border&#58;1px solid #550000;
width&#58;700px;
height&#58;200px;
}
.flashLayer {
padding&#58;0;
width&#58;700px;
height&#58;200px;
}
--&#62;
&#60;/style&#62;

Now, change:
&#60;div id=&#34;flashContainer&#34;&#62;&#60;div id=&#34;flashLayer&#34;&#62;
to:
&#60;div class=&#34;flashContainer&#34;&#62;&#60;div class=&#34;flashLayer&#34;&#62;

lemme know how you go =)
Am interested to see if this works in many browsers.
Please note, that If you have a div containing flash, set a static image in the background...
have fun =)

If this works fully, i will add it to my testbed page as a download...
IGGY
07-26-2006, 02:43 AM
It looks like it will work, but...

I&#39;m trying to plug this into the Lightbox plugin, and I don&#39;t have control over what flash elements will be on the users page. I can only insert code into the head, and modify the js files.

I&#39;m no expert at javascript but can you change (something similar to) this and have it work?

document.getElementsByTagName&#40;&#34;div&#34;&#41;

change to this:

document.getElementsByTagName&#40;&#34;object&#34;&#41;

and this:

document.getElementsByTagName&#40;&#34;div&#34;&#41;.item&#40;i&#41;.class Name == &#34;flashLayer&#34;

to this:

document.getElementsByTagName&#40;&#34;object&#34;&#41;.item&#40;i&#41;.ty peName == &#34;application/x-shockwave-flash&#34;
72dpi
07-26-2006, 02:47 AM
yeah, that should be allright.
I will get stuck into this on my lunch break then, in the meantime, lemme know how ya go....

(ANYTHING is possible =)
IGGY
07-26-2006, 03:20 AM
haha, I just tried that it killed all the images on the page.
72dpi
07-26-2006, 03:51 AM
This may DO it:

http://www.village-idiot.org/archives/2006...vascript-fixes/ (http://www.village-idiot.org/archives/2006/02/20/lightbox-javascript-fixes/)

<-- Edit, Disregard that, I already do thios... Dammit, tghere is a Fix out there, I Just Know it...

But Check this out:
http://jquery.com/demo/thickbox/

I think this will do it..

=)
IGGY
07-26-2006, 04:27 AM
Thanks for the link. I&#39;m going to update the lightbox plugin and make thinkbox an option on there as well.
abcohen
07-26-2006, 06:09 AM
you know both me and heavy posted a link to the project that came out after Lightbox and Thickbox... I beleive it was Greybox (I&#39;ll read my blog over and try to find it)
IGGY
07-26-2006, 06:14 AM
ABC&#33;

I was checking out your blog, that&#39;s where I got Litebox. I saw thickbox, but I didn&#39;t take a good look at it. I just read the page through and it looks like Thickbox is a blend of greybox, lightbox and few others. I&#39;m thinking some really cool mods could be done with this and the standard gallery. ^_^
abcohen
07-26-2006, 06:30 AM
ahhh it wasnt greybox....

it was ibox

http://www.subdreamer.org/forum/index.php?showtopic=1147&hl=

:) I knew I had it somewhere...
72dpi
07-26-2006, 06:37 AM
Bleh.
Ibox is ok, hell, it&#39;s better coding than I can do, but onece the JS is loaded, it is Cached. Ibox transitions are not smooth enough for me.

But cheers for the heads up Abcohen. I think the main purpose of this whole hack link was to make people aware of problems with using Lightbox, and how we can compensate.

Point is, use wmode="transparent" in your flash,
and use z-depth:0 for your flash layers,
this will help immensely.

The rest is up to the user. You are not going to be able to make it perfect on ALL browsers, but we can try..
SSSlippy
07-29-2006, 05:40 PM
Have you tried this in the IE 7.0. From what ive read/heard the 7.0 browser is suppose to bring IE more to the internet standards.
rjchaney
07-29-2006, 05:52 PM
<div class='quotetop'>QUOTE(72dpi &#064; Jul 25 2006, 08&#58;17 PM) 8362</div>
Okkies, This MAY work.

Definately works in Firefox, IE ignores IT, but that&#39;s fine, cos IE has no problems.

Ok, You are gonna have to Change the javascript & CSS to:
&#60;script language=&#34;JavaScript1.2&#34; type=&#34;text/javascript&#34;&#62;
// Function to Show/Hide Our Flash div, for Uninterrupted Graphics
function turn_on&#40;&#41;
{
****for &#40;i=0;i&#60;document.getElementsByTagName&#40;&#34;div&#34;&#41;.length ; i++&#41; {
********if &#40;document.getElementsByTagName&#40;&#34;div&#34;&#41;.item&#40;i&#41;.clas sName == &#34;flashLayer&#34;&#41;{
************document.getElementsByTagName&#40;&#34;div&#34;&#41;.i tem&#40;i&#41;.style.visibility = &#34;visible&#34;;
********}
****}
}

function turn_off&#40;&#41;
{
****for &#40;i=0;i&#60;document.getElementsByTagName&#40;&#34;div&#34;&#41;.length ; i++&#41; {
********if &#40;document.getElementsByTagName&#40;&#34;div&#34;&#41;.item&#40;i&#41;.clas sName == &#34;flashLayer&#34;&#41;{
************document.getElementsByTagName&#40;&#34;div&#34;&#41;.i tem&#40;i&#41;.style.visibility = &#34;hidden&#34;;
********}
****}
}

&#60;/script&#62;
&#60;style type=&#34;text/css&#34;&#62;
&#60;&#33;--
.flashContainer {
padding&#58;0;
background&#58;#CDCCAE url&#40;jpg/1.jpg&#41; no-repeat right center;
color&#58;inherit;
border&#58;1px solid #550000;
width&#58;700px;
height&#58;200px;
}
.flashLayer {
padding&#58;0;
width&#58;700px;
height&#58;200px;
}
--&#62;
&#60;/style&#62;

Now, change:
&#60;div id=&#34;flashContainer&#34;&#62;&#60;div id=&#34;flashLayer&#34;&#62;
to:
&#60;div class=&#34;flashContainer&#34;&#62;&#60;div class=&#34;flashLayer&#34;&#62;

lemme know how you go =)
Am interested to see if this works in many browsers.
Please note, that If you have a div containing flash, set a static image in the background...
have fun =)

If this works fully, i will add it to my testbed page as a download...
[/b]
Have these changes been added to the downloadable file?
72dpi
07-30-2006, 03:24 AM
Nope Rj,

I havent changed it until I know everyuthing works. But it is simple for you to ammend changes to. Cheers..