JavaScript Photo Gallery

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

Jun 19 '07 #1

Subscribe Post Reply

5422

Dameon99

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

Jun 19 '07 #2

acoder

16,027

Expert Mod 8TB

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.

Jun 19 '07 #3

Dameon99

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.

Jun 20 '07 #4

acoder

16,027

Expert Mod 8TB

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:

Expand|Select|Wrap|Line Numbers

document.getElementById('largeimage').src='thumbnailimagegif';

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.

Jun 20 '07 #5

Logician

210

100+

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.

Jun 21 '07 #6

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

Jun 21 '07 #7

maxxblur

im suck with this.
<html>
<head>
<script>
function changeImage()
{
var list = document.getElementById('optionlist');
document.mainimage.src = list.options[list.selectedIndex].value;
}

function showpath() {
var pathname = location.pathname;
pathname = pathname.substr(1,pathname.length);

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

//echo "<a href='$directory/$filename'>$directory/$filename</a><br/>";
}
?>
<select name="optionlist" id="optionlist" size="8" multiple="multiple" onChange="javascript:changeImage()">
<?

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.

Jun 21 '07 #8

acoder

16,027

Expert Mod 8TB

im suck with this.
<html>
<head>
<script>
function changeImage()
{
var list = document.getElementById('optionlist');
document.mainimage.src = list.options[list.selectedIndex].value;
}

function showpath() {
var pathname = location.pathname;
pathname = pathname.substr(1,pathname.length);

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

//echo "<a href='$directory/$filename'>$directory/$filename</a><br/>";
}
?>
<select name="optionlist" id="optionlist" size="8" multiple="multiple" onChange="javascript:changeImage()">
<?

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:

Expand|Select|Wrap|Line Numbers

 document.getElementById('divid').innerHTML = list.options[list.selectedIndex].value;
 

Jun 21 '07 #9

acoder

16,027

Expert Mod 8TB

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:

Expand|Select|Wrap|Line Numbers

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

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

Jun 21 '07 #10

Logician

210

100+

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.

Jun 23 '07 #11

Dameon99

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.

Jun 25 '07 #12

Dameon99

its not wking :-(.

my html code for the body is:

<P>
<BR>
<A href="http://nicolefendel.reachpoint.net/Portal/Default.aspx?tid=15659">
<IMG src="http://nicolefendel.reachpoint.net/Data/nicolefendel/bracelets_button.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="document.getElementById('largeImg').src='/Data/nicolefendel/br1_big.jpg';>
<P>
<IMG src="/data/nicolefendel/br4_sml.jpg">
<BR>1 - Nissy-Necklace
<BR>   - 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="document.getElementById('largeImg').src='/Data/nicolefendel/br2_big.jpg';>
<IMG src="/data/nicolefendel/br2_sml.jpg">
<BR>2 - Nicky ball bracelet
<BR>   -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="document.getElementById('largeImg').src='/Data/nicolefendel/br3_big.jpg';>
<IMG src="/data/nicolefendel/br3_sml.jpg">
<BR>3 - Charm Bracelet
<BR>   - 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="document.getElementById('largeImg').src='/Data/nicolefendel/br4_big.jpg';>
<IMG src="/data/nicolefendel/br4_sml.jpg">
<BR>4 - Rose Bracelet
<BR>   - 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.

Jun 25 '07 #13

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!

Jun 25 '07 #14

acoder

16,027

Expert Mod 8TB

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.

Jun 25 '07 #15

Dameon99

lol yeh, the typos were mainly in my html code.
I havnt got much exp at all with javascript except mouse over commands.
Is there anywhere online that has a good extensive free tutorial on javascript or should i maybe just go fetch a book?

Jun 28 '07 #16

acoder

16,027

Expert Mod 8TB

The W3Schools tutorial is pretty good. Also, check out other links in the Offsite Links sticky thread at the top of this forum.

Jun 28 '07 #17

by: matt | last post by:

I have this code, works perfectly on Windows server, but now i'm trying to run it on a Linux server, the form submits, i get no errors, but the photo doesnt upload, and the caption file doesnt...

PHP

Photo Gallery with centered photos and text

by: Eric Lindsay | last post by:

I would like to do a photo gallery with a liquid layout. I wanted to center a caption below each photo (or above each photo). I can do that easily with tables, but then I don't have a liquid...

HTML / CSS

CSS MENU and CSS photo gallery

by: desjardins.daniel | last post by:

Hi ! Excuse my english, i'm a french canadien... So here my message : I have put on my site a photo gallery and at the right a nav menu. This menu has a red dot visible want someone is passing...

Javascript

Static photoblogger or photo gallery script wanted

by: Throw | last post by:

G'day everyone I'm looking for a simple photo gallery script in PHP (or Perl), but not too simple. I have tried several photo gallery scripts in either language and I have found that they are...

PHP

JavaScript photo gallery

by: MZ | last post by:

Hi, I am looking for a universal solution to create a photo gallery from files which are laying in a folders fullsize and smallsize. The smallsize files are the thumbnails of the fullsize JPG...

Javascript

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

JavaScript Photo Gallery

Similar topics