3D Cube Component

3D Box MPU:

Template in Adform HTML STUDIO

3D Box Leaderboard:

Template in Adform HTML STUDIO

Description

3D Box component allows users to create a highly interactive banner with cube feature. With cube feature, you are able to set not less than 2 and up to 20 walls (panels).

Initialization

To start with 3D Box Component, follow these instructions:

Load it in your index.html document.

<head>

    <link rel="stylesheet" href="styles/Adf.Cube.v1.css">

</head>

<!-- Components -->
<script src="scripts/Adf.Cube.v1.js"></script>
<!-- Components -->

Add Adf.Cube.v1.js file into scripts folder.
Add Adf.Cube.v1.css file into assets folder.

Mandatory Settings

These are the properties that have to be set in order to complete the setup of cube component:

Parameter	Type	Default	Description
`slides`	integer	4	Number of walls(slides) displayed on box (min 2, max 20)

Optional Settings

The following settings are not mandatory and have default values.

Parameter	Type	Default	Description
`direction`	string	‘horizontal’	Direction of cube rotation (‘horizontal’, ‘vertical’)
`cubeWidth`	integer	banner width	Width in pixels. Overwrites default width size when component needs to be used as part of initially wider ad
`cubeHeight`	integer	banner height	Height in pixels. Overwrites default width size when component needs to be used as part of initially wider ad
`fallbackImage`	string	‘data:image/png;base64,iVBORw 0KGgoAAAANSUhEUgAAAAoAAAA KCAYAAACNMs+9AAAAGXRFWHRT b2Z0d2FyZQBBZG9iZSBJbWFnZVJ lYWR5ccllPAAAABtJREFUeNpiZGBga GAgAjAxEAlGFVJHIUCAAQDcngCUgq GMqwAAAABJRU5ErkJggg==’	If no panel image is uploaded to Additional assets, default image (as indicator) of empty panel (wall) is shown. (image through additional assets, image URL or base64 encoded image)
`autoRotate`	integer	endless until touch or move mouse on cube	Indicates how many times cube should turn
`bannerShowDelay`	integer	1000	Time in ms when banner should be shown
`autoSlideEnabled`	boolean	true	Set box auto rotation (true, false)
`autoSlideDelay`	integer	3000	Time in ms delay before each rotation
`autoSlideDirection`	string	left	Direction in which cube will rotate automatically
`panels`	array	[]	Array of objects containing one panel info, like: {wallpaper: ‘imageSrc’, clicktag: ‘URL’, target: ‘landingPageTarget’}

Events

Cube.on() and Cube.off() methods should be used to add or remove cube event listeners. All the available events are listed bellow.

Event	Value	Description
`Cube.TOUCH_START`	‘cubeTouchStart’	Event is emitted on cube touch start.
`Cube.CLICK_PREV`	‘cubeClickPrev’	Event is emitted on cube left arrow click.
`Cube.CLICK_NEXT`	‘cubeClickNext’	Event is emitted on cube right arrow click.
`Cube.ROTATE_START`	‘cubeRotateStart’	Event is emitted on cube rotation start.
`Cube.ROTATE_END`	‘cubeRotateEnd’	Event is emitted on cube rotation end.

Examples

3D Box MPU (Horizontal Rotation)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>3D Box banner</title>
    <script>
        document.write('<script src="'+ (window.API_URL || 'https://s1.adform.net/banners/scripts/rmb/Adform.DHTML.js?bv='+ Math.random()) +'"><\/script>');
    </script>
    <link rel="stylesheet" href="styles/Adf.Cube.v1.css">
</head>
<body class="Adform">
    <!-- Banner content-->
    <div id="banner"></div> 

    <!-- Components -->
    <script src="scripts/Adf.Cube.v1.js"></script>
    <!-- Components -->

    <!-- User code -->
    <script>
        var slides = 4,
            config = autoConfig(slides);

        Adf.Cube.init({
            autoSlideEnabled: true,
            direction: 'horizontal',
            panels: config
        });

        function autoConfig(panels) {
            var config = [];
            for (var i = 1; i <= panels; i++) {
                config.push({
                    wallpaper: dhtml.getAsset(i),
                    clicktag: dhtml.getVar('clickTAG' + i, '//www.adform.com'),
                    target: dhtml.getVar('landingPageTarget', '_blank')
                });
            }
            return config;
        }
    </script>

3D Box Leaderboard (Vertical Rotation)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>3D Box banner</title>
    <script>
        document.write('<script src="'+ (window.API_URL || 'https://s1.adform.net/banners/scripts/rmb/Adform.DHTML.js?bv='+ Math.random()) +'"><\/script>');
    </script>
    <link rel="stylesheet" href="styles/Adf.Cube.v1.css">
</head>
<body class="Adform">
    <!-- Banner content-->
    <div id="banner"></div> 

    <!-- Components -->
    <script src="scripts/Adf.Cube.v1.js"></script>
    <!-- Components -->

    <!-- User code -->
    <script>
        var slides = 4,
            config = autoConfig(slides);

        Adf.Cube.init({
            autoSlideEnabled: true,
            direction: 'vertical',
            panels: config
        });

        function autoConfig(panels) {
            var config = [];
            for (var i = 1; i <= panels; i++) {
                config.push({
                    wallpaper: dhtml.getAsset(i),
                    clicktag: dhtml.getVar('clickTAG' + i, '//www.adform.com'),
                    target: dhtml.getVar('landingPageTarget', '_blank')
                });
            }
            return config;
        }
    </script>

Exposed methods

start - starts auto rotation
stop - stops auto rotation
rotate (direction) - rotates to right or left