Question

I have a page that will have a full size product image and 4 (maybe more, maybe less) thumbnails. As you rollover or click each thumbnail (either one) i would like the full size image to change. Also the full size image should default to the first thumbnail.

I’m not exactly sure how to do this and there will be multiple product folders and product names but the naming convention will be similar in all.

I am guessing this would be jQuery (which is fine but I’m a bit new to) but here is the scenario:

<div class="fullsizeimage">show  /images/products/prod_1/produ_name_1_large.jpg here by default but change as the thumbs are rolled over or clicked.</div>

<div class="thumbimage"><a href="#"><img src="images/products/prod_1/prod_name_1_small.jpg"></a></div>
<div class="thumbimage"><a href="#"><img src="images/products/prod_1/prod_name_2_small.jpg"></a></div>
<div class="thumbimage"><a href="#"><img src="images/products/prod_1/prod_name_3_small.jpg"></a></div>
...

Here are the details:

• Image names will be images/products/prod_name/prod_name_1_small.jpg (100x100px) and images/products/prod_name/prod_name_1_large.jpg (400x400px) for all but prod_name and prod_1 will be different for each folder
• May be as few as 1 as many 10 thumbnails.
• Would like the first thumbnail to have it’s fullsize counterpart loaded by default.

I’d prefer to do this only with jQuery and be reusable for everything fitting this pattern, if at all possible.

Thanks for any direction on this!

Answer 1

I believe this would be a little more complicated than some simple JQuery, but I have seen several plugins for things like this that are very easy to use such as http://wayfarerweb.com/jquery/plugins/simplethumbs/