Flex Gallery Component Documentation

Updated: 02/04/2019. Version: 1.0

Description

This is a highly customizable and very easy to use Flex Gallery component. It allows to create range of different creatives such as: 3D Cube, Carousel, Slider or FlipCard quickly and easily.

Carousel Template in Adform HTML STUDIO

Slider Template in Adform HTML STUDIO

3D Cube Template in Adform HTML STUDIO

Initialization

To start with Flex Gallery Component, you have to load it in your index.html document.

<script src="//s1.adform.net/banners/scripts/components/Adform.FlexGallery.js"></script>

Banner HTML structure should follow this pattern:

<div id="adf-wrapper">
    <div class="adf-Shape">
        <!-- First Panel -->
        <div class="adf-Panel">
            <!-- Panel Content -->
        </div>
        <!-- Second Panel -->
        <div class="adf-Panel">
            <!-- Panel Content -->
        </div>
        ...
    </div>
</div>

See an example of initialization:

// 1. Create new instance
var carousel = new Adform.FlexGallery({
    elementId: 'adf-wrapper',
    panelWidth: 228,
    panelHeight: 190,
    panelSpacing: 20,
    paddingForButtons: 60,
    perspective: 800,
    animationDuration: 0.5,
    animationDirection: 'horizontal',
    autoAnimationEnabled: true,
    autoAnimationDelay: 3,
    autoAnimationTime: 28,
    defaultButtons: 'true',
    sides: 0
});

// 2. Initialize Flex Gallery
carousel.init();

Mandatory Settings

These are the properties that have to be present in options’ Object.

Name Type Description
elementId string Id of Flex Gallery wrapper element
panelWidth number or string Width in pixels (integer, greater than 0) or percentage
panelHeight number or string Height in pixels (integer, greater than 0) or percentage

Optional Settings

Name Type Default Description
panelSpacing number 0 Space between adjacent panels (integer)
perspective number 800 CSS perspective (integer, greater than 100)
animationDuration number 0.5 Flex Gallery animation duration in seconds (float, greater than 0)
animationDirection string "auto" Flex Gallery animation direction ("horizontal", "vertical", "auto")
paddingForButtons number 0 Maximum value of side spacing between container element (".adf-Shape") and Flex Gallery wrapper element (integer, min. 0)
autoAnimationEnabled boolean false Enable or disable Flex Gallery auto animation
autoAnimationDelay number 3 Amount of time, in seconds, to linger on each panel
autoAnimationTime number 28 Amount of seconds to timeout auto animation
className string "adf-FlexGallery" Outer element class name. Note that inner elements will use this className as a prefix as well
defaultButtons boolean false Automatically add navigation buttons to Flex Gallery wrapper
panelButtons boolean false Automatically add navigation buttons to each panel of Flex Gallery (defaultButtons should be set to true)
buttonsDirection string rotationDirection Position of navigation buttons ("horizontal", "vertical")
defaultBullets boolean false Automatically add navigation bullets to Flex Gallery wrapper
allowParentSwipe boolean false Allow or prevent swipe event on parent container
preventPageSwipe boolean true Allow or prevent page swipe when interacting with parent container
swipeIcon string null URL of swipe image used to illustrate swipe capability (autoRotationEnabled should be set to true)
zoom number 100 Factor (percent, greater than 0) to zoom in or zoom out Flex Gallery container (".adf-Shape") together with animation
inview number 50 Percentage of banner visibility to start animation automatically (autoRotationEnabled should be set to true)
sides number 0 Number that defines Flex Gallery shape. 0 displays a Carousel Gallery, 1 a Slider Gallery, 2 a FlipCard Gallery, 3 and above a solid having a defined number of edges

Methods

Resizes Flex Gallery container element to specified width and height (in pixels).

Note: This component automatically triggers resize to match wrapper element size

Resizes Flex Gallery panels to specified width and height (in pixels), it’s possible to edit spacing between panels as well.

Example:

window.addEventListener('resize', function () { // make gallery panels responsive together with wrapper
    var wrapperWidth = document.getElementById(elementId).offsetHeight;
    var wrapperHeight = document.getElementById(elementId).offsetHeight;
    gallery.resizePanels(wrapperWidth, wrapperHeight);
});

Returns outer element.

Example:

document.querySelector('#banner').appendChild(gallery.getElement());

Returns current focused panel index.

Example:

var currentPanelIndex = gallery.getCurrentPanel();
document.querySelectorAll('.adf-FlexGallery-Panel')[currentPanelIndex]; // return current panel element

Animates Flex Gallery back or forth of the amount of panels specified.

Example:

document.querySelector('#previousButton').addEventListener('click', function () {
    gallery.moveBy(-1);
});

Animates Flex Gallery back or forth to the specified panel.

Example:

document.querySelector('#navigateToVideoPanel').addEventListener('click', function () {
    gallery.moveTo(8);
});

Registers event listener for the provided event name.

Param Type
eventName string
listener function 
gallery.on('animationEnd', function() {
    // Called whenever animation completes, can be used to send engaging animation events
    Adform.sendEvent(['1', 'Rotate']);
});

Removes the event listener. If listener is null or undefined, removes all listeners associated with the provided event name.

Param Type
eventName string
listener function

Available events:

Name Description
animationStart fires when gallery begins animation
animationEnd fires when gallery completes animation
previousPanel fires when previous panel is on focus
nextPanel fires when next panel is on focus
panelCentered fires when specific panel is on focus (available only on panel element)
panelNotCentered fires when specific panel exits focus (available only on panel element)