Lightbox image viewer 2.0

[ozzgod]

1) Script Title: Lightbox image viewer 2.0

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

3) Describe problem: My question is about using background images for the background instead of colors... I have my images displayed on a black background. I'm currently using it here: http://www.ozzgod.com/ozzfest06/main.html

I ran across this page, http://www.bravewords.com/news/58235 that is using what appears to be the same Lightbox script, although I couldn't see a Dynamic Drive copyright when I viewed the source. Click on the image in the news story... it's using a background image with the Lightbox effect. I'd like to try this, too. Can I do this with the DD script and, if so, how?

Thanks a lot in advance, guys...

Leighton

[jscheuer1]

Lightbox is one of the few, perhaps the only DD script that does not require any credit on the page that is using it. This is as per the developer's say so as related to me by ddadmin. This is also reflected on the demo page where no credit is shown in the demo code.

Anyways, the lightbox.css file is where you would probably want to go to use a background image. Experimentation may be required but, I'd try here:


#lightbox{
position: absolute;
top: 40px;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
background-image:url(path/image_name.gif);
}

[ozzgod]

thank you... thank you very much... I'll give it a try and let you know how it works...

good to know about the copyright... I was wondering why it didn't show...


Leighton

[ozzgod]

ok...

It didn't work where you had me place the background image, John. However, you did give me the courage to play around with it myself. I found that by placing a background image in two places in the lightbox.css file, the #outerImageContainer and the #imageDataContainer, I can get the effect I wanted... and that's really cool.

This is what I did inside the lightbox.css file:


#outerImageContainer{
position: relative;
background-color: #000;
width: 250px;
height: 250px;
margin: 0 auto;
background-image:url(path/image_name.gif);
}


#imageDataContainer{
font: 10px Verdana, Helvetica, sans-serif;
background-color: #000;
margin: 0 auto;
line-height: 1.4em;
background-image:url(path/image_name.gif);
}

I checked it in Internet Explorer 7.0, Firefox 1.8 and Opera 9.10 and works just fine in these browsers.

Thanks again for your help. Like I've said, you guys rock...

Leighton