Javascript Image Gallery

Question

(I have limited coding experience)

I have a template file for a website and currently the image gallery for the site opens in a new page, I would like instead for the image gallery to not open additional pages/tabs and instead contain images in rows of five with one large main image under the rows all within the same page, I would like the main image when scrolled over with the mouse it zooms in on the picture Also when you click on the smaller additional images (in rows of five) it will change the main bigger image to the image that was clicked and allow the zoom in feature as well.

What are the tags I need to place in the template file (in the link below) and where do I put the tags?

Shown below is the current tags in the template

This is the picture gallery tags in the template file of the site:

<!-- picture gallery -->
<script type="text/javascript">myThumbs = ##CST_ITEM_IMAGE_ARRAY_T##;myPix = ##CST_ITEM_IMAGE_ARRAY_M##;</script>

Here is a link to the template file and a pdf of what I am trying to accomplish

http://sdrv.ms/UCHk8z

Here is what the current image gallery looks like now that needs to be changed to not open a new window

http://www.ebay.com/itm/4-Behringer-B208D-Active-800-Watt-2-Way-PA-Speaker-Systems-8-Woofer-/390478326914?pt=US_Pro_Audio_Speakers_Monitors&hash=item5aea526c82

I am not proficient with programming I understand some things but not how it all flows together, I only know basic links and tags so thank you everyone for your help, I greatly appreciate all the responses. I have been Google searching everything to no success.

Answer 1

According to my understanding of your question I think you require something like Thumbnail gallery , if so refer the below url

http://www.queness.com/post/3141/10-image-galleries-jquery-script-with-thumbnail-filmstrip

so I have choose one ( http://www.robertnyman.com/picture-slides/) to use for your purpose right so by that 80% of work is done just download the demo of that and is it will be easily understandable, in your case you can see 3 links in demos click on the one you like and download it and use it

so you have downloaded the file using the picture gallery link, so you will get a zip file which consists of gallery and _Macosx don't bother about the Macosx.

Now go into the gallery file in that there will be a index.html,css and required js, copy them where you require and if you see the index html there will be a div which consists of Picture slider container class div, complete the copy the div and paste it where you require.... Thats it :D

Note: Make sure you give the correct paths to the images, thumbnails, css and js

Hope this helps