Image Gallery Help

JavaScript
1

Hi, I’m trying to create a basic image gallery. I’m a newb at javascript so please go easy on me :slight_smile:

I have one big “active” image and 4 thumbs. When you click a thumb, the active image should be replaced. Here’s what I’ve done so far but I’m stumped.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title>gallery</title>

<script type='text/javascript'>

window.onload=function()
{
	var activeImg = document.getElementById('active');

	var imageOne = document.getElementById('imgone');
	var imageTwo = document.getElementById('imgtwo');
	var imageThree = document.getElementById('imgthree');
	var imageFour = document.getElementById('imgfour');

	imageOne.onclick=function()
	{
		this.activeImg.src = image1.jpg;
	}

	imageTwo.onclick=function()
	{
		this.activeImg.src = image2.jpg;
	}

	imageThree.onclick=function()
	{
		this.activeImg.src = image3.jpg;
	}

	imageFour.onclick=function()
	{
		this.activeImg.src = image4.jpg;
	}
}



</script>

</head>
<body>
<table>
 <tr>
  <td colspan="4"><img src="image1.jpg" id="active" /></td>
 </tr>

 <tr>
  <td><img src="image1_thumb.jpg" id="imgone" /></td>
  <td><img src="image2_thumb.jpg" id="imgtwo" /></td>
  <td><img src="image3_thumb.jpg" id="imgthree" /></td>
  <td><img src="image4_thumb.jpg" id="imgfour" /></td>
 </tr>
</table>
</body>
</html>

any help would be appreciated

2

Hi,

They would be loaded onclick, the other big images

No, all the images are in the same directory. the big ones are called, for example:

image1.jpg

the thumb is

image1_thumb.jpg

thanks

3

Are you planning on loading the other large images onload and then hiding them? Or would you like to have them loaded only onclick?

Will the main images and the thumbnails have the same name but reside in a different directory?

4

I created a very simple photo gallery example for you to take a look at. Hopefully it will help you out. I used html, css and a wee little bit of jQuery.

If you have any questions let me know.

Good luck!

5

To make that code work, you’d need to enclose the image src in quotes. Also, the reference to the dynamic large image has already been obtained via getElementById(“active”), so leave the references to ‘this’ out of it.

So in the first onclick assignment, use:

activeImg.src = "image1.jpg";

… and so on for the others.

Also, if you are going to apply styling to the gallery later on, you might want to remedy that doctype, which is missing its URI. A Transitional html doctype with a missing URI creates styling problems (quirks mode) for Internet Explorer. Make sure you code consistently also - those img tags are xhtml.

Also (sorry to be pedantic about non-javascript matters), if you are just starting out, it may pay to look at how galleries can be done without using tables for layout. Have a look at the following example:

And for this type of rollover gallery, you can also do it with CSS entirely if you like. Have a look at the many examples at www.cssplay.co.uk

6

thanks alot for the help guys! I figured it out