This example uses jQuery to change the image sources. The file name of the thumbnail image determines which picture is displayed in the larger box. The src attibute of the thumb image is read, the word "thumb" in the file name is replaced with the word "big" and the new value is assigned to the src attribute of the image in the bigger box. For this to work the images must be named appropriately, such as "pic1-thumb.jpg" and "pic1-big.jpg" etc.
A mousedown function on the images with class of .thumb checks to see which thumb is clicked on and reads the src attribute via whichPic = $(this).attr('src'); (the keyword "this" refers to the specific thumb clicked on) then the word "thumb" is changed to "big" via whichPicBig = whichPic.replace(/thumb/, "big"); then the src attribute of the large image is changed.
Note CSS could be used to simply style the thumbnails smaller from the same source files as the large pictures. In that case we would not need to change the src info. It would, however, require all of the larger file images to load in order to display the thumbnails slowing the page load. With this setup the larger images are only loaded on demand.
© 2013 Miles DeCoster