js library for simple product image gallery with thumbnails (no lightbox or transitions, just click and view)?

[saml]

Hi, I have been googling around like crazy to find a suitable very light-weight javascript library for showing a simple image gallery with one bigger main picture (just on the page, not in a lightbox), with clickable thumbnails that will show the selected image in a bigger version in the main image area when clicked.

See the attached screenshot for an example!

Most libraries out there seem to focus on fancy transitions, lightbox style image viewing, or don't include the thumbnail feature (just showing these dots, for selecting pictures) ... and so I haven't so far found what I'm looking for.

Any hints? (Again, preferrably something super-lightweight, that is super-easy to integrate with pw).

[apeisa]

It's simple to build yourself using jQuery. Try it, happy to help.

[Fokke]

Hi!

As apeisa mentioned, this is very simple to build. Unless you need preloading, transitions etc, something like this should cover your needs.

<img id="big" src="image1.jpg">

<div id="thumbnails">
    <a href="image1.jpg"><img src="image1_thumb.jpg"></a>
    <a href="image2.jpg"><img src="image2_thumb.jpg"></a>
    <a href="image3.jpg"><img src="image3_thumb.jpg"></a>
</div> 

And jQuery...

$("#thumbnails a").on('click', function(e) {
    e.preventDefault();

    $('#big').attr('src', $(this).attr('href'));
});

Edited June 21, 2014 by Fokke

[saml]

Hi!

As apeisa mentioned, this is very simple to build. Unless you need preloading, transitions etc, something like this should cover your needs.

<img id="big" src="image1.jpg">

<div id="thumbnails">
    <a href="image1.jpg"><img src="image1_thumb.jpg"></a>
    <a href="image2.jpg"><img src="image2_thumb.jpg"></a>
    <a href="image3.jpg"><img src="image3_thumb.jpg"></a>
</div> 

And jQuery...

$("#thumbnails a").on('click', function(e) {
    e.preventDefault();

    $('#big').attr('src', $(this).attr('href'));
});

Awesome, thanks! Seems I have been unneccessarily scared to touch this jquery stuff myself - your example seems simple enough

For the reference, I also in fact found a a very simple, light-weight and good-looking (smoothproducts, demo) just a while after posting my question, but I like the ability to be able to roll an own and be in full control, so I'll experiment with both a bit and see which works best.

Cheers

[Christophe]

I've implemented it in ProcessWire. The result is very nice. But the big image(s) was flickering. Some times the 2 same images, sometimes (also) others.

I've tried different things to reduce/stop the flickering, but nothing has changed it. It has always/often been only when clicking the first time on an image (after cleaning the (browser) cache).

So I've implemented this one (the last code at the bottom): https://processwire.com/talk/topic/8909-add-simple-html-gallery/

Having both has apparently stopped the flickering (if it's not due to something else). (Seems somehow logical, perhaps related to the cache...)

But now, with the other gallery system (which is also nice) it seems almost impossible to make it responsive (I hadn't noticed it wasn't).

I'll probably have to find a third solution.