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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    swap images when clicking on thumbs

    So I have no javascript experiance, but this site came well recomended. Forgive me if I say something incorrectly, I'm still learning.

    I have a thumbnail gallery script in php that I'm trying to combine with a java tutorial I found at http://www.alistapart.com/articles/imagegallery/ to create a page that displays a full size image in a table when the thumbnail is clicked on.
    The page has a table split into two columns. The left column contains the php code for generating the thumbnail gallery and the right column is where I'm trying to display the picture.

    The example I'm trying to make work is http://www.arch13.com/galtest3.php

    The page uses this funtion in it's head(er):
    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;
     }
    }
    I don't need the title stuff, but don't know which lines of code to erase

    The image placeholder (swaped) is:
    Code:
    <img id="placeholder" src="imgs/blank.gif" alt="" />
    and I tried this as the onclick action for the images in the thumb table:
    Code:
    <a onClick="return showPic(this)" href="imgs/<?php echo $file;?>"><? echo "<img src='imgs/thumbs/$file' class='popimage'></a>
    I can't seem to find what I've done wrong and have no experiance ever using client side scripting. Heck, I muddle through php with the help of tutorials.

    Am I missing something obvious to the trained eye?
    I think the function is working fine, and the problem is in the onclick action link (The php thumb script replaces <?php echo $file;?> with the file name for each thumb).
    I'm using firefox 1.0. When I click on an image, it seems to work for a moment, then just displays the image directly in the browser window instead.
    How can I have it swap into the right hand table and replace the placeholder image?

    I hope I gave enough information to be clear about what the problem I'm having is.

  • #2
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tried another tactic while waiting for any replies.

    I used
    Code:
    <img src='imgs/rail_def.jpg' name='master'>
    as the dynamic image in the right column

    Then I used the following in the php thumb gallery code:
    Code:
    <a href="#" onClick="document.master.src='imgs/<?php echo $file;?>';"  class="popimage"> <? echo "<img src='imgs/thumbs/$file' class='popimage'></a>
    No function script in the page header. Am I wrong in thinking that the function of document.master needs to be defined so that onclick knows to swap the image with the clicked image in the generated code?

    The page with this idea is here:
    http://www.arch13.com/galtest4.php

    This attempt just dies in parse errors instead. Oh well.

    My php gallery script builds the tables correctly using the code in the first post, it's the onclick behaviour that doesn't want to co-operate. I slimmed down the function to the following (removing the title stuff based on what I've been learning:
    Code:
    function showPic (whichpic) {
     if (document.getElementById) {
      document.getElementById('placeholder')
      .src = whichpic.href;
     }
    }
    and the onclick code remains the same, but I cannot get the onclick behaviour to function correctly. The thumbnails are stil linking directly to the images instead of using
    Code:
    return showPic(this)
    to swap the image into the page.

    Can anyone see what I'm doing wrong here?


  •  

    Posting Permissions

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