# Main Image with Thumbnails

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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.airdev.co/canvas/5.2/canvas-library/blocks/main-image-with-thumbnails.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.