...

View Full Version : Gallery is not working. Pictures don't load.



paradoxcvx
05-29-2009, 09:02 PM
I'm very new to this and I am doing it for free for my mother and her partner.

There are a few issues with the site that bug me and I cannot figure out.

First is that the site itself looks fine in IE but when opened in Firefox it's almost "broken"

URL removed

See for yourself if you wish.
Another thing is that the gallery doesn't work. It's not even my code!
URL removed
-----------------------------------------------------------------------


<html>
<head>
<title>Image slideshow</title>


<link rel="stylesheet" href="css/image-slideshow.css" type="text/css">

<script type="text/javascript" src="js/image-slideshow.js">
/***********************************************************************************************

Copyright (c) 2005 - Alf Magne Kalleland post@dhtmlgoodies.com

UPDATE LOG:

March, 10th, 2006 : Added support for a message while large image is loading

Get this and other scripts at www.dhtmlgoodies.com

You can use this script freely as long as this copyright message is kept intact.

***********************************************************************************************/


</script>
</head>
<body bgcolor="#14122D">
</script>
<br>
<div id="h2osalon_slideshow">
<div id="previewPane">
<img src="galleryimages/9.jpg">
<span id="waitMessage">Loading image. Please wait</span>
<div id="largeImageCaption"></div>
</div>

<div id="galleryContainer">
<div id="arrow_left"><img src="galleryimages/arrow_left.gif"></div>
<div id="arrow_right"><img src="galleryimages/arrow_right.gif"></div>
<div id="theImages">
<!-- Thumbnails -->
<a href="#" onClick="showPreview('galleryimages/1.jpg','1');return false"><img src="galleryimages/1_thum.jpg"></a>
<a href="#" onClick="showPreview('galleryimages/2.jpg','2');return false"><img src="galleryimages/2_thum.jpg"></a>
<a href="#" onClick="showPreview('galleryimages/4.jpg','3');return false"><img src="galleryimages/4_thum.jpg"></a>
<a href="#" onClick="showPreview('galleryimages/5.jpg','4');return false"><img src="galleryimages/5_thum.jpg"></a>
<a href="#" onClick="showPreview('galleryimages/6.jpg','5');return false"><img src="galleryimages/6_thum.jpg"></a>
<a href="#" onClick="showPreview('galleryimages/7.jpg','6');return false"><img src="galleryimages/7_thum.jpg"></a>
<a href="#" onClick="showPreview('galleryimages/8.jpg','7');return false"><img src="galleryimages/8_thum.jpg"></a>
<a href="#" onClick="showPreview('galleryimages/9.jpg','8');return false"><img src="galleryimages/9_thum.jpg"></a>
<a href="#" onClick="showPreview('galleryimages/10.jpg','8');return false"><img src="galleryimages/10_thum.jpg"></a>
<a href="#" onClick="showPreview('galleryimages/11.jpg','8');return false"><img src="galleryimages/11_thum.jpg"></a>
<a href="#" onClick="showPreview('galleryimages/12.jpg','8');return false"><img src="galleryimages/12_thum.jpg"></a>
<a href="#" onClick="showPreview('galleryimages/13.jpg','8');return false"><img src="galleryimages/13_thum.jpg"></a>
<a href="#" onClick="showPreview('galleryimages/14.jpg','8');return false"><img src="galleryimages/14_thum.jpg"></a>
<a href="#" onClick="showPreview('galleryimages/15.jpg','8');return false"><img src="galleryimages/15_thum.jpg"></a>
<!-- End thumbnails -->


<!-- Image captions -->
<div class="imageCaption"></div>
<div class="imageCaption"></div>
<div class="imageCaption"></div>
<div class="imageCaption"></div>
<div class="imageCaption"></div>
<div class="imageCaption"></div>
<div class="imageCaption"></div>
<div class="imageCaption"></div>
<!-- End image captions -->

<div id="slideEnd"></div>
</div>
</div>
</div>
<!-- Slideshow -->
<script type='text/javascript'>
var dc_AdLinkColor = 'blue' ;
var dc_PublisherID = 3695 ;

</script>
<script type='text/javascript' src='js/image-slideshow.js'>
</script>
<!-- Slideshow -->
</body>
</html>

------------------------------------------------------------------------

If I open it up in frontpage or preview it in firefox or IE it works great. Once it's actually up and online it doesn't work.

If anything else is needed I'll post whatever you guys need...
I hope you can help me out. :confused:

KenZag
05-29-2009, 10:56 PM
Hello!
You need to carefully evaluate your table structure and all the colspan and rowspan. Something is wrong.
IE seems to be more forgiving than FF.

Set the table border=1 to help debugging.

Why is the <CENTER> tag up there before the <body> tag?

