here is what is inside the iframe
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<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" />
<style>
body { font-family: serif; color: 616161;}
img { border:0;}
</style>
</HEAD>
<BODY>
<h3>Portrait</h3>
<a href="images/_DSC0001.jpg" rel="lightbox[roadtrip]"><img src="images/thumbs/tn__DSC0001.jpg"></a>
<a href="images/_DSC0010.jpg" rel="lightbox[roadtrip]"><img src="images/thumbs/tn__DSC0010.jpg"></a>
<a href="images/_DSC0062-3.jpg" rel="lightbox[roadtrip]"><img src="images/thumbs/tn__DSC0062-3.jpg"></a>
<a href="images/_DSC0055.jpg" rel="lightbox[roadtrip]"><img src="images/thumbs/tn__DSC0055.jpg"></a>
<a href="images/_DSC0061.jpg" rel="lightbox[roadtrip]"><img src="images/thumbs/tn__DSC0061.jpg"></a>
<a href="images/A1155-2.jpg" rel="lightbox[roadtrip]"><img src="images/thumbs/tn_A1155-2.jpg"></a>
<a href="images/B0090-2.jpg" rel="lightbox[roadtrip]"><img src="images/thumbs/tn_B0090-2.jpg"></a>
</BODY>
</HTML>
here is the page i want the lightbox to load onto
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Double G Photography </TITLE>
<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" />
<style type="text/css">
img {
border: none;
}
body { font-family: serif; color: 616161;}
#vertmenu {
font-size: 100%;
width: 160px;
padding: 0px;
margin: 0px;
}
#vertmenu h1 {
display: block;
background-color:#FF9900;
font-size: 100%;
padding: 3px 0 5px 3px;
border: 1px solid #000000;
color: #333333;
margin: 0px;
width:159px;
}
#vertmenu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}
#vertmenu ul li {
margin: 0px;
padding: 0px;
}
#vertmenu ul li a {
font-size: 100%;
display: block;
border-bottom: 1px dashed #616161;
padding: 5px 0px 2px 4px;
text-decoration: none;
color: #666666;
width:160px;
}
#vertmenu ul li a:hover, #vertmenu ul li a:focus {
color: #ffffff;
background-color: #616161;
}
a { color:#616161; text-decoration:none;}
a:hover { background-color: #616161; color:#ffffff; text-decoration: none; }
</style>
</HEAD>
<BODY>
<img src="images/main_header.jpg">
<table border="0" cellpadding="5">
<tr>
<td valign="top">
<div id="vertmenu" valign="top">
<ul>
<li><a href="dg_index.html" tabindex="1">Home</a></li>
<li><a href="dg_about.html" tabindex="2">About Us</a></li>
<li><a href="dg_gallery.html" tabindex="3">Gallery</a></li>
<li><a href="dg_online.html" tabindex="3">Online Photos</a></li>
<li><a href="dg_contact.html" tabindex="4">Contact</a></li>
<li><a href="dg_links.html" tabindex="6">Links</a></li>
</ul>
</div>
</td>
<td Width="630" valign="top">
<FONT
style="BACKGROUND-COLOR: 616161" color="ffffff"><h3>Gallery:</h3></FONT>
<a href="dg_port.html" target="Frame">Portrait</a> | <a href="dg_wedding.html" target="Frame">Wedding</a> | <a href="dg_bw.html" target="Frame">Black & White</a>
<iframe NAME="Frame" src="dg_port.html"
WIDTH="630" HEIGHT="400" frameborder="0"><h3>Portrait</h3>
</iframe>
<br>
<br>
<center><FONT
style="BACKGROUND-COLOR: 616161" color="ffffff">Copyright Double G Photography © 2008</FONT></center>
</td>
</tr>
</table>
</BODY>
</HTML>
thanks for your help guys, anything will be much appreciated .
Cheers
Randall
| 