Gallery

Image of the gallery module online

The gallery module lets you add up to 8 images into a so-called image carousel, which can be swiped on mobile (or visitors to your site can use the provided buttons to select the images).

Grid Version

There is a grid variant of this module.

Enabling / Disabling

Like all modules, this module can be enabled / disabled. Please see the corresponding section of the documentation to find out more about this functionality.

Images

Image of the gallery module's images

Here you may add / re-order / remove images from your gallery. Please note that the images start out in a compact state, like this:

Image of the gallery module's image list items, compact form

These items expand when clicked:

Image of the gallery module's image list items, expanded form

Selecting the ‘collapse'-button will make the item compact again. Image of the collapse button

Image Fit

Image of the gallery module's image fit option

The image fit option allows you to specify whether your gallery should try to ‘fit' the whole image into the space of the gallery (‘cover'), or shrink the image within the space. This is easiest to see visually:

Cover

Image of the gallery module online

Scaledown

Image of the gallery module, scale-down option

Auto Scroll

Image of the gallery module's auto scroll option

By default, a gallery automatically scrolls through its images at a set interval.

Scroll Interval

Image of the gallery module's scroll interval option

You can define how quickly the images of the gallery change, in milliseconds. Therefore, 4000, for example, is equivalent to 4 seconds.

Background Colour

Image of the gallery module's background colour option

You may customise the background colour shown when using ‘scale down' as an image fit option.

Marker Options

Image of the gallery module's marker options

  • Enabled / Disabled: You can turn off the markers entirely, if desired.

  • Background Style: There are three options for the marker backgrounds. None: Image of the gallery module's marker option 'transparent background' / opaque (with a customisable background colour): Image of the gallery module's marker option 'transparent background' and ‘gradient', which you can see above.

  • Dot Colour: This allows you to change the colour of the dots in their initial state (in above images, that is white).

  • Selected Dot Colour: This allows you to change the colour of whichever dot corresponds to the image that is currently showing.

  • Dot Rollover Colour: This is the colour of any dot that the user's mouse is hovering over.

Arrow Options

Image of the gallery module's navigation arrow options

  • Show Arrows:

You can enable or disable the arrows. Here is an example without arrows:

Image of the gallery module with disabled arrows

  • Arrow Colour:

Image of the gallery module's navigation arrows online

Tip

Please do not forget to hit one of the save buttons, to make sure the changes you have made are actually saved. Why not keep a window with your preview open, to see the changes in realtime?