What will return filename of last image clicked?

jims

04-16-2005, 01:15 PM

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 (http://jsinteractive.com/gallery/php-gallery5.php)

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

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>

Badman3k

04-16-2005, 03:08 PM

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:

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>

jims

04-16-2005, 05:18 PM

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?

Badman3k

04-17-2005, 12:17 AM

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 :thumbsup:

jims

04-17-2005, 05:31 PM

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 (http://jsinteractive.com/gallery/php-gallery8.php)
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 (http://jsinteractive.com/gallery/php-gallery9.php)
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.

jims

04-18-2005, 12:19 AM

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...

glenngv

04-18-2005, 06:11 AM

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;