Web Design Forums

Toads · 07-07-2008, 21:12

Hi,
I'm having trouble creating an image gallery everything seems to be in the right postion but when i test the thumbnails when clicked do nothing at all and the idea was to click on them an the larger image appear in the window above it. I don't think the links are correct so it can't find it but i will show you my script below.

<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
td img {display: block;}.style5 {
font-family: "Futura Md BT", "Arial Black", "Bauhaus 93";
font-size: 12px;
}
.style6 {
color: #FFFFFF;
font-size: 12px;
}
.style8 {
color: #FFFFFF;
font-family: "Futura Lt BT", Arial, "Myriad Pro";
font-size: 14px;
}
.style16 {color: #000000}
.style17 {color: #FFFFFF}
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
color: #FF0000;
}
a:active {
text-decoration: none;
}
.style19 {font-size: 16}

</style>

<script src="../../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script src="../../SpryAssets/xpath.js" type="text/javascript"></script>
<script src="../../SpryAssets/SpryData.js" type="text/javascript"></script>
<script type="text/javascript">
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_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_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>
</head>

<script type="text/javascript">
var slides = new Array(7);
var j=0;
for(var i=1; i<=7; i++){
slides[i] = new Image();
slides[i].src = "Large/img_" + i + ".jpg"; }
function Swap(number){
document.slide.src = slides[number].src;}
</script>

<body bgcolor="#000000" onload="MM_preloadImages('testGallery_r4_c3_f2.jpg ')">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="976">


<tr>
<td colspan="3" background="../../top.gif"> </td>
<td><img src="../../spacer.gif" width="1" height="64" border="0" alt="" /></td>
</tr>

<tr>
<td colspan="17"><img name="testGallery_r1_c1" src="testGallery_r1_c1.jpg" width="724" height="4" border="0" id="testGallery_r1_c1" alt="s" /></td>
<td><img src="spacer.gif" width="1" height="4" border="0" alt="s" /></td>
</tr>
<tr>
<td rowspan="4"><img name="testGallery_r2_c1" src="../tester/testGallery_r2_c1.jpg" width="5" height="521" border="0" id="testGallery_r2_c1" alt="s" /></td>
<td colspan="15"><img name="slide" src="Large/img_0.jpg" width="464" height="400"></td>
<td rowspan="4"><img name="testGallery_r2_c17" src="../tester/testGallery_r2_c17.jpg" width="7" height="521" border="0" id="testGallery_r2_c17" alt="s" /></td>
<td><img src="spacer.gif" width="1" height="406" border="0" alt="s" /></td>
</tr>
<tr>
<td colspan="15"> </td>
<td><img src="spacer.gif" width="1" height="22" border="0" alt="ss" /></td>
</tr>
<tr>
<td rowspan="2"> </td>
<td><a href="javascript:Swap(1)"><img name="testGallery_r4_c3" src="../tester/testGallery_r4_c3.jpg" width="79" height="69" border="0" id="testGallery_r4_c3" alt="s" /></a></td>
<td rowspan="2"> </td>
<td><a href="javascript:Swap(2)"><img name="testGallery_r4_c5" src="../tester/testGallery_r4_c5.jpg" width="79" height="69" border="0" id="testGallery_r4_c5" alt="s" /></td>
<td rowspan="2"> </td>
<td><a href="javascript:Swap(3)"><img name="testGallery_r4_c7" src="../tester/testGallery_r4_c7.jpg" width="79" height="69" border="0" id="testGallery_r4_c7" alt="s" /></td>
<td rowspan="2"> </td>
<td><a href="javascript:Swap(4)"><img name="testGallery_r4_c9" src="../tester/testGallery_r4_c9.jpg" width="79" height="69" border="0" id="testGallery_r4_c9" alt="s" /></td>
<td rowspan="2"> </td>
<td><a href="javascript:Swap(5)"><img name="testGallery_r4_c11" src="../tester/testGallery_r4_c11.jpg" width="80" height="69" border="0" id="testGallery_r4_c11" alt="s" /></td>
<td rowspan="2"> </td>
<td><a href="javascript:Swap(6)"><img name="testGallery_r4_c13" src="../tester/testGallery_r4_c13.jpg" width="80" height="69" border="0" id="testGallery_r4_c13" alt="s" /></td>
<td rowspan="2"> </td>
<td><a href="javascript:Swap(7)"><img name="testGallery_r4_c15" src="../tester/testGallery_r4_c15.jpg" width="79" height="69" border="0" id="testGallery_r4_c15" alt="s" /></td>
<td rowspan="2"> </td>
<td><img src="spacer.gif" width="1" height="69" border="0" alt="s" /></td>
</tr>
<tr>

<td><img src="spacer.gif" width="1" height="24" border="0" alt="s" /></td>
</tr>
</table>
</div> </span></span></span></td>

</tr>
</table>
</body>
</html>

blackf0rk · 07-07-2008, 21:49

Usually you want to reference your images starting at the root (/) to wherever your images are at. And so you don't often see people using ../../ to reference something on the server. It doesn't mean that the way you have it is wrong, but that would be the first thing I would look at. I think you may be right, looks like a path issue.

karmedic · 07-07-2008, 22:48

Quote:

... </table>
</div> </span></span></span></td> ...

First step - validate your code.

The W3C Markup Validation Service

Toads · 07-07-2008, 22:56

Hi Karmedic,
I have validated my script but it still doesn't change anything for my gallery.

karmedic · 09-07-2008, 22:53

Hi Toads,

Next step is to check out this post:

Beginners web design

This will get you on the road to understanding the various components of the page you are trying to fix.

07-07-2008, 21:12	#1 (permalink)
Toads Registered User Join Date: Jul 2008 Posts: 6	My Image Gallery won't work, Please Help! Hi, I'm having trouble creating an image gallery everything seems to be in the right postion but when i test the thumbnails when clicked do nothing at all and the idea was to click on them an the larger image appear in the window above it. I don't think the links are correct so it can't find it but i will show you my script below. <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> td img {display: block;}.style5 { font-family: "Futura Md BT", "Arial Black", "Bauhaus 93"; font-size: 12px; } .style6 { color: #FFFFFF; font-size: 12px; } .style8 { color: #FFFFFF; font-family: "Futura Lt BT", Arial, "Myriad Pro"; font-size: 14px; } .style16 {color: #000000} .style17 {color: #FFFFFF} a:link { color: #FFFFFF; text-decoration: none; } a:visited { text-decoration: none; color: #FFFFFF; } a:hover { text-decoration: none; color: #FF0000; } a:active { text-decoration: none; } .style19 {font-size: 16} </style> <script src="../../Scripts/AC_RunActiveContent.js" type="text/javascript"></script> <script src="../../SpryAssets/xpath.js" type="text/javascript"></script> <script src="../../SpryAssets/SpryData.js" type="text/javascript"></script> <script type="text/javascript"> 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_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_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> </head> <script type="text/javascript"> var slides = new Array(7); var j=0; for(var i=1; i<=7; i++){ slides[i] = new Image(); slides[i].src = "Large/img_" + i + ".jpg"; } function Swap(number){ document.slide.src = slides[number].src;} </script> <body bgcolor="#000000" onload="MM_preloadImages('testGallery_r4_c3_f2.jpg ')"> <table align="center" border="0" cellpadding="0" cellspacing="0" width="976"> <!-- fwtable fwsrc="index.png" fwpage="Page 1" fwbase="index.gif" fwstyle="Dreamweaver" fwdocid = "1911442074" fwnested="0" --> <tr> <td colspan="3" background="../../top.gif"> </td> <td><img src="../../spacer.gif" width="1" height="64" border="0" alt="" /></td> </tr> <tr> <td colspan="17"><img name="testGallery_r1_c1" src="testGallery_r1_c1.jpg" width="724" height="4" border="0" id="testGallery_r1_c1" alt="s" /></td> <td><img src="spacer.gif" width="1" height="4" border="0" alt="s" /></td> </tr> <tr> <td rowspan="4"><img name="testGallery_r2_c1" src="../tester/testGallery_r2_c1.jpg" width="5" height="521" border="0" id="testGallery_r2_c1" alt="s" /></td> <td colspan="15"><img name="slide" src="Large/img_0.jpg" width="464" height="400"></td> <td rowspan="4"><img name="testGallery_r2_c17" src="../tester/testGallery_r2_c17.jpg" width="7" height="521" border="0" id="testGallery_r2_c17" alt="s" /></td> <td><img src="spacer.gif" width="1" height="406" border="0" alt="s" /></td> </tr> <tr> <td colspan="15"> </td> <td><img src="spacer.gif" width="1" height="22" border="0" alt="ss" /></td> </tr> <tr> <td rowspan="2"> </td> <td><a href="javascript:Swap(1)"><img name="testGallery_r4_c3" src="../tester/testGallery_r4_c3.jpg" width="79" height="69" border="0" id="testGallery_r4_c3" alt="s" /></a></td> <td rowspan="2"> </td> <td><a href="javascript:Swap(2)"><img name="testGallery_r4_c5" src="../tester/testGallery_r4_c5.jpg" width="79" height="69" border="0" id="testGallery_r4_c5" alt="s" /></td> <td rowspan="2"> </td> <td><a href="javascript:Swap(3)"><img name="testGallery_r4_c7" src="../tester/testGallery_r4_c7.jpg" width="79" height="69" border="0" id="testGallery_r4_c7" alt="s" /></td> <td rowspan="2"> </td> <td><a href="javascript:Swap(4)"><img name="testGallery_r4_c9" src="../tester/testGallery_r4_c9.jpg" width="79" height="69" border="0" id="testGallery_r4_c9" alt="s" /></td> <td rowspan="2"> </td> <td><a href="javascript:Swap(5)"><img name="testGallery_r4_c11" src="../tester/testGallery_r4_c11.jpg" width="80" height="69" border="0" id="testGallery_r4_c11" alt="s" /></td> <td rowspan="2"> </td> <td><a href="javascript:Swap(6)"><img name="testGallery_r4_c13" src="../tester/testGallery_r4_c13.jpg" width="80" height="69" border="0" id="testGallery_r4_c13" alt="s" /></td> <td rowspan="2"> </td> <td><a href="javascript:Swap(7)"><img name="testGallery_r4_c15" src="../tester/testGallery_r4_c15.jpg" width="79" height="69" border="0" id="testGallery_r4_c15" alt="s" /></td> <td rowspan="2"> </td> <td><img src="spacer.gif" width="1" height="69" border="0" alt="s" /></td> </tr> <tr> <td><img src="spacer.gif" width="1" height="24" border="0" alt="s" /></td> </tr> </table> </div> </span></span></span></td> </tr> </table> </body> </html>

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

07-07-2008, 21:49	#2 (permalink)
blackf0rk Enspiar Productions Join Date: Oct 2006 Location: MKE, WI Posts: 43	Usually you want to reference your images starting at the root (/) to wherever your images are at. And so you don't often see people using ../../ to reference something on the server. It doesn't mean that the way you have it is wrong, but that would be the first thing I would look at. I think you may be right, looks like a path issue.

07-07-2008, 22:56	#4 (permalink)
Toads Registered User Join Date: Jul 2008 Posts: 6	Hi Karmedic, I have validated my script but it still doesn't change anything for my gallery.

09-07-2008, 22:53	#5 (permalink)
karmedic id Join Date: May 2008 Location: Ottawa Posts: 212	Hi Toads, Next step is to check out this post: Beginners web design This will get you on the road to understanding the various components of the page you are trying to fix.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)