Build Guide

.NOTE:. Enabler.getUrl() is required when loading in an image within Studio to make sure that studio can locate the file properly when adserved.
For more information check out our help centre .here.
.>. Instantiation and Event Handling
Instantiating the component is straightforward and is done as follows:
var mySwipe4More = new studio.innovation.components.SwipeForMore(config);
.NOTE:. This is again done for the downloadable demo from this document within the s4m_demo.js file.
Immediately following instantiation, you can set up listeners and callback for the SWIPE_OPEN and SWIPE_CLOSE
custom events. In place of the console.log, it is typical to invoke the Studio HTML5 Enabler.
mySwipe4More.addEventListener(studio.innovation.components.SwipeForMore.SWIPE_OPEN, function() {
console.log('open');
Enabler.counter("HTML5 Counter - Open Swipe For More Container");
}, false);
mySwipe4More.addEventListener(studio.innovation.components.SwipeForMore.SWIPE_CLOSE,
function() {
console.log('close');
Enabler.counter("HTML5 Counter - Close Swipe For More Container");
}, false);
.NOTE:. The Enabler.counter() call is a custom Rich Media counter which will appear within the Rich Media report for your creative, allowing you
to easily see which of your images was viewed the most. For more information on setting up Rich Media Counters see our help centre .here.
Finally, to actually show the component you must call the render method and supply the parent container. The
parent container can be any valid element.
mySwipe4More.render(document.getElementById('swipe-container'));
IMPORTANT: This component relies on the latest CS3 effects (specifically, CSS transitions and CSS transforms).
The component uses Modernizr to sniff out these capabilities, and if it does not detect them the swipe pane and
tab will NOT load. The recommended strategy is to include a static image within the parent DIV container that will
contain Swipe For More.
Example:
/* The content below serves as the backdrop to your ad, over which the swipe pane
* gets placed. In this example, a static JPG is the backdrop and will be shown
* regardless of whether the user’s device can support Swipe For More.
*/
Other API Methods.
.>. Programmatically Opening and Closing of the SwipeForMore Object.
To open the main content area of the SwipeForMoreObject: