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 is opening on a new page, I would like instead of the image gallery not opening additional pages / tabs and instead containing images in rows of five with one large the main image is under the lines, all inside the same page, I would like the main image when scrolling with the mouse to enlarge the image. Also, when you click on smaller additional images (in rows of five), this will change the main larger image for the image that was clicked, as well as the ability to scale.

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

Below are the current tags in the template.

These are the image gallery tags in the site template file:

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

Here is the link to the template file and pdf of what I'm trying to execute

http://sdrv.ms/UCHk8z

Here's what the current image gallery looks like that needs to be resized so as not to 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 do not own programming. I understand some things, but not how it all flows together, I only know the main links and tags, so thanks to everyone for your help, I am very grateful to all the answers. I searched Google all without success.

Answer 1

According to my understanding of your question, I think you need something like a thumbnail gallery if it relates to the URL below

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

so I chose one ( http://www.robertnyman.com/picture-slides/ ) to use for your purposes, so for 80% of the work to be done, just download a demonstration of this and it will be easy to understand, in your case, you you can see 3 links in the demo by clicking on the one you like and download it and use it

so that you upload the file using the link to the image gallery, so you get a zip file, which consists of a gallery and _Macosx, do not worry about Macosx.

Now go to the gallery file, which will have index.html, css and js required, copy them where you need, and if you see the html index, there will be a div consisting of the slider image container class, complete the copy of the div and paste it there where you need .... thats it: D

Note. Make sure you provide the correct paths for images, thumbnails, css and js

Hope this helps