I am not sure where to post this query!

http://www.bitsmail.co.uk/Treherne/home.html

A while ago I posted a query up looking for some great gallery code & settled (thanks ladynRed) on lightbox code by Lokesh Dhakar.

You click an image and some javascript overlays a dark fade over the page picking a larger graphic and placing it over your page center screen with a message - click to close (later version also has a scroll)

My problem is that I use some flash graphics (flash bar on three pages) and for some reason this conflicts with the gallery code.

Is this something I can fix using z index (tried & failed but may not have got it right) or is it a javascript thing ???

I have emailed Lokesh but thought I would add a post anyway !!

Regards

If you want the css code here it is

#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxDetails{
font-size: 0.8em;
padding-top: 0.4em;
}
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#closeButton{ top: 5px; right: 5px; }

#lightbox img{ border: none; clear: both;}
#overlay img{ border: none; }

#overlay{ background-image: url(overlay.png); }

* html #overlay{
background-color: #333;
back\ground-color: transparent;
background-image: url(overlay.png);
background-image:url(blank.gif);
filter: progidXImageTransform.Microsoft.AlphaImageLoader (src="overlay.png", sizingMethod="scale");
}

Should this have gone in the javascript forum ???

Here is the javascrip that defines the elements

var objBody = document.getElementsByTagName("body").item(0);

// create overlay div and hardcode some functional styles (aesthetic styles are in CSS file)
var objOverlay = document.createElement("div");
objOverlay.setAttribute('id','overlay');
objOverlay.onclick = function () {hideLightbox(); return false;}
objOverlay.style.display = 'none';
objOverlay.style.position = 'absolute';
objOverlay.style.top = '0';
objOverlay.style.left = '0';
objOverlay.style.zIndex = '90';
objOverlay.style.width = '100%';
objBody.insertBefore(objOverlay, objBody.firstChild);

var arrayPageSize = getPageSize();
var arrayPageScroll = getPageScroll();

// preload and create loader image
var imgPreloader = new Image();

// if loader image found, create link to hide lightbox and create loadingimage
imgPreloader.onload=function(){

var objLoadingImageLink = document.createElement("a");
objLoadingImageLink.setAttribute('href','#');
objLoadingImageLink.onclick = function () {hideLightbox(); return false;}
objOverlay.appendChild(objLoadingImageLink);

var objLoadingImage = document.createElement("img");
objLoadingImage.src = loadingImage;
objLoadingImage.setAttribute('id','loadingImage');
objLoadingImage.style.position = 'absolute';
objLoadingImage.style.zIndex = '150';
objLoadingImageLink.appendChild(objLoadingImage);

imgPreloader.onload=function(){}; // clear onLoad, as IE will flip out w/animated gifs

return false;
}

imgPreloader.src = loadingImage;

// create lightbox div, same note about styles as above
var objLightbox = document.createElement("div");
objLightbox.setAttribute('id','lightbox');
objLightbox.style.display = 'none';
objLightbox.style.position = 'absolute';
objLightbox.style.zIndex = '100';
objBody.insertBefore(objLightbox, objOverlay.nextSibling);

// create link
var objLink = document.createElement("a");
objLink.setAttribute('href','#');
objLink.setAttribute('title','Click image to close');
objLink.setAttribute('alt','Click image to close');
objLink.onclick = function () {hideLightbox(); return false;}
objLightbox.appendChild(objLink);

// preload and create close button image
var imgPreloadCloseButton = new Image();

// if close button image found,
imgPreloadCloseButton.onload=function(){

var objCloseButton = document.createElement("img");
objCloseButton.src = closeButton;
objCloseButton.setAttribute('id','closeButton');
objCloseButton.style.position = 'absolute';
objCloseButton.style.zIndex = '200';
objLink.appendChild(objCloseButton);

return false;
}

imgPreloadCloseButton.src = closeButton;

// create image
var objImage = document.createElement("img");
objImage.setAttribute('id','lightboxImage');
objLink.appendChild(objImage);

// create details div, a container for the caption and keyboard message
var objLightboxDetails = document.createElement("div");
objLightboxDetails.setAttribute('id','lightboxDeta ils');
objLightbox.appendChild(objLightboxDetails);

