SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot Websiteguy's Avatar
    Join Date
    Nov 2007
    Location
    Oshkosh, Wisconsin
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    script not working in FireFox and Safari

    I am using a script I found for loading larger images into a div when clicking on a thumbnail link. This works fine in IE7, but does not allow the image to appear in the div on FireFox and Safari.

    I have tried several variations after doing some research on the W3C standards and am still having the same problem. It originally used document.all, but I removed that. It also had some fade filter functions, but I also removed that to try and simplify it.

    The code:
    Code:
    <script language="JavaScript">
    // Gallery script.
    // With image cross fade effect for those browsers that support it.
    // Script copyright (C) 2004 www.cryer.co.uk.
    // Script is free to use provided this copyright header is included.
    function LoadGallery(pictureName,imageFile)
    {
      document.getElementById(pictureName).src = imageFile;
    }
    </script>
    
    
    </head>
    The html:
    HTML Code:
    <div id="slideshow">
      <div id="scroll"><a href="#_self" onclick="LoadGallery('holder', 'images/house-back1-lg.jpg')"><img src="images/house-back1-th.jpg" /></a><a href="#_self" onclick="LoadGallery('holder', 'images/house-back3-lg.jpg')"><img src="images/house-back3-th.jpg" /></a><a href="#_self" onclick="LoadGallery('holder', 'images/Beach-lg.jpg')"><img src="images/Beach-th.jpg" /></a><a href="#_self" onclick="LoadGallery('holder', 'images/beach-cple-lg.jpg')"><img src="images/beach-cple-th.jpg" /></a><a href="#_self" onclick="LoadGallery('holder', 'images/LapPool-lg.jpg')"><img src="images/LapPool-th.jpg" /></a><a href="#_self" onclick="LoadGallery('holder', 'images/Sunset-lg.jpg')"><img src="images/Sunset-th.jpg" /></a><a href="#_self" onclick="LoadGallery('holder', 'images/house-front-lg.jpg')"><img src="images/house-front-th.jpg" /></a><a href="#_self" onclick="LoadGallery('holder', 'images/beachpath-lg.jpg')"><img src="images/beachpath-th.jpg" /></a><a href="#_self" onclick="LoadGallery('holder', 'images/sunrise-lg.jpg')"><img src="images/sunrise-th.jpg" /></a></div>
      <div id="bigimage"><img name="holder" src="images/house-back1-lg.jpg" width="452" height="289" alt="Picture of Villa La Fiaca" /></div>
    </div>
    Sorry for all the images to filter through in the div, but I wanted to give you the whole picture.

    I would appreciate any help on how to make this work in all browsers.

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,140
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)

    image swap

    Try
    HTML Code:
    function LoadGallery(pictureName,imageFile)
    {
       var picName = document.getElementById(pictureName);
       picName.src = imageFile;
    }
    and I think the page may be reloading. Try changing the "#_self"s to ""
    Or maybe add some return false-s ie.
    HTML Code:
    onclick="LoadGallery('holder', 'images/house-back1-lg.jpg'); return false;"
    Or better yet, replace the <a>s with <span>s.

  3. #3
    SitePoint Zealot Websiteguy's Avatar
    Join Date
    Nov 2007
    Location
    Oshkosh, Wisconsin
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, but nothing seemed to make a difference in FF. I replaced my script with yours, and it still worked in IE, but not FF.

    I also tried the onclick suggestions.

    This is the original code I used before modifying it if that will shed some light on things.


    <script language="JavaScript">
    // Gallery script.
    // With image cross fade effect for those browsers that support it.
    // Script copyright (C) 2004 www.cryer.co.uk.
    // Script is free to use provided this copyright header is included.
    function LoadGallery(pictureName,imageFile,titleCaption,captionText)
    {
    if (document.all)
    {
    document.getElementById(pictureName).style.filter="blendTrans(duration=1)";
    document.getElementById(pictureName).filters.blendTrans.Apply();
    }
    document.getElementById(pictureName).src = imageFile;
    if (document.all)
    {
    document.getElementById(pictureName).filters.blendTrans.Play();
    }
    document.getElementById(titleCaption).innerHTML=captionText;
    }
    </script>

  4. #4
    SitePoint Zealot Websiteguy's Avatar
    Join Date
    Nov 2007
    Location
    Oshkosh, Wisconsin
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got it figured out.

    I changed <div id="bigimage"><img name="holder" to
    <div id="bigimage"><img id="holder"

    Thanks again for your help!

  5. #5
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,140
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)

    name - id

    I'm glad you got it sorted. I didn't notice that, but yes, some browsers treat "names" as "ids" and some don't.


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
  •