SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    PA
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image Gallery not working in Mozilla?!?!?!

    Ok, I whipped up a little image gallery thing ala eBay, and it looks pretty good. Basically, I have one large image with thumbnails underneath. When you click on the thumbnail it should replace the image in the large window. With that said, it works like a charm in IE, but in Mozilla and Netscape only the images show, they do not swap out.

    I have 4 divs sitting on top of each other and a little javascript thing to change their visibility.

    www.evolutionmsport.com/image.php

    The code is below:


    <?php require_once("phpconfig/dbConfig.php") ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Evolution Motorsport</title>
    <link href="<?php echo $dd_Site."common/evm.css"?>" rel="stylesheet" type="text/css" />
    <link href="<?php echo $dd_Site."common/evmtext.css"?>" rel="stylesheet" type="text/css" />
    <script language="JavaScript" src="java/menu.js" type="text/javascript"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />





    <style>
    #ImageContainer{
    position:relative;
    width:412px;height:262px;
    padding:5px;
    margin:0px;
    border:1px solid #000;
    }

    #image1, #image2, #image3, #image4 {
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-125px;
    width:400px;
    height:250px;
    margin-left: -200px;
    visibility:hidden;
    }

    #tnContainer{
    position:relative;
    width:450;
    clear:both;
    padding:5px 0px;
    margin:0px;
    }
    #evmGallery{
    padding:10px;
    position:relative;
    }

    </style>



    </head>
    <body>
    <?php $ProdImage="watts";
    $imgType="jpg";?>

    <?php echo $dd_Site."images/".$ProdImage."3.".$imgType;?>

    <div id="evmGallery">
    <div id="ImageContainer">
    <div id="image1" style="visibility:visible;"><img src="<?php echo $dd_Site."images/".$ProdImage."1.".$imgType; ?>" width="400" height="250" border="0"></div>
    <div id="image2"><img src="<?php echo $dd_Site."images/".$ProdImage."2.".$imgType; ?>" width="400" height="250" border="0"></div>
    <div id="image3"><img src="<?php echo $dd_Site."images/".$ProdImage."3.".$imgType; ?>" width="400" height="250" border="0"></div>
    <div id="image4"><img src="<?php echo $dd_Site."images/".$ProdImage."4.".$imgType; ?>" width="400" height="250" border="0"></div>
    </div>
    <div id="tnContainer">
    <a href="javascript:void(null);" onClick="show(image1);hide(image2);hide(image3);hide(image4)" style="text-decoration:none"><img src="<?php echo $dd_Site."/images/tn_".$ProdImage."1.".$imgType;?>" width="100" height="63" border="1" style="float:left;margin-right:5px;"></a>
    <a href="javascript:void(null);" onClick="show(image2);hide(image1);hide(image3);hide(image4)" style="text-decoration:none"><img src="<?php echo $dd_Site."/images/tn_".$ProdImage."2.".$imgType;?>" width="100" height="63" border="1" style="float:left;margin-right:5px;"></a>
    <a href="javascript:void(null);" onClick="show(image3);hide(image2);hide(image1);hide(image4)" style="text-decoration:none"><img src="<?php echo $dd_Site."images/tn_".$ProdImage."3.".$imgType;?>" width="100" height="63" border="1" style="float:left;margin-right:5px;"></a>
    <a href="javascript:void(null);" onClick="show(image4);hide(image2);hide(image3);hide(image1)" style="text-decoration:none"><img src="<?php echo $dd_Site."/images/tn_".$ProdImage."4.".$imgType;?>" width="100" height="63" border="1" style="float:left;margin-right:5px;"></a>
    </div>
    </div>
    </body>
    </html>

    Shouldn’t this work in Mozilla, or do I have to make a special setting somewhere? I am not a javascript expert, but it seems like I am doing something simple????

    Does anyone have any ideas?

    Thanks….Mike
    Evolution Motorsport
    The Performance Company

  2. #2
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Southampton, England
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your show and hide functions should read something like:

    function show(imgId) {

    document.getElementById(imgId).style.visibility = 'visible';
    }

    function hide(imgId) {

    document.getElementById(imgId).style.visibility = 'hidden';
    }

    You haven't shown here but i assume that you are not using 'document.getElementById()' which is required by Mozilla and Netscape (and most other browsers actually).

    The reason your code works in IE is that IE uses 'lazy' javascript parsing, in other words it lets you get away with lazy coding that other browsers wouldn't.

    If that wasn't the problem can you please post your javascript code so we can have a more detailed look.

    Hope that helps,
    AjC

    Edit: Corrected multiple javascript errors

  3. #3
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    PA
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ajc803
    Your show and hide functions should read something like:

    function show(imgId) {

    document.getElementById(imgId).style.visibility = 'visible';
    }

    function hide(imgId) {

    document.getElementById(imgId).style.visibility = 'hidden';
    }

    You haven't shown here but i assume that you are not using 'document.getElementById()' which is required by Mozilla and Netscape (and most other browsers actually).

    The reason your code works in IE is that IE uses 'lazy' javascript parsing, in other words it lets you get away with lazy coding that other browsers wouldn't.

    If that wasn't the problem can you please post your javascript code so we can have a more detailed look.

    Hope that helps,
    AjC

    Edit: Corrected multiple javascript errors
    Yeah I just realized I never posted my code:

    Code:
    //</XMLCDATA>
    <!--// image stuff
    function show(layerid) {
    if (document.all){
    layerid.style.visibility="visible"
    }
    else
    if(document.layers){
    layerid.visibility="show"
    }
    } 
    function hide(layerid){ 
    if (document.all){ 
    layerid.style.visibility="hidden"
    }
    else
    if(document.layers){
    layerid.visibility="hide"
    }
    } 
    //-->
    I tried your code and it didn't seem to work in either browser. From surfing I thingk the document.all thing is causing problems. With that said, I have no clue how to fix it....

    Thanks...Mike
    Last edited by EvM-Mike; Aug 25, 2004 at 05:44. Reason: Tried code suggestion.
    Evolution Motorsport
    The Performance Company

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Southampton, England
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try something like this to begin with, then you could work your way up to how you need it.

    HTML Code:
     <html>
     <head>
     
     <script type="text/javascript">
     
     function changeImg(iSrc) {
     
       document.getElementById('mainImg').src = iSrc;
     }
     
     </script>
     
     </head>
     <body>
     
     <table width="80%" height="80%">
       <tr align="center">
     	<td colspan="3">
     
     <img id="mainImg" src="1.jpg" />
     
     	</td>
       </tr>
       <tr align="center">
     	<td>
     
     <img src="1.jpg" style="cursor: pointer;" onclick="changeImg('1.jpg');" />
     
     	</td>
     	<td>
     
     <img src="2.jpg" style="cursor: pointer;" onclick="changeImg('2.jpg');" />
     
     	</td>
     	<td>
     
     <img src="3.jpg" style="cursor: pointer;" onclick="changeImg('3.jpg');" />
     
     	</td>
       </tr>
     </table>
     
     </body>
     </html>
    Hope this one helps,
    AjC

  5. #5
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    PA
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ajc803
    Try something like this to begin with, then you could work your way up to how you need it.
    Hope this one helps,
    AjC

    Thanks for the code. I will give this a try. I also tried this, but it didn't work either.

    Code:
    function show(layerid) {
    
    layerid.style.visibility="visible"
    }
    
    function hide(layerid){ 
    
    layerid.style.visibility="hidden"
    }

    Thanks, I will let you know if I get it working.

    Mike
    Evolution Motorsport
    The Performance Company

  6. #6
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    PA
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    AjC,

    Thanks for the help, i took what you gave me and ended up with this:

    www.evolutionmsport.com/image2.php

    and in action:

    http://www.evolutionmsport.com/evmCa...products_id=1#

    There is still a little flakiness, but it is almost there.

    Thanks again for your help.....Mike
    Evolution Motorsport
    The Performance Company

  7. #7
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Southampton, England
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why have you got your clickable images inside <a> tags? If it is for the change of cursor you can use:
    style="cursor: pointer;"

    Apart from that the script and site looks great,
    AjC

  8. #8
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    PA
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ajc803
    Why have you got your clickable images inside <a> tags? If it is for the change of cursor you can use:
    style="cursor: pointer;"

    Apart from that the script and site looks great,
    AjC

    Hmmm....I will have to fix that...I was editing this at work, so I had to do it fast and stealth like....I will see if I can fix it.

    Thanks for the comments on the site. I still have a ways to go, but it is getting there.

    Thanks....Mike
    Evolution Motorsport
    The Performance Company

  9. #9
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    PA
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EvM-Mike
    Hmmm....I will have to fix that...I was editing this at work, so I had to do it fast and stealth like....I will see if I can fix it.

    Thanks....Mike
    Got it fixed, now its working perfectly....Thanks again for all the help....

    Mike
    Evolution Motorsport
    The Performance Company


Bookmarks

Posting Permissions

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