how do I...

**TBanks** · Feb 8, 2003, 13:55

I'm interested in building a page to display photos. I want thumbnails on one side and a space (frame, table???) on the other where each thumbnail is displayed in a larger format as you click on them - similar to a slideshow.

any suggestions on how to do this (or tutorials...)

I use DW4 and have a working knowledge of HTML.

thanks

Toni

**Troy1960** · Feb 8, 2003, 14:19

I'd suggest to use a cgi script so it could make it a little easier for you. Check out

http://www.cgi-resources.com/Program...mage_Indexing/

if you need some personal help getting this started simply PM me.

**TBanks** · Feb 8, 2003, 15:45

thanks for the reference - I'm wondering though, is there a way to do it client-side? I don't really want to deal with the server-side stuff (aside from FTPing the files to the server!) if I can avoid it.

The scipts look like they will do something similar to Photoshop's gallery feature (it will create a gallery of thumbnails for you with the large pic layout - it just LOOKS kind of preformatted, so I wanted something that has a bit more versatility and control - I just don't know how to go about it from scratch.

Toni

**makeda** · Feb 10, 2003, 12:13

Yeah, all you need to do is change the src attribute of the <img> tag on the fly. Pretty easy to do. You would need to post some code in the JS forum for a more robust solution but in pseudo code:

1. write a function which changes the src attribute on the img tag on the frame you want (DOM).

2. have each link pass your function the source name you want to display.

3. watch the image change.

**TBanks** · Feb 10, 2003, 20:32

thanks for the post - unfortunately I know about *this* much javascript - though I think I kinda understand what you're saying.

can you point me to a tutorial or maybe even give me an idea of how difficult something like this would be to learn? I certainly can cut and paste and figure out where to insert stuff into my HTML code if I have an example to follow - I just don't know where to look

I have a working knowledge of HTML and can use DW - just haven't gotten to the scripting part yet. Also, I've been able to get some pre-made scripts to run for me...

thanks

Toni

**Tobi** · Feb 11, 2003, 10:54

Sorry for mistakes (i'm Polish)

Code:

<html>
<head>
<script language="javascript">
function changePict(pict){
document.pictToChange.src=pict
}
</script>
</head>
<body>
<table width="50" border="0" cellspacing="5" cellpadding="0" style="float: left">
<tr><td><a href="#" onClick="changePict('1.bmp')"><img src="1.bmp" width="10" height="10" border="0"></a></td></tr>
<tr><td><a href="#" onClick="changePict('2.bmp')"><img src="2.bmp" width="10" height="10" border="0"></a></td></tr>
</table>
<img src="1.bmp" name="pictToChange" width="300" height="300">
</body>
</html>

Just click one of the pictures in the table (on the left side of the page). If you don't know, how to add your own pictures, mail me: dtvwv@op.pl.

**TBanks** · Feb 11, 2003, 11:41

cool - I'll give it a go

Toni

**TBanks** · Feb 11, 2003, 11:41

thanks!!

**makeda** · Feb 12, 2003, 08:51

Err, I think you might need some id's to get to the image. Something like:

Code:

function swapIt(sPicSrc) {
/*
if you always know which picture you will be changing, hardcode it, otherwise pass it in as another parameter
*/
parent.frames["yourFrameName"].document.yourImageName.src = sPicSrc
}

<a href="javascript:swapIt("newImage.gif")">click me</a>
<img name="yourImageName" id="yourImageName" scr="" />

Also, you might want to preload the images. You can find out how to do that in the JS forum.

The SitePoint Forums have moved.

User Tag List

Thread: how do I...

Thread Tools

Display

how do I...

Bookmarks

Bookmarks

Posting Permissions