</script>
<CENTER>
<script language="JavaScript">

Ken

paradoxcvx
05-29-2009, 11:15 PM
Edit.

I fixed the center aspect of it like you said. Then the page wasn't centered.
I'm just having trouble fixing anything because in frontpage everything looks fine.
(As you can tell I only took a few weeks of coding in high school..)


<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<title>H20 Salon - Main</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css">
<!--
body {
background-image: url();
}
-->
</style>
<meta name="keywords" content="the,h2o,salon,theh2osalon,salon,hair,hairsalon,nail,nailsalon, nail salon, hair salon, fox lake, foxlake, round lake,roundlake,spring grove,spring grove,il,illinois,chicago,chicago area,pretty,edyta,yellow,red,blue,color,orange,hair,haircut,pedicure,manicure,painting,paint,fingers ,hands,feet,toenails,toe,hair dye,dye,streaks,">
<script language="JavaScript">
<!--
function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}

function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}

function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
}

function FP_swapImgRestore() {//v1.0
var doc=document,i; if(doc.$imgSwaps) { for(i=0;i<doc.$imgSwaps.length;i++) {
var elm=doc.$imgSwaps[i]; if(elm) { elm.src=elm.$src; elm.$src=null; } }
doc.$imgSwaps=null; }
}
// -->
</script>
<CENTER>
<script language="JavaScript">
<!--
function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}

function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}

function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
}

function FP_swapImgRestore() {//v1.0
var doc=document,i; if(doc.$imgSwaps) { for(i=0;i<doc.$imgSwaps.length;i++) {
var elm=doc.$imgSwaps[i]; if(elm) { elm.src=elm.$src; elm.$src=null; } }
doc.$imgSwaps=null; }
}

