0

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 right direction.

Adam
  • 8,849
  • 16
  • 67
  • 131
  • Since you seem to think Jquery (sic) is an alternative to JavaScript, I'd suggest you find an introductory JS text and get to grips with the basics before trying to build anything with it. http://wsc.opera.com/ is probably a good starting point. – Quentin Apr 13 '10 at 14:47
  • 1
    possible duplicate of http://stackoverflow.com/questions/2220964/recommendation-for-gallery-script – Matthew Flaschen Apr 13 '10 at 14:50
  • im not looking for a full gallery. Just a simple function that allows you to click the thumb and make it the main image etc... ill try the code below. Thanks. – Adam Apr 13 '10 at 17:06

3 Answers3

0

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

orithena
  • 1,455
  • 1
  • 10
  • 24
0

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)

}
Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
0

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

simple gallery [your favorite coding tool]
Smandoli
  • 6,919
  • 3
  • 49
  • 83