image potfolio

**froggy** · 12-13-2008, 10:42 AM

Hi,

I would like to do an image portfolio just like this guy... http://www.electrickeries.com/
If you enter the site and go to the array of images this is the kind of thing i'd like to do.

Basically i will have a row of thumbnail images the as the user clicks on the image a larger image is shown bellow. As the large image is shown i need the text under that image to change. As per the example website.

How can i do this? This guy has used a javascript switch function but I cannot understand how it all works.

Any help would be great.

Thank you

**Snookerman** · 12-13-2008, 11:03 AM

Take a look at Dynamic Drives library, I'm sure you'll find something:

http://www.dynamicdrive.com/dynamicindex4/indexb.html
http://www.dynamicdrive.com/style/csslibrary/category/C4/

**froggy** · 12-13-2008, 11:08 AM

thank you for you help.

I have looked at the dynamic drive links and cannot find how to do the exact kind of thing i need.

its for a friend you see that want to have his portfolio like the link i sent.

thank anyway.

**froggy** · 12-13-2008, 12:40 PM

Hey, i found some code that does what I need. Just need to know how I can change the text at the same time as the image. Any ideas? here is my code:-

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link type="text/css" href="layout.css" rel="stylesheet" media="screen" />
<title>Jim Nelson Portfolio</title>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!-- Hide this script from non-javascript-enabled browsers

/////////////////////////////////////////////////
// The swap() function constructs a file name
// based on the input parameter and then sets
// the slideshow image's source to that
// file name.
//
// Note: the initial image determines the size
// of the slideshow "frame".  Swapping to
// a larger image causes that larger image to
// be squeezed to fit the initial image "frame".
/////////////////////////////////////////////////
function swap(newImage) {

    var fileName = newImage.toString() + ".jpg"
    document.slideshow.src = fileName
}

// stop hiding -->
</SCRIPT>
</head>

<body>
<div id="container">
	<div id="mainmenu">main menu</div>
	<div id="menu">menu</div>
	<div id="thumbs">
		<INPUT type="image" src="thumb1.jpg" VALUE="Picture #1" onClick="swap('art_033')">
		<INPUT type="image" src="thumb2.jpg" VALUE="Picture #2" onClick="swap('2')">
		<INPUT type="image" src="thumb3.jpg" VALUE="Picture #3" onClick="swap('3')">
		<INPUT type="image" src="thumb1.jpg" VALUE="Picture #4" onClick="swap('4')">
		<INPUT type="image" src="thumb2.jpg" VALUE="Picture #5" onClick="swap('5')">
</CENTER>
	</div>
  <div id="show">
		<div id="image">
		<P>
		<CENTER>
		<IMG NAME="slideshow" SRC="art_055.jpg" WIDTH="467" HEIGHT="463">
		</CENTER>
		<P></div>
	</div>
	<div id="footer">
	  <p>this text to change as image clicked </p>
	</div>
</div>
</body>
</html>

**vwphillips** · 12-13-2008, 04:31 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link type="text/css" href="layout.css" rel="stylesheet" media="screen" />
<title>Jim Nelson Portfolio</title>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!-- Hide this script from non-javascript-enabled browsers

/////////////////////////////////////////////////
// The swap() function constructs a file name
// based on the input parameter and then sets
// the slideshow image's source to that
// file name.
//
// Note: the initial image determines the size
// of the slideshow "frame".  Swapping to
// a larger image causes that larger image to
// be squeezed to fit the initial image "frame".
/////////////////////////////////////////////////
function swap(newImage,txt) {

    document.slideshow.src = newImage.toString() + ".jpg"
document.getElementById('footer').getElementsByTagName('P')[0].innerHTML=txt||'';
}

// stop hiding -->
</SCRIPT>
</head>

<body>
<div id="container">
	<div id="mainmenu">main menu</div>
	<div id="menu">menu</div>
	<div id="thumbs">
		<INPUT type="image" src="thumb1.jpg" VALUE="Picture #1" onClick="swap('art_033','Text 1')">
		<INPUT type="image" src="thumb2.jpg" VALUE="Picture #2" onClick="swap('2','Text 2')">
		<INPUT type="image" src="thumb3.jpg" VALUE="Picture #3" onClick="swap('3','Text 3')">
		<INPUT type="image" src="thumb1.jpg" VALUE="Picture #4" onClick="swap('4','Text 4')">
		<INPUT type="image" src="thumb2.jpg" VALUE="Picture #5" onClick="swap('5','Text 5')">
</CENTER>
	</div>
  <div id="show">
		<div id="image">
		<P>
		<CENTER>
		<IMG NAME="slideshow" SRC="art_055.jpg" WIDTH="467" HEIGHT="463">
		</CENTER>
		<P></div>
	</div>
	<div id="footer">
	  <p>this text to change as image clicked </p>
	</div>
</div>
</body>
</html>