Build Guide

.3.. s4m_demo.css, s4m_demo.js
These are required CSS and JS for this demo which contain all of the actual content which will be pulled into the
container within the HTML page
.4.. thumb_1.png, thumb_2.png, thumb_3.png, thumb_4.png
These are the thumbnail images which are pulled into the Swipe for More curtain.
.5.. image_1.png, image_2.png, image_3.png, image_4.png
These are the large images which are shown when the thumbnails within the swipe for more curtain are pressed.
.6.. tab.png. grip.png
These are the images which make up the Swipe for More curtain.
.7.. background_image.jpg
This is the backup image for the creative which will display if the creative is viewed by a non HTML5 compliant
browser. It should be the size of the creative, so in this case 300x250px
.Using the Component.
.>. Configuration
The goal of this mobile component is to be as flexible as possible especially around its configuration. In order to set
it up a config object is created in JavaScript (shown below) and then passed to the component.
.NOTE:. This config for the demo downloadable from this document is done within the s4m_demo.js file.
// Swipe For More config object.
var config = {
// Id of div container that will hold the Swipe 4 More component.
adContainerId: 'swipe-container',
// File path of the swipeable tab image.
outerTabFilepath: Enabler.getUrl('tab.png'),
// Dimensions of the outer swipeable tab image.
outerTabDimensions: {
width: 300,
height: 37
},
// Amount of space to increase the tab swipe hit area by in pixels.
tabHitAreaIncrease: 15,
// File path of the inner tab image that appears inside the swipe pane.
innerTabFilepath: Enabler.getUrl('grip.png'),
// Dimensions of the inner tab image.
innerTabDimensions: {
width: 47,
height: 17
},
// Because the outer tab and inner images differ, there could be an