PDA

View Full Version : Lightbox not working in IE7 from DynamicDrive site



dzinr4001
10-05-2010, 02:47 PM
Hi. I've seen many different types of light box scripts from other sites. I decided to use the one on dynanicdrive.com and apparently it does not work on IE7 (works fine in Firefox and Safari).

Here is the Dynanic Drive light box i decided to use:
http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm

Here is the code from my site:
In the head tag, I have:
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

I have not changed anything in the .js files.

In the body where I have images, my code looks like:

<table width="539" border="0" align="center" cellpadding="8" cellspacing="0">
<tr>
<td align="center" valign="top"><a href="images/property_pics/01.jpg" rel="lightbox" title="Treasure Island over looking balcony"><img src="images/property_pics/01_a.jpg" width="140" height="140" border="0" /></a></td>
<td align="center" valign="top"><a href="images/property_pics/02.jpg" rel="lightbox" title="Treasure Island interior"><img src="images/property_pics/02_a.jpg" width="140" height="140" border="0" /></a></td>
<td align="center" valign="top"><a href="images/property_pics/03.jpg" rel="lightbox" title="Treasure Island property shot"><img src="images/property_pics/03_a.jpg" width="140" height="140" border="0" /></a></td>
</tr>
<tr>
<td align="center" valign="top"><a href="images/property_pics/04.jpg" rel="lightbox" title="Treasure Island side facade"><img src="images/property_pics/04_a.jpg" width="140" height="140" border="0" /></a></td>
<td align="center" valign="top"><a href="images/property_pics/05.jpg" rel="lightbox" title="Treasure Island boat and building"><img src="images/property_pics/05_a.jpg" width="140" height="140" border="0" /></a></td>
<td align="center" valign="top"><a href="images/property_pics/06.jpg" rel="lightbox" title="Treasure Island outside stairwell"><img src="images/property_pics/06_a.jpg" width="140" height="140" border="0" /></a></td>
</tr>
<tr>
<td align="center" valign="top"><a href="images/property_pics/07.jpg" rel="lightbox" title="Treasure Island drive way"><img src="images/property_pics/07_a.jpg" width="140" height="140" border="0" /></a></td>
<td align="center" valign="top"><a href="images/property_pics/08.jpg" rel="lightbox" title="Boats docked at Treasure Island"><img src="images/property_pics/08_a.jpg" width="140" height="140" border="0" /></a></td>
<td align="center" valign="top"><a href="images/property_pics/09.jpg" rel="lightbox" title="Treasure Islandl"><img src="images/property_pics/09_a.jpg" width="140" height="140" border="0" /></a></td>
</tr>
<tr>
<td align="center" valign="top"><a href="images/property_pics/10.jpg" rel="lightbox" title="Treasure Island pool"><img src="images/property_pics/10_a.jpg" width="140" height="140" border="0" /></a></td>
<td align="center" valign="top"><a href="images/property_pics/11.jpg" rel="lightbox" title="Boats docked at Treasure Island"><img src="images/property_pics/11_a.jpg" width="140" height="140" border="0" /></a></td>
<td align="center" valign="top"><a href="images/property_pics/12.jpg" rel="lightbox" title="Walkway to the docks at Treasure Island"><img src="images/property_pics/12_a.jpg" width="140" height="140" border="0" /></a></td>
</tr>
<tr>
<td align="center" valign="top"><a href="images/property_pics/13.jpg" rel="lightbox" title="Treasure Island bar"><img src="images/property_pics/13_a.jpg" width="140" height="140" border="0" /></a></td>
<td align="center" valign="top"><a href="images/property_pics/14.jpg" rel="lightbox" title="Live music at Treasure Island"><img src="images/property_pics/14_a.jpg" width="140" height="140" border="0" /></a></td>
<td align="center" valign="top"><a href="images/property_pics/15.jpg" rel="lightbox" title="Sitting area at Treasure Island"><img src="images/property_pics/15_a.jpg" width="140" height="140" border="0" /></a></td>
</tr>
<tr>
<td align="center" valign="top"><a href="images/property_pics/16.jpg" rel="lightbox" title="Weddings, Meetings and More"><img src="images/property_pics/16_a.jpg" width="140" height="140" border="0" /></a></td>
<td align="center" valign="top"><a href="images/property_pics/17.jpg" rel="lightbox" title="Yacht docked at Treasure Island"><img src="images/property_pics/17_a.jpg" width="140" height="140" border="0" /></a></td>
<td align="center" valign="top"><a href="images/property_pics/18.jpg" rel="lightbox" title="Treasure Island side stairwell"><img src="images/property_pics/18_a.jpg" width="140" height="140" border="0" /></a></td>
</tr>
<tr>
<td align="center" valign="top"><a href="images/property_pics/19.jpg" rel="lightbox" title="Treasure Island side stairwell"><img src="images/property_pics/19_a.jpg" width="140" height="140" border="0" /></a></td>
<td align="center" valign="top"><a href="images/property_pics/20.jpg" rel="lightbox" title="Outdoor eating at Treasure Island"><img src="images/property_pics/20_a.jpg" width="140" height="140" border="0" /></a></td>
<td align="center" valign="top">&nbsp;</td>
</tr>
</table>


If anyone knows what I need to change in the .js code to make it work in IE7, I would greatly appreciate it.

Thank you!

dzinr4001
10-06-2010, 05:40 PM
Anyone? bump for help

jscheuer1
10-07-2010, 01:07 AM
Everything in your post looks OK. And since you say it's working in those other browsers, the scripts and style for Lightbox must be available to the page.

This by the way:



<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

is not the code for the version of Lightbox (2.03a) on Dynamic Drive that you link to. It's for 2.04.

In any case, the problem is probably related to something you aren't showing us. Even if it's in the code you are showing us, it's not apparent. Things like this are almost always easier to figure out from the live page.

So, if you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.