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.

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.