function FP_goToURL(url) {//v1.0
window.location=url;
}
// -->
</script>
</head>
<body bgcolor="#14122D" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="FP_preloadImgs(/*url*/'images/hairsalon_11.jpg', /*url*/'images/hairsalon_13.jpg', /*url*/'images/hairsalon_15.jpg', /*url*/'images/hairsalon_07.jpg', /*url*/'images/hairsalon_09.jpg')" style="text-align: center">
<div style="width: 0px; height: 0px">
<CENTER>
<!---->
</div>
<table id="Table_01" width="801" height="601" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="25">
<p align="center">
<img src="images/index_01.jpg" width="800" height="16" alt=""></td>
<td>
<p align="center">
<img src="images/spacer.gif" width="1" height="16" alt=""></td>
</tr>
<tr>
<td rowspan="16">
<p align="center">
<img src="images/index_02.jpg" width="86" height="554" alt=""></td>
<td colspan="6">
<p align="center">
<img src="images/index_03.jpg" width="216" height="72" alt=""></td>
<td colspan="18" rowspan="2"><p align="center"><img src="images/index_04.jpg" width="498" height="92" alt="" align="middle"></td>
<td>
<p align="center">
<img src="images/spacer.gif" width="1" height="72" alt=""></td>
</tr>
<tr>
<td colspan="6">
<p align="center">
<img src="images/index_05.jpg" width="216" height="20" alt=""></td>
<td>
<p align="center">
<img src="images/spacer.gif" width="1" height="20" alt=""></td>
</tr>
<tr>
<td rowspan="14">
<p align="center">
<img src="images/index_06.jpg" width="17" height="462" alt=""></td>
<td colspan="2">
<p align="center">
<a href="index.htm">
<img border="0" src="images/index_07.jpg" width="74" height="39" id="img6" onMouseOver="FP_swapImg(1,0,/*id*/'img6',/*url*/'images/hairsalon_07.jpg')" onMouseOut="FP_swapImgRestore()"></a></td>
<td rowspan="3">
<p align="center">
<img src="images/index_08.jpg" width="19" height="88" alt=""></td>
<td>
<p align="center">
<a href="services.html">
<img border="0" src="images/index_09.jpg" width="102" height="39" id="img7" onMouseOver="FP_swapImg(1,0,/*id*/'img7',/*url*/'images/hairsalon_09.jpg')" onMouseOut="FP_swapImgRestore()"></a></td>
<td colspan="2" rowspan="3">
<p align="center">
<img src="images/index_10.jpg" width="11" height="88" alt=""></td>
<td colspan="2">
<a href="about.html">
<p align="center">
<img border="0" img src="images/index_11.jpg" width="108" height="39" alt="" id="img3" onMouseOver="FP_swapImg(1,0,/*id*/'img3',/*url*/'images/hairsalon_11.jpg')" onMouseOut="FP_swapImgRestore()"></td>
<td rowspan="14">
<p align="center">
<img src="images/index_12.jpg" width="13" height="462" alt=""></td>
<td colspan="7">
<a href="location.html">
<p align="center">
<img border="0" img src="images/index_13.jpg" width="117" height="39" alt="" id="img4" onMouseOver="FP_swapImg(1,0,/*id*/'img4',/*url*/'images/hairsalon_13.jpg')" onMouseOut="FP_swapImgRestore()"></td>
<td rowspan="2">
<p align="center">
<img src="images/index_14.jpg" width="11" height="60" alt=""></td>
<td colspan="5">
<p align="center">
<a href="contact.html">
<img border="0" img src="images/index_15.jpg" width="127" height="39" alt="" id="img5" onMouseOver="FP_swapImg(1,0,/*id*/'img5',/*url*/'images/hairsalon_15.jpg')" onMouseOut="FP_swapImgRestore()"></td>
<td rowspan="14">
<p align="center">
<img src="images/index_16.jpg" width="115" height="462" alt=""></td>
<td>
<p align="center">
<img src="images/spacer.gif" width="1" height="39" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<p align="center">
<img src="images/index_17.jpg" width="74" height="49" alt=""></td>
<td rowspan="2">
<p align="center">
<img src="images/index_18.jpg" width="102" height="49" alt=""></td>
<td colspan="2" rowspan="2">
<p align="center">
<img src="images/index_19.jpg" width="108" height="49" alt=""></td>
<td colspan="7">
<p align="center">
<img src="images/index_20.jpg" width="117" height="21" alt=""></td>
<td colspan="5">
<p align="center">
<img src="images/index_21.jpg" width="127" height="21" alt=""></td>
<td>
<p align="center">
<img src="images/spacer.gif" width="1" height="21" alt=""></td>
</tr>
<tr>
<td rowspan="12">
<p align="center">
<img src="images/index_22.jpg" width="15" height="402" alt=""></td>
<td colspan="12" rowspan="2">
<p align="center">
<img src="images/index_23.jpg" width="240" height="39" alt=""></td>
<td>
<p align="center">
<img src="images/spacer.gif" width="1" height="28" alt=""></td>
</tr>
<tr>
<td rowspan="11">
<p align="center">
<img src="images/index_24.jpg" width="11" height="374" alt=""></td>
<td colspan="6" rowspan="9" bgcolor="#D6D6D6" background="images/index_25.jpg" align="left" valign="top">
<p>
<font face="Verdana" color="#FFFFFF">Welcome to H2O's salon website</font></p>
<p><font color="#FFFFFF" face="Verdana">We are currently under</font></p>
<p><font color="#FFFFFF" face="Verdana">construction</font>.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p align="center">&nbsp;</td>
<td rowspan="11">
<p align="center">
<img src="images/index_26.jpg" width="5" height="374" alt=""></td>
<td>
<p align="center">
<img src="images/spacer.gif" width="1" height="11" alt=""></td>
</tr>
<tr>
<td colspan="12">
<p align="center">
<img src="images/index_27.jpg" width="240" height="29" alt=""></td>
<td>
<p align="center">
<img src="images/spacer.gif" width="1" height="29" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="2">
<p align="center">
<img src="images/index_28.jpg" width="23" height="196" alt=""></td>
<td colspan="7">
<p align="center">
<a href="gallery.html">
<img border="0" img border="0" img src="images/index_29.jpg" width="197" height="152" alt=""></a></td>
<td colspan="2" rowspan="6">
<p align="center">
<img src="images/index_30.jpg" width="20" height="256" alt=""></td>
<td>
<p align="center">
<img src="images/spacer.gif" width="1" height="152" alt=""></td>
</tr>
<tr>
<td colspan="7">
<p align="center">
<img src="images/index_31.jpg" width="197" height="44" alt=""></td>
<td>
<p align="center">
<img src="images/spacer.gif" width="1" height="44" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="4">
<p align="center">
<img src="images/index_32.jpg" width="22" height="60" alt=""></td>
<td colspan="2" rowspan="2">
<p align="center">
<a href="gallery.html">
<img border="0" img src="images/index_33.jpg" width="54" height="51" alt=""></a></td>
<td colspan="5">
<p align="center">
<img src="images/index_34.jpg" width="90" height="1" alt=""></td>
<td rowspan="2">
<p align="center">
<a href="gallery.html">
<img border="0" img src="images/index_35.jpg" width="54" height="51" alt=""></a></td>
<td>
<p align="center">
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<p align="center">
<img src="images/index_36.jpg" width="20" height="59" alt=""></td>
<td colspan="3" rowspan="2">
<p align="center">
<a href="gallery.html">
<img border="0" img src="images/index_37.jpg" width="52" height="52" alt=""></a></td>
<td rowspan="3">
<p align="center">
<img src="images/index_38.jpg" width="18" height="59" alt=""></td>
<td>
<p align="center">
<img src="images/spacer.gif" width="1" height="50" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<p align="center">
<img src="images/index_39.jpg" width="54" height="9" alt=""></td>
<td rowspan="2">
<p align="center">
<img src="images/index_40.jpg" width="54" height="9" alt=""></td>
<td>
<p align="center">
<img src="images/spacer.gif" width="1" height="2" alt=""></td>
</tr>
<tr>
<td colspan="3">
<p align="center">
<img src="images/index_41.jpg" width="52" height="7" alt=""></td>
<td>
<p align="center">
<img src="images/spacer.gif" width="1" height="7" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<p align="center">
<img src="images/index_42.jpg" width="11" height="78" alt=""></td>
<td colspan="10" rowspan="2">
<p align="center">
<a href="special.jpg">
<img border="0" img src="images/index_43.jpg" width="223" height="20" alt="" onClick="FP_goToURL(/*href*/'/special.html')"></a></td>
<td rowspan="3">
<p align="center">
<img src="images/index_44.jpg" width="6" height="78" alt=""></td>
<td>
<p align="center">
<img src="images/spacer.gif" width="1" height="15" alt=""></td>
</tr>
<tr>
<td colspan="6" rowspan="2">
<p align="center">
<img src="images/index_45.jpg" width="298" height="63" alt=""></td>
<td>
<p align="center">
<img src="images/spacer.gif" width="1" height="5" alt=""></td>
</tr>
<tr>
<td colspan="10">
<p align="center">
<img src="images/index_46.jpg" width="223" height="58" alt=""></td>
<td>
<p align="center">
<img src="images/spacer.gif" width="1" height="58" alt=""></td>
</tr>
<tr>
<td colspan="25">
<p align="center">
<img src="images/index_47.jpg" width="800" height="30" alt=""></td>
<td>
<p align="center">
<img src="images/spacer.gif" width="1" height="30" alt=""></td>
</tr>
<tr>
<td>
<p align="center">
<img src="images/spacer.gif" width="86" height="1" alt=""></td>
<td>
<p align="center">
<img src="images/spacer.gif" width="17" height="1" alt=""></td>
<td>
<p align="center">
<img src="images/spacer.gif" width="11" height="1" alt=""></td>
<td>
<p align="center">
<img src="images/spacer.gif" width="63" height="1" alt=""></td>
<td>
<p align="center">
<img src="images/spacer.gif" width="19" height="1" alt=""></td>
<td>
<p align="center">
<img src="images/spacer.gif" width="102" height="1" alt=""></td>
<td>
<p align="center">
<img src="images/spacer.gif" width="4" height="1" alt=""></td>
<td>
<p align="center">
<img src="images/spacer.gif" width="7" height="1" alt=""></td>
<td>
<p align="center">
<img src="images/spacer.gif" width="103" height="1" alt=""></td>
<td>
<p align="center">
<img src="images/spacer.gif" width="5" height="1" alt=""></td>
<td>
<p align="center">
<img src="images/spacer.gif" width="13" height="1" alt=""></td>
<td>
<p align="center">
<img src="images/spacer.gif" width="15" height="1" alt=""></td>
<td>
<p align="center">
<img src="images/spacer.gif" width="11" height="1" alt=""></td>
<td>
<p align="center">
<img src="images/spacer.gif" width="11" height="1" alt=""></td>
<td>
<p align="center">
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<p align="center">
<img src="images/spacer.gif" width="53" height="1" alt=""></td>
<td>
<p align="center">
<img src="images/spacer.gif" width="20" height="1" alt=""></td>
<td>
<p align="center">
<img src="images/spacer.gif" width="6" height="1" alt=""></td>
<td>
<p align="center">
<img src="images/spacer.gif" width="11" height="1" alt=""></td>
<td>
<p align="center">
<img src="images/spacer.gif" width="35" height="1" alt=""></td>
<td>
<p align="center">
<img src="images/spacer.gif" width="18" height="1" alt=""></td>
<td>
<p align="center">
<img src="images/spacer.gif" width="54" height="1" alt=""></td>
<td>
<p align="center">
<img src="images/spacer.gif" width="14" height="1" alt=""></td>
<td>
<p align="center">
<img src="images/spacer.gif" width="6" height="1" alt=""></td>
<td>
<p align="center">
<img src="images/spacer.gif" width="115" height="1" alt=""></td>
<td>
<p align="center">
</tr>
</table>
</body></CENTER>
<!-- End ImageReady Slices -->

</html>

The main page. The homepage was made the same way as the services page and everything else so I can't find the mistake. =/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum