Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Gallery is not working. Pictures don't load.

    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
    -----------------------------------------------------------------------

    Code:
    <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.
    Last edited by venegal; 08-14-2011 at 07:19 AM. Reason: removed URLs

  • #2
    New Coder
    Join Date
    May 2009
    Location
    LA, USA
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?
    Code:
    </script>
    <CENTER>
    <script language="JavaScript">
    Ken
    Last edited by VIPStephan; 08-14-2011 at 04:08 PM. Reason: removed spam link

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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..)

    PHP Code:
    <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-imageurl();
    }
    -->
    </
    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_imgsd.FP_imgs=new Array();
     for(var 
    i=0i<a.lengthi++) { d.FP_imgs[i]=new Imaged.FP_imgs[i].src=a[i]; }
    }

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

    function 
    FP_getObjectByID(id,o) {//v1.0
     
    var c,el,els,f,m,n; if(!o)o=document; if(o.getElementByIdel=o.getElementById(id);
     else if(
    o.layersc=o.layers; else if(o.allel=o.all[id]; if(el) return el;
     if(
    o.id==id || o.name==id) return o; if(o.childNodesc=o.childNodes; if(c)
     for(
    n=0n<c.lengthn++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
     
    f=o.forms; if(f) for(n=0n<f.lengthn++) { els=f[n].elements;
     for(
    m=0m<els.lengthm++){ 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.$srcelm.$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. =/
    Last edited by paradoxcvx; 05-30-2009 at 12:27 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •