JavaScript Photo Gallery

**Dameon99** · Jun 19 '07, 07:39 AM

Oh, and just so everyone knows Ive been trying to use "javascript:upd ate(" ")" but I cant see anything on how to select what it updates. If someone could even detail that i will do it myself.
Thanks!

**acoder** · Jun 19 '07, 10:38 AM

Welcome to TSDN!

Could you post some code or even some HTML.

All you'll probably require is to change the "src" attribute to the url of the thumbnail image clicked.

**Dameon99** · Jun 20 '07, 01:42 PM

The problem is that i havnt got any code to work from.
I basically just want a large image on the left that gets refreshed via small image links on the right.

**acoder** · Jun 20 '07, 02:37 PM

Ok, post your HTML then. You'll need to add onclick to the thumbnail images. Give the large image an id. Then to change the large image, try:
[CODE=javascript]document.getEle mentById('large image').src='th umbnailimagegif ';[/CODE]
The reason why you probably haven't seen the code is because they might be using what's called unobtrusive javascript (keeping js separate from the HTML). See early events and the next two pages which describe the traditional and the standardised methods of event handling.

**Logician** · Jun 21 '07, 12:05 AM

Originally posted by Dameon99

HI all,
Im a web designer from Perth, WA. My boss requires that I create a Javascript photo menu where the thumbnails, when clicked, update the large photo. Ive seen it done on various sites before but have looked through the source and there is always something missing.

I dont know much about javascript so if someone would be very kind and post the javascript I would need and some very basic instruction I would be very appreciative. I have adapted Javacript before and know java so that end shouldnt be a problem. all suggestions would be more than appreciated. :-)

See if you can follow the instructions for this.

**Dameon99** · Jun 21 '07, 03:12 AM

there isnt any html yet either.
basically the only thing on the page will be the menu.
I need intructions on how to code the large image in just as a display and how to replace it when they click on a lnk ie: what i put in the <a href> tag

**maxxblur** · Jun 21 '07, 05:50 AM

im suck with this.
<html>
<head>
<script>
function changeImage()
{
var list = document.getEle mentById('optio nlist');
document.mainim age.src = list.options[list.selectedIn dex].value;
}

function showpath() {
var pathname = location.pathna me;
pathname = pathname.substr (1,pathname.len gth);

return pathname
}
</script>
</head>
<body>
<body onLoad="javascr ipt:changeImage ()">
<?
$directory="alb um1";
$dir=opendir($d irectory);
while (false !== ($filename = readdir($dir)))
{
$files[$i] = $filename;
$i++;

//echo "<a href='$director y/$filename'>$dir ectory/$filename</a><br/>";
}
?>
<select name="optionlis t" id="optionlist " size="8" multiple="multi ple" onChange="javas cript:changeIma ge()">
<?

for($k=0;$k<$i; $k++)
{
if($k){
echo $filename[$k];}
else
?> <option value="<? echo 'album1/'.$files[$k]; ?>"><? echo $files[$k]; ?></option>
<?

}

?>

</select>
<img name="mainimage " border="1" width="100" >
<script type="text/javascript">
document.write( showpath())
</script>
</body>
</html>

pls help me how i can use that showpath fucntion to show path image when i clicked.

**acoder** · Jun 21 '07, 10:49 AM

Originally posted by maxxblur

im suck with this.
<html>
<head>
<script>
function changeImage()
{
var list = document.getEle mentById('optio nlist');
document.mainim age.src = list.options[list.selectedIn dex].value;
}

function showpath() {
var pathname = location.pathna me;
pathname = pathname.substr (1,pathname.len gth);

return pathname
}
</script>
</head>
<body>
<body onLoad="javascr ipt:changeImage ()">
<?
$directory="alb um1";
$dir=opendir($d irectory);
while (false !== ($filename = readdir($dir)))
{
$files[$i] = $filename;
$i++;

//echo "<a href='$director y/$filename'>$dir ectory/$filename</a><br/>";
}
?>
<select name="optionlis t" id="optionlist " size="8" multiple="multi ple" onChange="javas cript:changeIma ge()">
<?

for($k=0;$k<$i; $k++)
{
if($k){
echo $filename[$k];}
else
?> <option value="<? echo 'album1/'.$files[$k]; ?>"><? echo $files[$k]; ?></option>
<?

}

?>

</select>
<img name="mainimage " border="1" width="100" >
<script type="text/javascript">
document.write( showpath())
</script>
</body>
</html>

pls help me how i can use that showpath fucntion to show path image when i clicked.

Have a div/span on the page below or next to the image. In your changeImage function, add the following line:
[CODE=javascript]document.getEle mentById('divid ').innerHTML = list.options[list.selectedIn dex].value;[/CODE]

**acoder** · Jun 21 '07, 10:55 AM

Originally posted by Dameon99

there isnt any html yet either.
basically the only thing on the page will be the menu.
I need intructions on how to code the large image in just as a display and how to replace it when they click on a lnk ie: what i put in the <a href> tag

The large image would be a simple <img> tag - see link, e.g. [HTML]<img name="largeImg" id="largeImg" src="images/large.gif">[/HTML]. In your anchor tag, just add:

Code:

onclick="document.getElementById('largeImg').src='source to clicked image';

Replace 'source to clicked image' with the URL to the thumbnail image.

**Logician** · Jun 23 '07, 08:18 PM

Originally posted by Dameon99

there isnt any html yet either.
basically the only thing on the page will be the menu.
I need intructions on how to code the large image in just as a display and how to replace it when they click on a lnk ie: what i put in the <a href> tag

Do you know HTML? The large image display is just an HTML image placeholder, ditto the thumbnails, which don't even need to be part of a link.
If you do know Java, then you should have no difficulty following the instructions of any script you're given.

**Dameon99** · Jun 25 '07, 02:43 AM

Thanks all, big help. Im going to give the gallery a go today and hopefully it will work. :-).
Java isnt a scripting language btw it is OOP language. I understand html and xhtml but I was never shown how to use javascript.

**Dameon99** · Jun 25 '07, 05:05 AM

its not wking :-(.

my html code for the body is:

<P>
<BR>
<A href="http://nicolefendel.re achpoint.net/Portal/Default.aspx?ti d=15659">
<IMG src="http://nicolefendel.re achpoint.net/Data/nicolefendel/bracelets_butto n.jpg" border=0></A></P>
<P> 
<TABLE cellSpacing=1 cellPadding=1 width="100%" border=0>
<TR>
<TD style="BORDER-RIGHT: #c0c0c0 1px dotted; BORDER-TOP: #c0c0c0 1px dotted; BORDER-LEFT: #c0c0c0 1px dotted; BORDER-BOTTOM: #c0c0c0 1px dotted">
<IMG id=largeImg src="/Data/nicolefendel/br1_big.jpg" name=largeImg></TD>
<TD style="BORDER-RIGHT: #c0c0c0 1px dotted; BORDER-TOP: #c0c0c0 1px dotted; BORDER-LEFT: #c0c0c0 1px dotted; BORDER-BOTTOM: #c0c0c0 1px dotted">
<P valign="bottom" >
<TABLE style="WIDTH: 586px; HEIGHT: 134px" cellSpacing=1 cellPadding=1 width=586 border=0 valign="bottom" >
<TR>
<TD style="BORDER-RIGHT: #c0c0c0 1px dotted; BORDER-TOP: #c0c0c0 1px dotted; BORDER-LEFT: #c0c0c0 1px dotted; BORDER-BOTTOM: #c0c0c0 1px dotted">
<A onclick="docume nt.getElementBy Id('largeImg'). src='/Data/nicolefendel/br1_big.jpg';>
<P>
<IMG src="/data/nicolefendel/br4_sml.jpg">
<BR>1 - Nissy-Necklace
<BR> &nbsp ; - NFJ07A008 </A></TD>
<TD style="BORDER-RIGHT: #c0c0c0 1px dotted; BORDER-TOP: #c0c0c0 1px dotted; BORDER-LEFT: #c0c0c0 1px dotted; BORDER-BOTTOM: #c0c0c0 1px dotted">
<A onclick="docume nt.getElementBy Id('largeImg'). src='/Data/nicolefendel/br2_big.jpg';>
<IMG src="/data/nicolefendel/br2_sml.jpg">
<BR>2 - Nicky ball bracelet
<BR> &nbsp ; -NFJ07A050</A></TD>
<TD style="BORDER-RIGHT: #c0c0c0 1px dotted; BORDER-TOP: #c0c0c0 1px dotted; BORDER-LEFT: #c0c0c0 1px dotted; BORDER-BOTTOM: #c0c0c0 1px dotted">
<A onclick="docume nt.getElementBy Id('largeImg'). src='/Data/nicolefendel/br3_big.jpg';>
<IMG src="/data/nicolefendel/br3_sml.jpg">
<BR>3 - Charm Bracelet
<BR> &nbsp ; - NFJ07A051 </A></TD>
<TD style="BORDER-RIGHT: #c0c0c0 1px dotted; BORDER-TOP: #c0c0c0 1px dotted; BORDER-LEFT: #c0c0c0 1px dotted; BORDER-BOTTOM: #c0c0c0 1px dotted">
<A onclick="docume nt.getElementBy Id('largeImg'). src='/Data/nicolefendel/br4_big.jpg';>
<IMG src="/data/nicolefendel/br4_sml.jpg">
<BR>4 - Rose Bracelet
<BR> &nbsp ; - NFJ07A049 </A></TD></TR></TABLE></P></TD></TR></TABLE></P>

is there something Im supposed to put in the head?

I just cant get it to work and every time I go to view it the img tags change from :
<IMG src="/data/nicolefendel/br4_sml.jpg">
to
<IMG src=" nicolefendel br4_sml.jpg? data>. and thus I see no image and not even an error to say that the image is broken.

**Dameon99** · Jun 25 '07, 05:49 AM

dw I fixed it x-D. It was a few typo errors mixed in with the stupidity of a GUI editor we are using.
Thanks for all your help again!

**acoder** · Jun 25 '07, 11:03 AM

Originally posted by Dameon99

dw I fixed it x-D. It was a few typo errors mixed in with the stupidity of a GUI editor we are using.
Thanks for all your help again!

Glad you got finally got it working. Those typos can be annoying, though if they were in the Javascript, you'd most likely see the errors in the console.

JavaScript Photo Gallery

JavaScript Photo Gallery

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment