Large image with thumb nails under

Design help General
1

I am very new to Webflow, please forgive my simple questions. I inherited a website that is close to be a production site.

Right now I have larger images all from a CMS collection that has a single image (thumbnail) followed with a collection of related images. When you click on the thumbnail (which is lots larger than a thumbnail) then it takes you to all the related images. It would be cool to be able to display the related images as a small thumbnail under the main picture. Attached is an example of what I mean. (borrowed the pic from Amazon) as the example.

Is this is big task to make happen?

STL_Website_Development_-_Google_Docs

2

I would like to suggest examining the Lightbox element.

3

Read this article: Is it possible to link to a specific slide in a slider?
I used on at 150 gallon 3-point Hitch Sprayer - HT150M Series | Iva Sprayers
If you want clear instructions let me know and Ill post it here.

4

Your sprayer example looks like what I am looking for. If its not too complicated I would like to give it a try. I know how to write app code and websites but really new to Webflow. If its too complicated I will just tell them it cant be easily done for now. THANK YOU!

5

Could you possibly post instructions to make this work? Thank you

6

Here are the details to to have a thumbnail image move to a specific slide.

Here is a short video explaining the setup and the code; Thumbnails for slider in Webflow

And here is the code you’ll need;

<script>
$(document).ready(function() {
  $('#Slide1-Thumbnail').click(function(e) {
    e.preventDefault();
    $('.hero-link').removeClass('active');
    $(this).addClass('active');
    $('.w-round div:nth-child(1)').trigger('tap');
  });
  $('#Slide2-Thumbnail').click(function(e) {
    e.preventDefault();
    $('.hero-link').removeClass('active');
    $(this).addClass('active');
    $('.w-round div:nth-child(2)').trigger('tap');
  });
  $('#Slide3-Thumbnail').click(function(e) {
    e.preventDefault();
    $('.hero-link').removeClass('active');
    $(this).addClass('active');
    $('.w-round div:nth-child(3)').trigger('tap');
  });
  $('#Slide4-Thumbnail').click(function(e) {
    e.preventDefault();
    $('.hero-link').removeClass('active');
    $(this).addClass('active');
    $('.w-round div:nth-child(4)').trigger('tap');
  });
  $('#Slide5-Thumbnail').click(function(e) {
    e.preventDefault();
    $('.hero-link').removeClass('active');
    $(this).addClass('active');
    $('.w-round div:nth-child(5)').trigger('tap');
  });
  $('#Slide6-Thumbnail').click(function(e) {
    e.preventDefault();
    $('.hero-link').removeClass('active');
    $(this).addClass('active');
    $('.w-round div:nth-child(6)').trigger('tap');
  });
  $('#Slide7-Thumbnail').click(function(e) {
    e.preventDefault();
    $('.hero-link').removeClass('active');
    $(this).addClass('active');
    $('.w-round div:nth-child(7)').trigger('tap');
  });
});
</script>

All the best!

7

THANK YOU VERY MUCH!!!

I really appreciate all the help!

8

Wondering if the new nested collections would work with this?