Nagging issue with Lightbox 2

**its_jon** · 04-01-2008, 08:24 PM

1) Script Title: Lightbox image viewer 2.03a

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...box2/index.htm

3) Describe problem: A specific problem I am having with this code and IE.

Works great in Firefox and Safari

Please see the code working on this page:-
http://myweb.tiscali.co.uk/design_jo...URGH/index.htm

When you maximize the image to the bottom left the screen alpha overlay does not fill the whole iframe when using IE. (see next top scroll bar)

Looks great in Firefox and Safari .....erm... Well it did look great in Safari however its not displaying the iframe at all at the moment due to another issue on another thread.

I think the problem is something to do with either tables or scroll bars....?!#?

Im very much a cut and paste novice.... Im running out of things to alter by trial and error at the moment...

Any Ideas as to why IE wont display correctly ?

many thanks
Jon

**ddadmin** · 04-02-2008, 12:38 AM

Inside the IFRAME page itself, try adding a valid doctype to the very top in the source:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

This may or may not help, but worth a try.

**jscheuer1** · 04-02-2008, 04:09 AM

Using the IE developer toolbar, I set the margin of the page in the iframe to 0. That took care of it. You have some errors on that page as well that should be avoided. The one that jumped out at me is:

Code:

<style type="text/css">
img {
border-width: 1px;
border-color: #cccccc;
border-style: solid;
}
<style type="text/css">



<style type="text/css">
h1 {font-size: 100%}
h2 {font-size: 110%}
p {font-size: 80%}
</style>

You cannot open another style block inside of an already opened style block.

So, avoiding something like that, make a new style block:

Code:

<style type="text/css">
body {
margin:0;
}
</style>

in the head of the page.

If you want the page to have a margin, you can use a container division:

Code:

<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#808080" VLINK="#808080" ALINK="#FF0000">
<div style="margin:11px;">

The rest of the stuff from inside the body can go here

</div>
</BODY>
</HTML>

**its_jon** · 04-02-2008, 07:54 AM

Thanks Very much !

Working now !

http://myweb.tiscali.co.uk/design_jo...URGH/index.htm

Although this site looks basic at the moment its been the most difficult for me as this time I have been trying my best to make it look simple

As more of a gfx person if something goes wrong with the code (If I cut some code leaving a bit behind - possibly partly what happened here) I struggle to find my way back if I initially miss the error.

So cheers !

I have another very very minor issue with the lightbox.....

I was wanting to make the background white and fully opaque.
I can not find a config for the level of transparency.

I have achieved it in IE by setting one of the numbers in the effects file from 100 to 200

HTML Code:

Element.setStyle(element, {opacity: value});
    if(/MSIE/.test(navigator.userAgent))  
     Element.setStyle(element, 
       { filter: Element.getStyle(element,'filter').replace(/alpha\([^\)]*\)/gi,'') +
                 'alpha(opacity='+value*100+')' });

from +value*100+

to

+value*200+

But.... this does not work for Firefox. Turning the background white is easy... in the css file... I thought itmay also be easy to set the background Opaque .

Lastly.... The option to set the caption as a hyperlink is very welcome. Is it also possible to use this hyperlink option to trigger the printing of the enlarged image ?
I used
<a href="JavaScript:window.print();">
at this point and the hyperlinked caption (I named print imaga) did trigger the print command however the whole page printed followed by the enlarged image....It would be great to print only the enlarge image.... I dont know if its possible... but I can envisage that im probably missing something simple here.

Many Regards
John
Scotland.

**jscheuer1** · 04-02-2008, 04:20 PM

To make the overlay opaque in FF (in lightbox.css):

Code:

#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #ccc;
	opacity:1.0!important;
	}

That will override the script initiated changes in opacity of the overlay for FF, Opera, Safari, perhaps others, not IE.

A page's appearance when printing can be controlled by a print stylesheet (there are other ways, but this is the best IMO). I already addressed this for lightbox elsewhere in the forum. See:

http://www.dynamicdrive.com/forums/s...28&postcount=3

And for something extra:

http://www.dynamicdrive.com/forums/s...94&postcount=3

**its_jon** · 04-02-2008, 05:42 PM

Working !... nearly

Thanks for the code... Im not sure I have used it correctly though.

The print button works excellent on the expanded lightbox image now....
The trouble now is that I also have a 'print page' option..... And its only printing the image when you click it.... not the full page...

?? .... either I used the code wrong or maybe I have to be more specific now with the print page code ?

Looking good though...plus full opacity in IE
http://myweb.tiscali.co.uk/design_jo...URGH/index.htm

Many thanks,
John

**its_jon** · 04-03-2008, 08:52 AM

I could not get it to work in the end... it was either a case of printing out an image or printing out the full page with the enlarged as well.

So I came up with a 3rd option..... which also needs some refinement so I have started a new thread about the Tabbed Document Viewers code which is now the main function itself.

Many thanks for all the help for the viewer !.... im really very very happy and im sure the people of Jedburgh will be happy with their site as it is a non profit organization putting the site together.

Thread: Nagging issue with Lightbox 2

Thread Tools

Search Thread

Nagging issue with Lightbox 2

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions