Dynamic Screenshot Component

======================================

Updated: 29/11/2017. Version: 1.0

NOTE: Component is not valid anymore. Therefore it is deprecated.

Description

Component allows users to create a highly interactive banner with dynamic screenshot feature. This component can be used for responsive OpenDoor, ShowDown formats.

Initialization

1.Load Dynamic Screenshot component in <head></head> inside index.html:

<head>
...

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

...
</head>

2.Setup component as follows:

var DynamicScreenshot = new Adf.DynamicScreenshot();

DynamicScreenshot.setup({
    screenshot: dhtml.getAsset(1),
    alignX: dhtml.getVar('alignX', 'center'),
    alignY: dhtml.getVar('alignY', 'center'),
    offsetX: dhtml.getVar('offsetX', 0),
    offsetY: dhtml.getVar('offsetY', 0),
    direction: dhtml.getVar('direction', 'left'),
    gap: dhtml.getVar('gap', 0),
    perspective: dhtml.getVar('perspective', 1000),
    rotation: dhtml.getVar('rotation', 70),
    scale: dhtml.getVar('scale', 0.8),
    clicktag: dhtml.getVar('clickTAG', '//www.adform.com'),
    target: dhtml.getVar('landingPageTarget', '_blank')
    optionalScreenshots: [
        {
            from: 320,
            to: 900,
            screenshot: dhtml.getAsset(7)
        },
        {
            from: 900,
            to: 2000,
            screenshot: dhtml.getAsset(8)
        }
    ]
});

Optional Settings

Name Type Default Description
screenshot string dhtml.getAsset(1) default screenshot url. If optionalScreenshots (see below) is not used or neither of the breaking point rules apply, this screenshot will be loaded.
alignX string center horizontal screenshot alignment (left/center/right)
alignY string top vertical screenshot alignment (top/center/bottom)
offsetX number 0 horizontal screenshot offset in pixels
offsetY number 0 vertical screenshot offset in pixels
direction string left screenshot opening direction (top/right/bottom/left)
gap number 10 gap between banner side and the opened screenshot in pixels
perspective number 1000 animation perspective in pixels
rotation number 70 fully opened screenshot rotation
scale number 0.8 fully opened screenshot scale
clicktag string null banner’s landing page
target string blank banner’s landing page target,
optionalSceenshots array null breaking points (from/to px in screen width) where responsive screenshots can be defined.

Methods

DynamicScreenshot.setup(settings)

Assign settings to Dynamic Screenshot

    var settings = {
        screenshot: dhtml.getAsset(1),
        alignX: dhtml.getVar('alignX', 'center'),
        alignY: dhtml.getVar('alignY', 'center'),
        offsetX: dhtml.getVar('offsetX', 0),
        offsetY: dhtml.getVar('offsetY', 0),
        direction: dhtml.getVar('direction', 'left'),
        gap: dhtml.getVar('gap', 0),
        perspective: dhtml.getVar('perspective', 1000),
        rotation: dhtml.getVar('rotation', 70),
        scale: dhtml.getVar('scale', 0.8),
        clicktag: dhtml.getVar('clickTAG', '//www.adform.com'),
        target: dhtml.getVar('landingPageTarget', '_blank')
        optionalScreenshots: [
            {
                from: 320,
                to: 900,
                screenshot: dhtml.getAsset(7)
            },
            {
                from: 900,
                to: 2000,
                screenshot: dhtml.getAsset(8)
            }
        ]
    };

    DynamicScreenshot.setup(settings); // setups banner settings, should be called first

DynamicScreenshot.close()

Close Dynamic Screenshot

    var closeButton = document.getElementById('close-button');
    closebutton.onclick = DynamicScreenshot.close; // custom banner close

DynamicScreenshot.init()

Start Dynamic Screenshot animation

    DynamicScreenshot.init(); // initializes banner animation, should be called last

DynamicScreenshot.on(eventName, listener)

Registers event listener for the provided event name.

Param Type
eventName string
listener function 
    DynamicScreenshot.on(DynamicScreenshot.CONTENT_SHOWN, function() {
        // do something here
    });

Available events:

Name Description
CONTENT_SHOWN emitted when Dynamic Screenshot completes revealing animation
CLICKTAG_FIRED emitted when user clicks on landing page link
CLOSE emitted when Dynamic Screenshot closes