Using a gallery to showcase your portfolio couldn’t be easier with an interactive Image Gallery. Auto-play your images and add personalised captions to provide an engaging way for your visitors to see the latest photographs from company events or familiarise new colleagues with team introductions.
How to add an Image Gallery in pop-up
Navigate to a Document.
Select ‘Interactivity’ for the Version of the Document that you want to work on.
The Version will then open in Interactivity mode and the Interactivity palette can be found to the right of your page.
Select the ‘Media’ module type from the ‘Add Interactivity' palette.
Select the ‘Image Gallery in pop-up’ option.
Click and drag out the area to add to your page - this is the clickable area that the visitor will select to view the image gallery in a pop-up box.
Drag your image files into the box or select 'Add Files' to add images.
Once done, select the 'Start Upload' button to upload the files to the gallery.
💡 This following file types supported - .jpg, .pjpeg, .jpeg, .png, and .gif.
How to re-order an image
Select the sorting icon that appears to the left of an image.
Click and drag the image into position.
Select 'Save' to save your changes.
How to delete an image
Select the bin icon found to the right of an image to delete it.
Select 'Save' to save your changes.
How to caption an image
By default, the filename of the image will be used in the caption field, however, this can be changed to your preference.
Simply type in the text and choose the position of the caption (Top/Bottom).
💡 Explore the Settings section to choose when you would like captions to display.
Settings
The Settings palette will activate when any module on a page is selected. You can then apply settings, such as border colour and size.
1. General
Title
The 'Title' field is set by default, but it's important to update it to something unique that reflects the interactivity - for example, 'Image Gallery - Hatters'. Descriptive names make it easier to identify the interactivity in your document, which is particularly helpful if you're using lots of the same module type.
Tooltip
A tooltip is a short piece of text which appears when a cursor is positioned over a module. It can be used to provide a brief description or explanation of the module - for example 'Image Gallery of Hatters office'.
Interval
Choose how long each image will display for before changing to the next - this value must be set, but will be ignored if the gallery is not set to auto-play. Choose from every 3 seconds, up to 1 minute.
Show Info
If you have added captions to your images, this option allows you to choose when they display in the gallery. Choose from 'Toggleable', which requires the visitor to hover over an information icon to display the caption, 'Always' or 'Never'.
Info Text Colour
If you have added captions to your images, this option allows you to choose the text colour.
Info Text Colour colour should contrast with the Border Colour of the module to ensure it is legible. This is because the colour set as the Border Colour is shown behind the caption text.
Auto Play
Select the checkbox for Auto Play if you would like the slideshow of images play automatically. If this is not set, your visitors will be required to click through manually to view the gallery.
💡 An auto-playing slideshow can be paused at any point, so the visitor can spend longer viewing an image if needed.
Loop
Select the Loop checkbox if you would like the slideshow of images to continue to play until it is closed. If this option is not selected, the gallery will close after one cycle of the images.
2. Accessibility
Focus Outline Colour
If Accessibility has been enabled for your document, this option can be used to choose the colour of the Focus Outline Colour. Focus Outline Colour is the colour of the outline that displays around the piece of Interactivity being viewed when a visitor uses the Tab key to navigate around a document.
3. Popup Style
Border Colour
A border adds a keyline around the video pop-up box, and can be used as a way to draw attention to your content. Use this field to specify the colour of the border.
Border Size
Use the 'Border Size' field to specify the width of the border around the video pop-up box. Enter a numerical value to set the border width - the higher the value, the thicker the border.
💡 The Border Colour is also used as the caption text background, so remember to ensure it contrasts with the colour set for Info Text Colour.
Back Colour
The 'Back Colour' field allows you to set a background colour for the gallery pop-up box - select from the colour picker, enter a HEX code, or choose from your brand colours.
Margin Size
Margins create breathing space by adding a separation between the images in the gallery and the pop-up box. Enter a numerical value to set the margin size - the higher the value, the larger the margin.
Width & Height
Adjust the width and height of the pop-up box that the image gallery will be displayed in. Aim for no larger than 900 to ensure the gallery is viewable on different monitor sides. The larger dimension (width or height) of the image will be assigned the value in this field, and the smaller dimension will be sized automatically based on the ratio of the image.
Disable Close
This option can be selected if you want to prevent the visitor from closing the video pop-up box. Be mindful when using this option, to ensure they don't get stuck or unable to progress in your document.
4. Clickable Area
Position X & Y
Adjust the position of the clickable area. 'X' sets the position of the left edge and 'Y' sets the top edge.
Width & Height
Adjust the width and height of the clickable area. The size is measured in pts.
Link to Panel
Link the module to a Panel in your document. Once linked, the module will move with the Panel if it is repositioned or resized.