What do I use to make a simple html gallery?

i'm trying to make the typical ecommerce site where you have different views of clothing and when you click it it becomes the main image.

I'm assuming javascript would be best suited for this? maybe Jquery will be easier?

Thanks I just need someone to point me in the rig开发者_StackOverflow中文版ht direction.

Send the various image file names along with the html code in a javascript array. Define "next" and "previous" links pointing to a javascript function that just sets the source of the <img> to the next/previous image.

Or, if you have mini previews, organize the images so that you have image0032_small.jpg for the mini preview and image0032.jpg for the big image, then set the onClick event of the mini image to a javascript function that reads the url of the mini image, removes the _small part and sets the image source of the big image to the result...

If you use a logical naming convention, where the zoom img = the small image + "_Zoom" (a.jpg > a_Zoom.jpg) in the filename, you can do it like this:

<img id="productZoom" src="productA_Zoom.jpg" /> <-- the large image
<a href="javascript:;// zoom in" onclick="loadZoom(this)">
<img id="productZoom" src="productB.jpg" /></a> <-- the thumbnail




function loadZoom(element) {
   var zoomImg = $(element).children('img')[0].src.replace(".","_Zoom.")
   $('#productZoom').attr('src',zoomImg)

}

There are a dozen ways to do it. I suggest you run a search on

simple gallery [your favorite coding tool]