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 7 of 7
  1. #1
    New Coder
    Join Date
    Apr 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    What will return filename of last image clicked?

    I am trying to capture and display the filename of the last image clicked. I have a routine that combines JavaScript and PHP to change out an image preview by clicking on thumbnails (all done with one page), but I can't figure out how to change the text below the preview to match the file name of the last image clicked. Is there a way in JavaScript to retrieve and display the Last Image Clicked filename (without refreshing the page)?

    Sample of my gallery so far - just one page, two folders of images and the php automatically catalogs the folders to make the gallery on-the-fly.

    Sample Gallery #1

    Full code below-------------

    Code:
    function changeImage(filename)
    {
    document.mainimage.src = filename;
    }
    </script>
    </head>
    <body bgcolor="#808080">
    
    <div style="overflow:auto; width:100%; height:190px;">
    <table width="100%"  border="0" cellspacing="0" cellpadding="2">
    <tr>
    
    
    
    <?php
    $pathth = "thumbnails/";
    $path = "images/";
    
    if (strrpos($moverse,'..')) {
     $moverse = str_replace('/..','',$moverse);
     $moverse = substr($moverse,0,strrpos($moverse,'/'));
    }
    
    if($moverse) $moverse = $moverse."/";
    
    echo $moverse.'<br>';
    
    $handle=opendir($path.$moverse);
    
    while ($file = readdir($handle)) {
    if(is_dir($path.$moverse.$file) && $file != ".") {
        if ($file == ".." && $moverse == "") {
       
        } else {
            echo '
            <td><a href="javascript:changeImage.(\''.$moverse.$file.'\')"><img border="0" 
    
    src="'.$pathth.$moverse.$file.'" class="images"> '.$moverse.$file.' </a></td>';
    
        }
    } else if ($file != ".") {
        echo '
        <td><a href="javascript:changeImage(\''.$path.$moverse.$file.'\')"><img border="0" 
    
    src="'.$pathth.$moverse.$file.'" class="images"> '.$moverse.$file.' </a></td>';
    }
    }
    
    
    
    ?> 
    
    </tr>
    </table>
    </div>
    
    <p align="center"> <img name="mainimage" src="images/001.gif" width="400" height="300"></p>
    
    <script>
    document.write(mainimage.src)
    
    </script>
    
    <p align="center"> 
    Image's name or number here
    </p>
    Last edited by jims; 04-17-2005 at 05:33 PM.

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    Edinburgh, UK
    Posts
    402
    Thanks
    2
    Thanked 1 Time in 1 Post
    Have a go at trying this, I haven't had chance to test it myself, but you've got the images so it'll work better with your system:

    Code:
    function changeImage(filename)
    {
    document.mainimage.src = filename;
    docWrite(filename);
    }
    </script>
    </head>
    <body bgcolor="#808080" onLoad="docWrite('Default message goes here');">
    
    <div style="overflow:auto; width:100%; height:190px;">
    <table width="100%"  border="0" cellspacing="0" cellpadding="2">
    <tr>
    
    
    
    <?php
    $pathth = "thumbnails/";
    $path = "images/";
    
    if (strrpos($moverse,'..')) {
     $moverse = str_replace('/..','',$moverse);
     $moverse = substr($moverse,0,strrpos($moverse,'/'));
    }
    
    if($moverse) $moverse = $moverse."/";
    
    echo $moverse.'<br>';
    
    $handle=opendir($path.$moverse);
    
    while ($file = readdir($handle)) {
    if(is_dir($path.$moverse.$file) && $file != ".") {
        if ($file == ".." && $moverse == "") {
       
        } else {
            echo '
            <td><a href="javascript:changeImage.(\''.$moverse.$file.'\')"><img border="0" 
    
    src="'.$pathth.$moverse.$file.'" class="images"> '.$moverse.$file.' </a></td>';
    
        }
    } else if ($file != ".") {
        echo '
        <td><a href="javascript:changeImage(\''.$path.$moverse.$file.'\')"><img border="0" 
    
    src="'.$pathth.$moverse.$file.'" class="images"> '.$moverse.$file.' </a></td>';
    }
    }
    
    echo($moverse.$file)
    
    ?> 
    
    </tr>
    </table>
    </div>
    
    <p align="center"> <img name="mainimage" src="images/001.gif" width="400" height="300"></p>
    
    <p align="center"> 
    <script>
    function docWrite(what){
    	document.write(what);
    }
    </script>
    </p>
    Rich

    "An expert is a person who has made all the mistakes that can be made in a very narrow field."

  • #3
    New Coder
    Join Date
    Apr 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for the example you provided. I am not as familiar with JavaScript as I am with other forms of programming, so I wanted to ask you what this part of the script is actually doing...

    <script>
    function docWrite(what){
    document.write(what);
    }
    </script>

    Do I need to fill in a value for - "(what)" or does that relate to something else in the script you provided?

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    Edinburgh, UK
    Posts
    402
    Thanks
    2
    Thanked 1 Time in 1 Post
    Basically the script is designed to take an attribute (a string of text), which it stores in the variable what. This is then printed to the page.

    If you look at your original script to change the src of the image, I've the extra line docWrite(filename), so this will call the function docWrite with the text from filename, and thus write out the filename you change it to.

    Because you might have wanted a default message to appear, I added another call to the function docWrite within the body tag, which you can change the string passed to whatever you want.

    I hope this makes sense, but if not let me know and I'll try and explain better
    Rich

    "An expert is a person who has made all the mistakes that can be made in a very narrow field."

  • #5
    New Coder
    Join Date
    Apr 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the response. I have been testing the additions to the code that you provided and I have tried some variations of it as well. I put up the original version you posted with the gallery of images. (example below)
    gallery 8 test
    The gallery background flashes onscreen for a second and then a white screen with just the default text appears. It looks like the docwrite function is re-displaying the page with just the default text (I left the text as you posted it). I also tried putting the code at the bottom of the page and got the same results. I also tried deleting the line of code with onLoad="docWrite('Default message goes here')"; (example below)
    gallery 9 test
    This displays the gallery until you click. Then the filename is displayed, but the gallery disappears and the screen is white with only the text of the filename.

    In addition to these tests (and many variations of the ones above) I have also tried to use a block of php to echo the variable onscreen, so that when you change the image the text of the filename changes. I don't get any errors, but the text area always comes up blank.

  • #6
    New Coder
    Join Date
    Apr 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I got some code examples and added them to the existing code, you can see the final results at:

    http://jsinteractive.com/gallery/php-gallery11.php

    I still need help sorting the routine and I will be done.

    Thanks for the help all...

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    document.all and innerText are for IE only. If you want it to work with major browsers, you need to change it to:

    document.getElementById("textplaceholder").innerHTML = filename;


  •  

    Posting Permissions

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