View Full Version : Problem with LightBox

09-14-2007, 08:16 PM
Hello everyone,
Recently i tried to use the LightBox image viewer for my portfolio on a website i am making. The thing was that my pictures were in an iframe and so the lightbox would only stretch to those limits and not over the whole page. I took care of that problem by using a similar script based on this one called LyteBox. However, in both scripts, whether I use an iframe or not, my navigation buttons appear on top of the LightBox image viewer. This is sort of an issue for me and I have no clue how to deal with it. Here is my website http://mihmedia.freehostia.com/ . Click on the orange portfolio button, and then on the image that comes up, and hopefully you'll see the problem I am talking about. Any help and/or suggestions would be much appreciated. Thanks in advance! :D

Mr Moo
09-15-2007, 04:41 AM
You have a z-index on your nav buttons (z-index: 10). If you put a higher z-index on the various divs that make up the lightbox it will appear above the buttons. (Or remove the z-index from the nav buttons, I'm not sure why it's there, but I guess you have a reason for it?).

09-15-2007, 05:07 AM
Warning: Please include a link to the DD script in question in your post. See this thread (http://www.dynamicdrive.com/forums/showthread.php?t=6) for the proper posting format when asking a question.

09-15-2007, 04:22 PM
Hello. Sorry for posting in the wrong section, and sorry about not providing that link, here it is http://www.dolem.com/lytebox/ . Anyways, in regards to the reply, how would i edit the z-index in my html code? I'm gonna do some research into it and mess around a bit and hopefully that will help. Thanks everyone. :o

09-16-2007, 05:46 PM
You've got worse problems than z-index stacking. Since you are using a (presumably Java) applet for your rollover effects, they will be unavailable in browsers not supporting Java. And, they must each be clicked to activate in IE and in Opera, making them very unintuitive. If they were flash, you could use the wmode param to make them appear behind the lytebox overlay and images, but with Java, I'm not sure if this will work. They would have to have their applet code scripted using javascript to avoid the 'click to activate' bit, so why not use javascript rollovers to begin with:


<title>Make it Happen Media</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script type="text/javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />
<style type="text/css">
#cell_menu img {
<script type="text/javascript">
//Place all onmouseover images in the below array:
var roll_images=[
///////////// Stop Editing /////////////
var p=[];
for (var i = 0; i < roll_images.length; i++){
p[i]=new Image();

<div align="center">
<table border="0" width="662" id="table1" cellspacing="0" cellpadding="0">

<td style="border-right: 1px solid #D2D2D2; border-bottom: 1px solid #D2D2D2" width="140">
<p align="right" style="margin-right: 2px"><b>
<font face="Arial" color="#00AEEF" style="font-size: 28pt">Make</font><font face="Arial" color="#00A650" style="font-size: 28pt">It<br>
</font><font face="Arial" color="#F58437" style="font-size: 28pt">Happen<br>
</font><font face="Arial" color="#004A80" style="font-size: 28pt">
Des</font><font face="Arial" color="#ED125A" style="font-size: 28pt">ign </font></b></td>
<td id="cell_menu" height="133" style="border-bottom: 1px solid #D2D2D2">
<a href="http://www.mihdesign.us.pn">
<img src="images/homebutton1.png" onmouseout="this.src=this.onmouseover.or;" onmouseover="if(!this.onmouseover.or){this.onmouseover.or=this.src};this.src='images/homebutton2.png';"></a>

<a href="/services.htm" target="I1">
<img src="images/servicesbutton1.png" onmouseout="this.src=this.onmouseover.or;" onmouseover="if(!this.onmouseover.or){this.onmouseover.or=this.src};this.src='images/servicesbutton2.png';"></a>

<a href="http://mihmedia.freehostia.com/portfolio.htm" target="I1">
<img src="images/portfoliobutton1.png" onmouseout="this.src=this.onmouseover.or;" onmouseover="if(!this.onmouseover.or){this.onmouseover.or=this.src};this.src='images/portfoliobutton2.png';"></a>

<a href="/order.htm" target="I1">
<img src="images/orderbutton1.png" onmouseout="this.src=this.onmouseover.or;" onmouseover="if(!this.onmouseover.or){this.onmouseover.or=this.src};this.src='images/orderbutton2.png';"></a>

<a href="/contact.htm" target="I1">
<img src="images/contactbutton1.png" onmouseout="this.src=this.onmouseover.or;" onmouseover="if(!this.onmouseover.or){this.onmouseover.or=this.src};this.src='images/contactbutton2.png';"></a>

<div align="center">
<div align="center">
<table border="0" width="662" cellspacing="0" cellpadding="0" id="table3" height="603">
<td style="border-bottom: 1px solid #D2D2D2" valign="top">

<iframe name="I1" width="450" height="592" src="/news.php" marginwidth="1" marginheight="0" scrolling="no" border="0" frameborder="0">
Your browser does not support inline frames or is currently configured not to display inline frames.
<td width="200" style="border-left: 1px solid #D2D2D2; border-bottom: 1px solid #D2D2D2" valign="top">
<p align="center" style="margin-left: 6px; margin-top: 6px">
<b><font face="Arial" color="#004A80">Current </font>
<font face="Arial" color="#ED125A">Projects:</font></b></td>

<div align="center">
<table border="0" cellspacing="0" cellpadding="0" id="table4" width="661" height="29">
<td style="border-bottom: 1px solid #D2D2D2">
<p align="center"><b><font color="#004A80">|</font></b><font face="Verdana" size="1" color="#00AEEF"><b>
2007-2008 </b></font><b>
<font face="Verdana" size="1" color="#ED125A">Make It
Happen Design</font><font color="#004A80"> | </font>

<font face="Verdana" size="1" color="#00A650">
<a style="text-decoration: none" href="http://mihmedia.freehostia.com/news/">
<font color="#00A650">News Login</font></a> </font>
<font color="#004A80">| </font>
<font face="Verdana" size="1" color="#F58437">
<a style="text-decoration: none" target="I1" href="/contact.htm">
<font color="#F58437">Contact</font></a> </font>

<font color="#004A80">|</font></b></td>



09-16-2007, 07:35 PM
Well im not really familiar with html and i used Frontpage to make the hoverbuttons. Second, Firefox for life, lol. Third, i think im just gona not use the lytebox. Thanks all for trying to help, but i don't think theres a solution.

09-16-2007, 07:42 PM
Oh My Goshhhh!!!! Thank You So Much I Just Used The Code You Provided And Everything Works Perfectly!!!! Will You Marry Me?!?!!? :d

09-17-2007, 03:05 AM
Oh My Goshhhh!!!! Thank You So Much I Just Used The Code You Provided And Everything Works Perfectly!!!! Will You Marry Me?!?!!? :d

I'd consider it, if you are serious and of the fairer sex, email me. One thing I did forget to mention about the rollover code is that it will work much better with optimized images. For example, your:


is 4538 bytes, using 90 colors. It could be rendered just as well using 7 colors and 769 bytes:


(click on the above to see the actual optimized image)