sarahroache
07-30-2004, 06:04 AM
:confused: I am currently trying to build a photo gallery for my website where I use an iframe to display a list of photos which you can scroll along. I want to make it possible for a pop up to be displayed when a thumbnail is clicked. i have tried but each time the photo appears within the i frame so it is pointless, please help!
Here is the code on the page which contains the i frame:
<HTML>
<HEAD>
<title>Adriano Graziani - Operatic Singer, Male Vocal Tenor available for Special Events Singer.</title>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META name="description" content="Special Events Singer - Listen to FREE samples of qualified & established Male Vocal Tenor Adriano Graziani and realise the potential to add that extra special touch to a significant occasion.">
<META name="keywords" content="Opera Singer, Classical Singer, Male Tenor Vocalist, Entertainment for Special Occasions, Events Singer, Functions Singer, Wedding Singer, Corporate Functions.">
<META name="author" content="Steven Walters of www.walstersandassociates.com">
<link rel="stylesheet" href="ag.css" type="text/css">
<!-- ImageReady Preload Script (ag.psd) -->
<SCRIPT TYPE="text/javascript">
<!--
<!--
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}
var preloadFlag = false;
function preloadImages() {
if (document.images) {
ag_welcome_over = newImage("images/ag_welcome-over.gif");
ag_portfolio_over = newImage("images/ag_portfolio-over.gif");
ag_samples_over = newImage("images/ag_samples-over.gif");
ag_contact_over = newImage("images/ag_contact-over.gif");
preloadFlag = true;
}
}
// -->
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</SCRIPT>
<!-- End Preload Script -->
<link href="ag.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY class="bkgrnd-grey" LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 ONLOAD="preloadImages();MM_preloadImages('images/ag_welcome-over.gif','images/ag_portfolio-over.gif','images/ag_samples-over.gif','images/ag_contact-over.gif')">
<TABLE WIDTH=795 height="428" BORDER=0 CELLPADDING=0 CELLSPACING=0 class="bkgrnd-cream">
<TR>
<TD WIDTH=773 HEIGHT=12 COLSPAN=9> <IMG SRC="images/ag_topspace.gif" WIDTH=773 HEIGHT=12></TD>
<TD WIDTH=22 HEIGHT=427 ROWSPAN=7> <IMG SRC="images/ag_scroll.jpg" WIDTH=22 HEIGHT=427></TD>
</TR>
<TR>
<TD WIDTH=246 HEIGHT=415 ROWSPAN=6><IMG SRC="images/ag_doorway.jpg" WIDTH=246 HEIGHT=415></TD>
<TD WIDTH=527 HEIGHT=31 COLSPAN=8><IMG SRC="images/ag_top.gif" WIDTH=527 HEIGHT=31></TD>
</TR>
<TR>
<TD WIDTH=241 HEIGHT=19 class="txt-small-grey"> </TD>
<TD WIDTH=64 HEIGHT=19 COLSPAN=2> <A HREF="welcome.htm"> <IMG SRC="images/ag_welcome.gif" NAME="ag_welcome" WIDTH=64 HEIGHT=19 BORDER=0 onMouseOver="MM_swapImage('ag_welcome','','images/ag_welcome-over.gif',1)" onMouseOut="MM_swapImgRestore()"></A></TD>
<TD WIDTH=60 HEIGHT=19> <A HREF="portfolio.htm"> <IMG SRC="images/ag_portfolio.gif" NAME="ag_portfolio" WIDTH=60 HEIGHT=19 BORDER=0 onMouseOver="MM_swapImage('ag_portfolio','','images/ag_portfolio-over.gif',1)" onMouseOut="MM_swapImgRestore()"></A></TD>
<TD WIDTH=63 HEIGHT=19> <A HREF="samples.htm"> <IMG SRC="images/ag_samples.gif" NAME="ag_samples" WIDTH=63 HEIGHT=19 BORDER=0 onMouseOver="MM_swapImage('ag_samples','','images/ag_samples-over.gif',1)" onMouseOut="MM_swapImgRestore()"></A></TD>
<TD WIDTH=58 HEIGHT=19 COLSPAN=2> <A HREF="contact.htm"> <IMG SRC="images/ag_contact.gif" NAME="ag_contact" WIDTH=58 HEIGHT=19 BORDER=0 onMouseOver="MM_swapImage('ag_contact','','images/ag_contact-over.gif',1)" onMouseOut="MM_swapImgRestore()"></A></TD>
<TD WIDTH=41 HEIGHT=19><IMG SRC="images/ag_rgt-spacemenu.jpg" WIDTH=41 HEIGHT=19></TD>
</TR>
<TR>
<TD WIDTH=527 HEIGHT=309 COLSPAN=8><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" class="txt-norm-grey">
<tr>
<td width="97%" height="15" colspan="2"> </td>
<td width="3%"> </td>
</tr>
<tr>
<td height="234" colspan="2" valign="top" class="txt-subhead-red"> <p>photos</p>
<p align="right"><a href="index3.htm">
<iframe width=500 height=250 src="index3.htm" align=left frameborder=10>
</iframe>
</a> </p>
</td>
<td> </td>
</tr>
</table></TD>
</TR>
<TR>
<TD WIDTH=264 HEIGHT=43 COLSPAN=2 ROWSPAN=2 valign="bottom"><ie5ticker>
<!--[if IE]>
<IE:Download ID="marqueedata" STYLE="behavior:url(#default#download)" />
<marquee id="externalmarquee" direction=left scrollAmount=2 style="width:250px; height:18px; background:; font-family:Arial, Helvetica, sans-serif; font-size:11px; border:1px solid:#ff0000 ; padding:0px" onMouseover="this.scrollAmount=1" onMouseout="this.scrollAmount=3" src="ag_ticker.txt">
</marquee><![endif]-->
</ie5ticker></TD>
<script language="JavaScript">
<!--
function downloaddata(){
marqueedata.startDownload(externalmarquee.src,displaydata);
}
function displaydata(data){
externalmarquee.innerHTML=data;
}
window.onload=downloaddata;
//-->
</script>
<TD WIDTH=213 HEIGHT=25 COLSPAN=4 valign="bottom"> </TD>
<TD WIDTH=50 HEIGHT=56 COLSPAN=2 ROWSPAN=3><IMG SRC="images/ag_footer-treble-clef.jpg" WIDTH=50 HEIGHT=56></TD>
</TR>
<TR>
<TD WIDTH=213 HEIGHT=18 COLSPAN=4><a href="ag.htm" target="_self"><IMG SRC="images/ag_footer-welcome.jpg" WIDTH=213 HEIGHT=18 border="0"></a></TD>
</TR>
<TR>
<TD WIDTH=264 HEIGHT=13 COLSPAN=2><IMG SRC="images/ag_bott.gif" WIDTH=264 HEIGHT=13></TD>
<TD WIDTH=213 HEIGHT=13 COLSPAN=4><IMG SRC="images/ag_17.jpg" WIDTH=213 HEIGHT=13></TD>
</TR>
<TR class="bkgrnd-grey">
<TD WIDTH=246 HEIGHT=1><IMG SRC="images/spacer.gif" WIDTH=246 HEIGHT=1></TD>
<TD WIDTH=241 HEIGHT=1><IMG SRC="images/spacer.gif" WIDTH=241 HEIGHT=1></TD>
<TD WIDTH=23 HEIGHT=1><IMG SRC="images/spacer.gif" WIDTH=23 HEIGHT=1></TD>
<TD WIDTH=41 HEIGHT=1><IMG SRC="images/spacer.gif" WIDTH=41 HEIGHT=1></TD>
<TD WIDTH=60 HEIGHT=1><IMG SRC="images/spacer.gif" WIDTH=60 HEIGHT=1></TD>
<TD WIDTH=63 HEIGHT=1><IMG SRC="images/spacer.gif" WIDTH=63 HEIGHT=1></TD>
<TD WIDTH=49 HEIGHT=1><IMG SRC="images/spacer.gif" WIDTH=49 HEIGHT=1></TD>
<TD WIDTH=9 HEIGHT=1><IMG SRC="images/spacer.gif" WIDTH=9 HEIGHT=1></TD>
<TD WIDTH=41 HEIGHT=1><IMG SRC="images/spacer.gif" WIDTH=41 HEIGHT=1></TD>
<TD WIDTH=22 HEIGHT=1><IMG SRC="images/spacer.gif" WIDTH=22 HEIGHT=1></TD>
</TR>
</TABLE>
<!-- ImageReady Slices (ag.psd) -->
<!-- End ImageReady Slices -->
</BODY>
</HTML>
Here is the code from the i frame page containing a the thumbnails:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div align="center">
<table width="75%" border="0">
<tr>
<td><a href="pic1.htm" onclick="NewWindow(this.href,'name','400','400','yes');return false"></a><a href="pic1.htm"><img src="file:///C|/Documents%20and%20Settings/sarah/My%20Documents/My%20Pictures/adri.jpg" width="150" height="227" border="0"></a></a></td>
<td><a href="pic2.htm"><img src="file:///C|/Documents%20and%20Settings/sarah/My%20Documents/My%20Pictures/ADRI2%7E1.JPG" width="137" height="227" border="0"></a></td>
<td><a href="pic3.htm"><img src="file:///C|/Documents%20and%20Settings/sarah/My%20Documents/My%20Pictures/adri3.jpg" width="149" height="227" border="0"></a></td>
<td><a href="pic4.htm"><img src="file:///C|/Documents%20and%20Settings/sarah/My%20Documents/My%20Pictures/adri4.jpg" width="155" height="227" border="0"></a></td>
<td><img src="file:///C|/Documents%20and%20Settings/sarah/My%20Documents/My%20Pictures/adri5.jpg" width="151" height="227"></td>
</tr>
</table>
</div>
</body>
</html>
Here is the code on the page which contains the i frame:
<HTML>
<HEAD>
<title>Adriano Graziani - Operatic Singer, Male Vocal Tenor available for Special Events Singer.</title>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META name="description" content="Special Events Singer - Listen to FREE samples of qualified & established Male Vocal Tenor Adriano Graziani and realise the potential to add that extra special touch to a significant occasion.">
<META name="keywords" content="Opera Singer, Classical Singer, Male Tenor Vocalist, Entertainment for Special Occasions, Events Singer, Functions Singer, Wedding Singer, Corporate Functions.">
<META name="author" content="Steven Walters of www.walstersandassociates.com">
<link rel="stylesheet" href="ag.css" type="text/css">
<!-- ImageReady Preload Script (ag.psd) -->
<SCRIPT TYPE="text/javascript">
<!--
<!--
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}
var preloadFlag = false;
function preloadImages() {
if (document.images) {
ag_welcome_over = newImage("images/ag_welcome-over.gif");
ag_portfolio_over = newImage("images/ag_portfolio-over.gif");
ag_samples_over = newImage("images/ag_samples-over.gif");
ag_contact_over = newImage("images/ag_contact-over.gif");
preloadFlag = true;
}
}
// -->
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</SCRIPT>
<!-- End Preload Script -->
<link href="ag.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY class="bkgrnd-grey" LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 ONLOAD="preloadImages();MM_preloadImages('images/ag_welcome-over.gif','images/ag_portfolio-over.gif','images/ag_samples-over.gif','images/ag_contact-over.gif')">
<TABLE WIDTH=795 height="428" BORDER=0 CELLPADDING=0 CELLSPACING=0 class="bkgrnd-cream">
<TR>
<TD WIDTH=773 HEIGHT=12 COLSPAN=9> <IMG SRC="images/ag_topspace.gif" WIDTH=773 HEIGHT=12></TD>
<TD WIDTH=22 HEIGHT=427 ROWSPAN=7> <IMG SRC="images/ag_scroll.jpg" WIDTH=22 HEIGHT=427></TD>
</TR>
<TR>
<TD WIDTH=246 HEIGHT=415 ROWSPAN=6><IMG SRC="images/ag_doorway.jpg" WIDTH=246 HEIGHT=415></TD>
<TD WIDTH=527 HEIGHT=31 COLSPAN=8><IMG SRC="images/ag_top.gif" WIDTH=527 HEIGHT=31></TD>
</TR>
<TR>
<TD WIDTH=241 HEIGHT=19 class="txt-small-grey"> </TD>
<TD WIDTH=64 HEIGHT=19 COLSPAN=2> <A HREF="welcome.htm"> <IMG SRC="images/ag_welcome.gif" NAME="ag_welcome" WIDTH=64 HEIGHT=19 BORDER=0 onMouseOver="MM_swapImage('ag_welcome','','images/ag_welcome-over.gif',1)" onMouseOut="MM_swapImgRestore()"></A></TD>
<TD WIDTH=60 HEIGHT=19> <A HREF="portfolio.htm"> <IMG SRC="images/ag_portfolio.gif" NAME="ag_portfolio" WIDTH=60 HEIGHT=19 BORDER=0 onMouseOver="MM_swapImage('ag_portfolio','','images/ag_portfolio-over.gif',1)" onMouseOut="MM_swapImgRestore()"></A></TD>
<TD WIDTH=63 HEIGHT=19> <A HREF="samples.htm"> <IMG SRC="images/ag_samples.gif" NAME="ag_samples" WIDTH=63 HEIGHT=19 BORDER=0 onMouseOver="MM_swapImage('ag_samples','','images/ag_samples-over.gif',1)" onMouseOut="MM_swapImgRestore()"></A></TD>
<TD WIDTH=58 HEIGHT=19 COLSPAN=2> <A HREF="contact.htm"> <IMG SRC="images/ag_contact.gif" NAME="ag_contact" WIDTH=58 HEIGHT=19 BORDER=0 onMouseOver="MM_swapImage('ag_contact','','images/ag_contact-over.gif',1)" onMouseOut="MM_swapImgRestore()"></A></TD>
<TD WIDTH=41 HEIGHT=19><IMG SRC="images/ag_rgt-spacemenu.jpg" WIDTH=41 HEIGHT=19></TD>
</TR>
<TR>
<TD WIDTH=527 HEIGHT=309 COLSPAN=8><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" class="txt-norm-grey">
<tr>
<td width="97%" height="15" colspan="2"> </td>
<td width="3%"> </td>
</tr>
<tr>
<td height="234" colspan="2" valign="top" class="txt-subhead-red"> <p>photos</p>
<p align="right"><a href="index3.htm">
<iframe width=500 height=250 src="index3.htm" align=left frameborder=10>
</iframe>
</a> </p>
</td>
<td> </td>
</tr>
</table></TD>
</TR>
<TR>
<TD WIDTH=264 HEIGHT=43 COLSPAN=2 ROWSPAN=2 valign="bottom"><ie5ticker>
<!--[if IE]>
<IE:Download ID="marqueedata" STYLE="behavior:url(#default#download)" />
<marquee id="externalmarquee" direction=left scrollAmount=2 style="width:250px; height:18px; background:; font-family:Arial, Helvetica, sans-serif; font-size:11px; border:1px solid:#ff0000 ; padding:0px" onMouseover="this.scrollAmount=1" onMouseout="this.scrollAmount=3" src="ag_ticker.txt">
</marquee><![endif]-->
</ie5ticker></TD>
<script language="JavaScript">
<!--
function downloaddata(){
marqueedata.startDownload(externalmarquee.src,displaydata);
}
function displaydata(data){
externalmarquee.innerHTML=data;
}
window.onload=downloaddata;
//-->
</script>
<TD WIDTH=213 HEIGHT=25 COLSPAN=4 valign="bottom"> </TD>
<TD WIDTH=50 HEIGHT=56 COLSPAN=2 ROWSPAN=3><IMG SRC="images/ag_footer-treble-clef.jpg" WIDTH=50 HEIGHT=56></TD>
</TR>
<TR>
<TD WIDTH=213 HEIGHT=18 COLSPAN=4><a href="ag.htm" target="_self"><IMG SRC="images/ag_footer-welcome.jpg" WIDTH=213 HEIGHT=18 border="0"></a></TD>
</TR>
<TR>
<TD WIDTH=264 HEIGHT=13 COLSPAN=2><IMG SRC="images/ag_bott.gif" WIDTH=264 HEIGHT=13></TD>
<TD WIDTH=213 HEIGHT=13 COLSPAN=4><IMG SRC="images/ag_17.jpg" WIDTH=213 HEIGHT=13></TD>
</TR>
<TR class="bkgrnd-grey">
<TD WIDTH=246 HEIGHT=1><IMG SRC="images/spacer.gif" WIDTH=246 HEIGHT=1></TD>
<TD WIDTH=241 HEIGHT=1><IMG SRC="images/spacer.gif" WIDTH=241 HEIGHT=1></TD>
<TD WIDTH=23 HEIGHT=1><IMG SRC="images/spacer.gif" WIDTH=23 HEIGHT=1></TD>
<TD WIDTH=41 HEIGHT=1><IMG SRC="images/spacer.gif" WIDTH=41 HEIGHT=1></TD>
<TD WIDTH=60 HEIGHT=1><IMG SRC="images/spacer.gif" WIDTH=60 HEIGHT=1></TD>
<TD WIDTH=63 HEIGHT=1><IMG SRC="images/spacer.gif" WIDTH=63 HEIGHT=1></TD>
<TD WIDTH=49 HEIGHT=1><IMG SRC="images/spacer.gif" WIDTH=49 HEIGHT=1></TD>
<TD WIDTH=9 HEIGHT=1><IMG SRC="images/spacer.gif" WIDTH=9 HEIGHT=1></TD>
<TD WIDTH=41 HEIGHT=1><IMG SRC="images/spacer.gif" WIDTH=41 HEIGHT=1></TD>
<TD WIDTH=22 HEIGHT=1><IMG SRC="images/spacer.gif" WIDTH=22 HEIGHT=1></TD>
</TR>
</TABLE>
<!-- ImageReady Slices (ag.psd) -->
<!-- End ImageReady Slices -->
</BODY>
</HTML>
Here is the code from the i frame page containing a the thumbnails:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div align="center">
<table width="75%" border="0">
<tr>
<td><a href="pic1.htm" onclick="NewWindow(this.href,'name','400','400','yes');return false"></a><a href="pic1.htm"><img src="file:///C|/Documents%20and%20Settings/sarah/My%20Documents/My%20Pictures/adri.jpg" width="150" height="227" border="0"></a></a></td>
<td><a href="pic2.htm"><img src="file:///C|/Documents%20and%20Settings/sarah/My%20Documents/My%20Pictures/ADRI2%7E1.JPG" width="137" height="227" border="0"></a></td>
<td><a href="pic3.htm"><img src="file:///C|/Documents%20and%20Settings/sarah/My%20Documents/My%20Pictures/adri3.jpg" width="149" height="227" border="0"></a></td>
<td><a href="pic4.htm"><img src="file:///C|/Documents%20and%20Settings/sarah/My%20Documents/My%20Pictures/adri4.jpg" width="155" height="227" border="0"></a></td>
<td><img src="file:///C|/Documents%20and%20Settings/sarah/My%20Documents/My%20Pictures/adri5.jpg" width="151" height="227"></td>
</tr>
</table>
</div>
</body>
</html>