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.
- 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 thingof data type Dummy (you should update the data type)Orderof type number
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.
- 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 thingstate. 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.