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
    Sep 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript Thumbnail Gallery - Problems making it work with Mozilla & Netscape

    Hello, i hope someone can point me in the right direction here.

    I'm creating a thumbnail gallery. Please see BETA version here > http://www.ljolly.com/Kilmartin%20Church%20Gallery.htm

    Everything works the way i want it to using IE6, but when tested using Firefox and Netscape, everything but the image loading works. (the text description changes fine)

    I based the script on what i found here http://www.alistapart.com/articles/imagegallery , but changed it so that the user clicks on a thumbnail instead of text.

    On doing browser check within Dreamweaver, the following 3 main errors occur

    1:The title attribute of the IMG tag is not supported
    1:The onclick attribute of the IMG tag is not supported
    1:The href attribute of the IMG tag is not supported

    Can anyone suggest as to why it won't work in Firefox or Netscape?

    Below is the code down to the first 3 thumbnails. I have highlighted the code i used from "A list apart"



    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>06 Kilmartin Church</title>
    <SCRIPT language=javascript type=text/javascript>
    function showPic (whichpic) {
    if (document.getElementById) {
    document.getElementById('placeholder').src = whichpic.href;
    if (whichpic.title) {
    document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
    } else {
    document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
    }
    return false;
    } else {
    return true;
    }
    }
    </SCRIPT>
    <style type="text/css">
    <!--
    .style1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    }
    .style2 {color: #FFFFFF}
    .style3 {color: #000000}
    a:link {
    color: #000000;
    text-decoration: none;
    }
    a:visited {
    text-decoration: none;
    color: #000000;
    }
    a:hover {
    text-decoration: none;
    color: #666666;
    }
    a:active {
    text-decoration: none;
    }
    -->
    </style>
    </head>

    <body>
    <SCRIPT language=javascript type=text/javascript>
    function showPic (whichpic) {
    if (document.getElementById) {
    document.getElementById('placeholder').src = whichpic.href;
    if (whichpic.title) {
    document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
    } else {
    document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
    }
    return false;
    } else {
    return true;
    }
    }
    </SCRIPT>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <table width="700" height="600" border="1" align="center" cellpadding="0" cellspacing="0">
    <tr>
    <td height="500" scope="col"><table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
    <td height="50" colspan="2" class="style1" scope="col"><div align="left"></div></td>
    </tr>
    <tr>
    <td width="250" height="20" class="style1" scope="col"><span class="style2">-<span class="style3">06</span></span> Kilmartin Church</td>
    <td width="350" scope="col"><P class="style1" id=desc>Kilmartin Church - Gallery 06 of 10</P></td>
    </tr>
    <tr>
    <td width="250" height="175" scope="col"><table width="148" height="338" border="0" align="left" cellpadding="0" cellspacing="4">
    <tr>
    <td width="40" height="40" scope="col"><img src="Kilmartin%20Church/Kilmartin-1T.jpg" width="40" height="40" title="Kilmartin 1" onclick="return showPic(this)" href="http://www.ljolly.com/Kilmartin Church/Kilmartin-1.jpg"></td>
    <td width="40" height="40" scope="col"><img src="Kilmartin%20Church/Kilmartin-2T.jpg" width="40" height="40" title="Kilmartin 2" onclick="return showPic(this)" href="http://www.ljolly.com/Kilmartin Church/Kilmartin-2.jpg"></td>
    <td width="40" height="40" scope="col"><img src="Kilmartin%20Church/Kilmartin-3T.jpg" width="40" height="40" title="Kilmartin 3" onclick="return showPic(this)" href="http://www.ljolly.com/Kilmartin Church/Kilmartin-3.jpg"></td>
    </tr>
    The script for the image placeholder is below and is contained further down the HTML (i didnt want to quote the entire html code for obvious reasons)


    <IMG src="Kilmartin%20Church/blank.gif" alt="" id=placeholder></td>


    Many thanks

    Lewis

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Why is showPic() function duplicate? Remove the other one.

    Javacript:
    Code:
    function showPic (whichpic) {
      if (document.getElementById) {
        document.getElementById('placeholder').src = whichpic.href;
        if (whichpic.title) {
          document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
        } else {
          document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
        }
        return false;
      } else {
        return true;
      }
    }
    HTML:
    Code:
    <a href="Kilmartin Church/Kilmartin-5.jpg" onclick="return showPic(this)" title="Kilmartin 5"><img class="thumb" src="Kilmartin%20Church/Kilmartin-5T.jpg" alt="Kilmartin 5" /></a>
    CSS:
    Code:
    a img {
      border: none;
    }
    .thumb{
      width:40px;
      height:40px;
    }

  • #3
    New to the CF scene
    Join Date
    Sep 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    @glenngv

    Absolutely brilliant! Works cross browser with no browser check errors. I realized after i posted that it wasn't really to do with the javascript code, more of a (badly written!) HTML problem.

    Thanks very much.


  •  

    Posting Permissions

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