// create caption
var objCaption = document.createElement("div");
objCaption.setAttribute('id','lightboxCaption');
objCaption.style.display = 'none';
objLightboxDetails.appendChild(objCaption);

// create keyboard message
var objKeyboardMsg = document.createElement("div");
objKeyboardMsg.setAttribute('id','keyboardMsg');
objKeyboardMsg.innerHTML = '<a href="#" onclick="hideLightbox(); return false;"><kbd>Click image to close</kbd></a>';
objLightboxDetails.appendChild(objKeyboardMsg);


}

As far as I can see z-index has been set from 90 to 200 on various elements of the gallery so I figured if I set the flash graphic to Z index 5 it would work but it doesnt !!! WHY ????

I would definately ask in the javascript forumn how to make that flash image go away and replace it with a static image, when the gallery is accessed. My first guess is that the flash applet is hopelessly on top. It would be nice, stylistically to have the flash revert to a still image when the gallery pops open anyway.

I'm not surprised this doesn't work, not even with Z-index.
You might try hiding the flash when you fire up the lightbox, display:none on a div with the flash in it might work.

I had this problem 2 days ago ... I just used a transparent parameter for my flash ... it worked like a charm

there is nothing wrong with the lightbox script ...

Hope this helps

ok Morp4 - How do I implement that please - can you give me an example of where I put that in script

LadynRed - same please - where would i place div ? around flash - how do I ensure its visible when page in normal but set to none when gallery implemented - do I put it in the gallery CSS code ???

If you have the source for the Flash, you can set the Window Mode to Transparent when you Publish to SWF. If not, you can add the window=transparent to the parameters on the flash object code.

Yes, put a div around the flash content. I'd try the transparent setting first, it may work and the div and display:none won't be necessary. If that doesn't work, I think you'd have to change the visibility in the Javascript - and I'm not good enough at JS to tell you how to do that, I've just seen it suggested for similar problems with flash.

Ok I tried this

<div class="flashdisplay"><object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="790" height="100" title="Treherne House Quality Accommodation" window="transparent">
<param name="movie" value="Images/Flash/Treherne-house-flash.swf" />
<param name="quality" value="high" />
<embed src="Images/Flash/Treherne-house-flash.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="790" height="100" window="transparent"></embed>
</object></div>

no joy

the display:none made everything disappear so I must have to set that class to only activate when lightbox is active -

think ultimately its a javascript thing - but had no reply from developer so stuck !

Its fixed

LadynRed you were absolutely right the code however was just off -

This is what you need to do

"The background of a Flash movie can be set to transparent. This allows the background color or image of the HTML page that contains the Flash movie to show through and allows the layering of Flash content with DHTML content. "

You can do this in flash or edit the HTMl directly which is what I did by adding these two pieces of code

1 - add the following parameter to the OBJECT tag:

<param name="wmode" value="transparent">

2 - Add the following parameter to the EMBED tag:

wmode="transparent"

It works great !!!

The troubleshooting section of the Lightbox site for this Flash issue points users to a comment which points users to this forum thread. Basically, it looks the solution is actually just HTML-based. It appears the window mode attribute might be wmode, not window.

<param name="wmode" value="transparent" />
<embed src="Images/Flash/Treherne-house-flash.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="790" height="100" wmode="transparent"></embed>

Hope that works.

Edit: Oops, guess you already found the solution while I was posting this!

Hi there - the only problem is this does not work in ie !!!

Works fine in firefox just not ie !!

any one offer a suggestion ??

Ok I discovered to ensure it works in IE you need to add a third step

3 - add this additional param

<param name="wmode" value="transparent" />

This now works in IE & firefox / opera etc !! yahoo !! (thanks frost for that last comment!)

Thanks to all

Sorry for the goof on the wmode.. it's been a while since I've had to do it.. lol. At least you got it working

hey no problem - you are a complete star anyway - helped me out of many wee messes & at least pointed me in the right direction. I mis-understood the directions previously but it now works in all browsers & once the footer is sorted will be probably my favorite piece of work to date ! The customer loves it which is the main thing & I am really happy to present it as an example of my work . Thanks

p.s my baby was 2 on friday - time flies !!!