# Main Image with Thumbnails

## Overview

This fully-responsive block includes a main image and a list of thumbnail images. Clicking on a thumbnail image will change the main image to that thumbnail's image.

## Structure

* When this block is added to a page, it is placed within a group called ***Blocks container 860 (do not rename)*** on the page. This group contains the responsive settings for all blocks.
* This block (***Group imageWithThumbnails***) contains a reusable element called ***new\_imagethumbnails***. The reusable element will come with five main elements:
  * ***Group Main next image***  - Clicking on this group will scroll to the next image in the thumbnail images list
  * ***Group Main image*** - This group contains the main image and is displayed as the group's background image
  * ***Group PLACEHOLDER 1*** and ***Group PLACEHOLDER 2*** - These are placeholder groups in the block. If you add more elements to the group, please resize these groups and ensure they are not overlapping with any other elements.
  * Clicking on ***Group Inner list image*** will change the main image to the thumbnail's image
  * All thumbnail images are displayed in ***RepeatingGroup Dummy***
    * This repeating group also has two states
      * `Current thing` of data type Dummy (you should update the data type)
      * `Order` of type number

## How to set up

Since this block is in a reusable element, you can only pass data to it from the page with two methods:

1. Update the reusable element data source to the data type you want to pass. \
   For example, you may want to pass a Product or Listing data type that has fields for main image and a list of images. On the page that you have the reusable element instance, make sure you pass the data type.<br>
2. Add states to the reusable element. \
   You would set the states of the reusable element on the page and pass the data from the page to the reusable element.

* Update the data source of ***Group Main image***
* Update ***RepeatingGroup Dummy's*** data source and the data type of its `Current thing` state. You can view the states on the element by clicking on the info icon.
* Modify the workflows in the workflow tab and select the appropriate data to pass to the custom workflows.