Help required with Lightbox image viewer 2.0

**monique** · 03-12-2007, 01:27 AM

1) Script Title: Lightbox image viewer 2.0

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

3) Describe problem:

See my website: http://www.arti-mo.com/shamajo/droomwenspim.htm

In the center of the text/contents I have used the a.m. script for several pictures (see foto´s) of the event to be opened in a new window. The idea is that the screen is being filtered and the new windows is being put on top of that. For reasons I don't understand the "filter screen" is on top of the page as where the new window with the enlarged picture is in the right place. This means that you won't see the base screen filtered; you only see it when you scroll up.

Does anyone know the solution?

By the way: it works fine in FF, NS and OP.

Although in NS you can see a dotted border of the area for next picture (Volgende >) and previous picture (< Vorige).
And in OP I see a strange "null" in the Image Data Container.
Is there a solution for these 'problems'?

Thanks a lot,
Monique

**jscheuer1** · 03-12-2007, 03:57 AM

With body styles like these:

Code:

body {
	position:absolute;
	width:900px;
	margin-left:-450px;
	left:50%;
	background-color:#ffce00;
	font-family:trebuchet,arial,helvetica,serif;
	font-size:12px;
	color:#25177a;
	scrollbar-face-color:#ffce00;
	scrollbar-highlight-color:#ffce00;
	scrollbar-3dlight-color:#910d84;
	scrollbar-darkshadow-color:#910d84;
	scrollbar-shadow-color:#910d84;
	scrollbar-arrow-color:#910d84;
	scrollbar-track-color:#ffce00;
}

It is a wonder lightbox works very well in any browser. These types of styles should be (if used at all) be applied to a container element, ex:

HTML Code:

<body>
<div id="container">
The rest of your page here
</div>
</body>

In NS (and sometimes in other browsers) dotted borders are to show the active link or other element on the page. They are a feature for mouseless navigation and so should usually just be tolerated. Folks who use one of these browsers for their primary are used to seeing them so, they don't really detract from the experience for most of them. They can be removed in most cases by setting the style of the link in question to:

Code:

outline-style:none;

But, as I say, this is generally not a great idea. I don't thnk it should be done on your page.

The null description in Opera is a bit of a bug. If you give your links title attributes, these will be shown in that space in all browsers or, I think you can give the links a one space title attribute:

Code:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

or:

Code:

<a href="images/image-1.jpg" rel="lightbox" title=" ">image #1</a>

The one space title will pop up a blank tool tip on hover in other browsers but, this can be avoided by giving the contained image a title or an empty title:

Code:


	Code:
	<a href="images/image-1.jpg" rel="lightbox" title=" "><img src="some.jpg" alt="" title=""></a>

**monique** · 03-12-2007, 01:44 PM

Well John, I have put the 4 lines of the body styles now in a container called "bg" but it still doesn't work...

I tried several other "things" but none of them work

The other two issues I am not that worried about, but this is really a problem.

Is there another solution?

Monique

**jscheuer1** · 03-12-2007, 03:40 PM

That change at least got the overlay rendering the entire width of the page on larger screens. I'm not sure if you were aware that was a problem.

Your layout is still too full of styles that are confusing IE as to the true height of the page. These are probably the use of absolute positioning elsewhere in the styles, or floats, but could be other things as well. To track them all down, and change them and still have the page render as desired would be quite an effort although it could be done. Even so, there might still be a problem. So, instead, I've devised a bit of IE only javascript script and style that will take care of the problem (from your page's source code, addition red):

Code:

<link rel="alternate stylesheet" type="text/css" href="css/ie_printgroot.css" media="print" title="bigger" />
<![endif]-->

<script type="text/javascript" src="js/styleswitcher.js"></script> 

<!-- het script voor de slideshow -->
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<!--[if IE]>
<script type="text/javascript">
if(window.attachEvent){
function lb_ie_ov_fix(){
var truebod=document.compatMode && document.compatMode!="BackCompat"? document.documentElement : document.body;
if(typeof overlay!=='undefined')overlay.style.top=truebod.scrollTop-50+'px'
}
window.attachEvent('onscroll', lb_ie_ov_fix);
document.attachEvent('onmousedown', lb_ie_ov_fix);
document.attachEvent('onkeydown', lb_ie_ov_fix);
}
</script>
<style type="text/css">
#overlay {
padding:50px 0;
}
</style>
<![endif]-->
</head>

<body>
<div id="bg"> 
  <div id="voorwaard . . .

**monique** · 03-12-2007, 03:58 PM

IT WORKS!!! You're really AMAZING!!!

Wonderfull. If you would be around, we'd have a drink together...

You've helped me and many handicapped people I am making this website for. Really GREAT!

I still have a lot to learn...

Many many thanks,
Monique

**jscheuer1** · 03-12-2007, 04:02 PM

Since I had a mock up of your page, I decided to try the Opera fix I suggested and it works. Here is an example of a lightbox link with the added attributes:

Code:

<a href="afbeeldingen/wenspim/foto001.jpg" rel="lightbox[pim]" title=" "><img alt="" title="" src="afbeeldingen/wenspim/foto001k.jpg" class="solid" alt="wens Pim foto 1" /></a>

**monique** · 03-12-2007, 05:04 PM

You were allright again!

Thanks very much - also on behalf of the Wish Foundation Shamajo!

Monique

Thread: Help required with Lightbox image viewer 2.0

Thread Tools

Search Thread

Help required with Lightbox image viewer 2.0

Bookmarks

Bookmarks

Posting Permissions