PDA

View Full Version : 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 :confused:

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/dynamicindex4/indexb.html)
http://www.dynamicdrive.com/style/csslibrary/category/C4/ (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:-



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

jscheuer1
12-13-2008, 07:00 PM
http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm

froggy
12-14-2008, 12:40 PM
Thank you the code above works...excellent. Problem fixed.