Cross-Slider Feature – Sizmek Help Center

Overview

Introduction and Screenshots

With the Cross Slider feature, users can choose between preferred creatives, thereby allowing creative developers to build a multi-faceted ad to captivate different users based upon their preferences; this results in personalized engagement with a brand.

The Cross-Slider feature lets you slide between two divs, (this can be any HTML content), using a draggable or tiltable (on devices with accelerometer) arrow. The slider can go in a single direction, left-right (horizontal option), or top-bottom (vertical option). If the user does not interact with the unit after a customizable duration, then the teaser animation can replay, or other animated effects can replay.

Upon release, or if over a threshold, then the div that is displaying the most, might display fully with the option to play a video, show an image or show other content that you can set up using the Cross-Slider's variables.

A creative unit can contain multiple cross-sliders, (comparison units), without conflict and the comparison content supports responsive or fixed behaviors.

Demos/Downloads

The following table provides links to the template and demo for the Cross-Slider ad feature.

Template	CFG_RELEASED_CrossSlider_1.0.0.zip
Demo	Preview demo

Supported Platforms

Platform	Supported Versions
iOS	iOS 9 and later
Android	Android 4.4 and later
Internet Explorer	10.0 and later
Firefox	Recent versions
Chrome	Recent versions
Safari (Mac)	Recent versions

Assets

Workspaces Available

The Cross-Slider Ad feature includes two HTML5 Workspaces built using the HTML5 Polite Banner and Responsive Expandable format. Features can also be added to any Sizmek Workspace unit.

Cross-Slider Essential Files

Filename	Description
`scripts/crossSlider.js`	Cross-Slider script file
`scripts/crossSlider_conf.js`	Cross-Slider configuration script file
`styles/crossSlider_style.css`	Cross-Slider Stylesheet
`images/draggable_button_default.png`	Slider button
`images/pause_btn.png`	Pause button handle both videos at the same time
`images/play_btn.png`	Play button handle both videos at the same time
`images/sizmek_1.jpg`	An image for the first slide
`images/sizmek_2.jpg`	An image for the second slide
`images/loading.gif`	Loading animation when is loading a video

Implementing the Ad Feature

How to Add the Ad Feature to your Workspace Code

Procedure

The following steps illustrate how to add the Cross-Slider Ad Feature to your creative Workspace.

Add the following to the head of your index file including the components that you need.
- The 'EBAPI' component is necessary to work properly.
- The ' Video' component is necessary only if you have a video in the Ad.
- The 'EBCMD' component is in the case that the ad will be served in App (MRAID).

 <script> EBModulesToLoad = ['Video','EBCMD','EBAPI'];<script>
 <script type="text/javascript" src="http://ds.serving-sys.com/BurstingScript/adKit/adkit.js"><script>
 <link type="text/css" rel="stylesheet" href="styles/crossSlider_style.css"/>
 <script type="text/javascript" src="scripts/crossSlider.js"></script>

Add the following to the end of your index file.
It´s the configuration file.

 <script type="text/javascript" src="scripts/crossSlider_conf.js"></script>
</body>
</html>

Edit the configuration file scripts/crossSlider_conf.js

 var config = {
 	typeSlider: "horizontal",
	mouseIcon: "ew-resize",
	container: "#mainTestA",
	slideDivOne: "#dragA1",
	slideDivTwo: "#dragA2",
	sliderNavigationButton: "crossSliderDragButtonDefault, images/draggable_button_default.png",
	sliderNavigatorLine: "crossSliderDragButtonStyle",
	resolveOne: "autoplay",
 	resolveTwo: "autoplay",
	playButtonForVideos: true,
	threshold: 20,
	autoAnimationDuration: 10,
	autoAnimationPositions: ["80%", "20%", "60%", "30%", "80%", "10%"],
	autoResolve: true,
	autoResolveDivWin: "resolveOne",
	autoReplayDuration: 0,
	autoAnimationLoops: 5,
 	slideNavigation: "all",
	panelName: "",
	accelerometerOffSet: [0, 0, 0]
};

// Instantiate Class
var crossSlider = new CrossSlider(config);

Customizations

Variables	Type	Description	Default
`typeSlider`	String	Drag Elements will slide Horizontal or Vertical	horizontal
`mouseIcon`	String	MouseIcon to show on MouseOver (CSS). Examples: ew-resize, row-resize, crosshair	ew-resize
`container`	String	This is the container for the comparison divs. You can use an Id or Class If it's empty it will be created with responsive behavior.	[optional]
`slideDivOne`	String	the Div will be used for the first element. You can use an Id or Class	[mandatory to use an ID or Class]
`slideDivTwo`	String	the Div will be used for the second element. You can use an Id or Class	[mandatory to use an ID or Class]
`sliderNavigationButton`	String	Handle Button using CSS-style selector. Optional: second variable with image URL from the workspace separated with coma. Example: "crossSliderDragButtonDefault, images/draggable_button_default.png"	crossSliderDragButtonDefault
`sliderNavigatorLine`	String	Handle Line using css-style selector	crossSliderDragButtonStyle
`resolveOne`	String	The resolve div to display if the first/second div threshold is met. Options: 1- Div Id: the div selected will be shown at the end. 2- autoplay: video will be played automatically. 3- empty: the option selected will be displayed.	[optional]
`resolveTwo`	String		[optional]
`playButtonForVideos`	Boolean	If you have 2 videos if it´s true, a button will be shown in the middle of the Cross-Slider. The button will play both videos at the same time if the device is compatible	true
`threshold`	Number	Percentage of the image that needs to display, to fully resolve for the cross slide divs.	30
`autoAnimationDuration`	Number	It's the duration for the Automatic animation if autoAnimationDuration is 0 automatic animation is disabled.	0
`autoAnimationPositions`	Array	Psitions for the dragElements during the automatic Animation. It will do loop if it´s necessary	`["80%", "20%", "60%", "30%", "80%", "10%"]`
`autoResolve`	Boolean	If the user does not interact with the Cross-Slider will be resolved automatically	true
`autoResolveDivWin`	String	The resolve div to display if the autoResolve is enabled. Options: "resolveOne", "resolveTwo", "random"	random
`autoReplayDuration`	Number	The duration for the Automatic Replay. if autoAnimationDuration is 0 is disabled for images and for videos it will restart at the end of the video	0
`autoAnimationLoops`	Number	Maximun of loops after the Cross-Slider is ended	1
`slideNavigation`	String	Slide Navigation behavior. 'All' has all the option enabled. 'Click' Options: "all", "click", "drag", "tilt" (Tilt option will use the Accelerometer feature, only for mobile devices) You can choose one or several options separated with coma. Example: "drag,tilt"	all
`panelName*`	String	If you use the 'tilt' option *Accelerometer options: // panelName: Only in the case you are using a panel if not you can put empty(it's for accelerometer feature)	[optional]
`accelerometerOffSet*`	String	Establish Reference to coordinate offset [alpha, beta, gamma]	[0, 0, 0]

* Note: these options are only in the case you want to use the Tilt option with the accelerometer of mobile devices.

Cross-Slider feature uses the Accelerometer Feature to get the positions of the mobile device. You will find more information about the custom Script below.

Ad Feature CallBack Functions

You can include some functions in your project so you will get callBacks from each action of each crossSlider you have.

comparisonStart: When the comparison Start (by user interaction or automatically)

 function comparisonStart(args){
	var mainDiv = args.mainDiv;
	switch(args.actionType){
	case "drag":
	break;
	case "tilt":
	break;
	case "auto":
	break;
	}
 }

comparisonComplete: When the comparison ends (by user interaction or automatically)

 function comparisonComplete(args){
	var mainDiv = args.mainDiv;
	switch(args.actionType){
	case "drag":
	break;
	case "tilt":
	break;
	case "click":
	break;
	case "auto":
	break;
	}
 }

sliderDivOneSelected: if the slider div one is selected dragging, tilting, clicking or automatically the slide.

 function sliderDivOneSelected(args){
	var mainDiv = args.mainDiv;
	switch(args.actionType){
		case "drag":
		break;
		case "tilt":
		break;
		case "click":
		break;
 		case "auto":
		break;
	}
 }

sliderDivTwoSelected: if the slider div two is selected dragging, tilting, clicking or automatically the dragSlider.

 function sliderDivTwoSelected(args){
 var mainDiv = args.mainDiv;
	switch(args.actionType){
 		case "drag":
 		break;
		case "tilt":
 		break;
 		case "click":
 		break;
 		case "auto":
		break;
 	}
 }

Using the object'args' you can get more information about:

'actionType'if the action from the Cross-Slider was by "Drag", "Tilt", "Click" or if the action was automatically without interaction of the user.
'mainDiv'in the case that you have several Comparison in the same project you can to know from what comparison comes the action.

Common Customizations

Set Up the Container

The variable 'container' is the place where Cross-Slider will be created. If this variable is empty by default, the main will be a container with responsive behavior.

If you can select an Id or class like 'mainTestA':

<div id="mainTestA" class="demo1"></div>

You can include a class to modify the styles like 'demo1' so you can change the width, height, top, etc.. for example 'demo1' has:

 .demo1{
 	display:none;
 	position:absolute;
 	width:250px;
 	height:140px;
 	top:100px;
 	left:25px;
 }

To get a good result is recommended the Main that you will use should have the display: none.

Comparison with Two Images

These variable 'slideDivOne' and 'slideDivTwo' are the elements that you will show in each part of the Cross-Slider

If you want to show two Images in the Cross-Slider you can use:

<div id="dragC1" ><img src="images/cat_1.jpg" alt="" ></div>
<div id="dragC2" ><img src="images/cat_2.jpg" alt="" ></div>

slideDivOne would be "#dragC1" and slideDivTwo would be"#dragC2"

Comparison with Two Videos

If you want to show two Videos you can use this example:

<div id="dragA1">
	<video id="video" controls playsinline poster="images/sizmek_1.jpg" preload="none"
 	<source src="videos/video2.mp4" type="video/mp4">
 	<source src="videos/video2.webm" type="video/webm">
	Your browser does not support the <code>video</code> element.
 	</video>
</div>
<div id="dragA2">
	<video id="video" controls playsinline poster="images/sizmek_2.jpg" preload="none">
	<source src="videos/video.mp4" type="video/mp4">
	<source src="videos/video.webm" type="video/webm">
	Your browser does not support the <code>video</code> element.
	</video>
</div>

The variable slideDivOne would be "#dragA1" and slideDivTwo would be"#dragA2"

Comparison with HTML Content

If you want to show an image with some HTML you should to include the image inside a DIV with id="crossSliderImage" and after all your HTML code, like the example:

<div id="dragB1" style="display:none;">
	<div id="crossSliderImage">
 		<img src="images/paris_1.jpg" alt="" >
	</div>
 	<div id="salesB1">
		<p id="salesText">
		<span id="offer">Relax<br>Offer</span><br>
		<span id="discount">30%</span>
		</p>
	</div>
</div>

Comparison with Mixed Content

In the case that you want to mix an image with a video in the comparison, you should use a DIV with Id= "crossSliderImage"

<div id="dragA2">
	<video id="video" controls playsinline poster="images/sizmek_2.jpg" preload="none">
	<source src="videos/video.mp4" type="video/mp4">
	<source src="videos/video.webm" type="video/webm">
 	Your browser does not support the <code>video</code> element.
 	</video>
</div>
<div id="dragB2" style="display:none;">
	<div id="crossSliderImage">
 		<img src="images/sizmek_2.jpg" alt="" >
 	</div>
</div>

When Cross-Slider is Resolved

You can choose what you want to do after one slide is selected only changing these variables resolveOne (for the slide1) and resolveTwo (for the slide2). There are 3 options to show after the slide is resolved:

Div Id or a specific Class: the Div element selected will be shown at the end the comparison.

Example:

<div id="endDiv1B" style="display:none;width:100%;height:auto;"><img src="images/end_1.jpg" alt="" ></div>

Autoplay: video will be played automatically if the device is compatible. (some mobile devices it´s not possible to do autoplay if there isn't a user's touch)

Empty: the image/HTML selected only will be fully displayed

Setting Up the Cross-Slider Ad Feature in the Sizmek Platforms

Sizmek MDX 2.0 Setup

Archive the Cross-Slider workspace into ZIP files, preserving the directory structure. You can do this with WinZip, 7Zip, or another archiving program.

Zip and upload the HTML5 Workspace Folder found in the template folder.
Log into the MDX 2.0 platform.
Click on Manage > Creative Assets, and upload your Workspace to the appropriate asset folder
(Optional) Rename the folder.
From the main menu, select Shortcuts > Create New Ad > Create a New Ad.
In the Ad Name field, enter the unique name of your ad.
Choose a format from the format type drop-down.
Choose the HTML5 Workspace Folder you uploaded to the platform.
Navigate to Advanced Features > Custom JS and enter the following Custom Script: PL_HTML5_Accelerometer.js
Save.

Sizmek Advertising Suite Setup

Zip the HTML5 Workspace Folder found in the template folder.
Login to the Sizmek Advertising Suite.
Click the Creative menu item > Asset Library, and upload your Workspace to the appropriate asset folder.
(Optional) Rename the folder.
Click Creative > Ads and click New Ad and select Blank Ad.
In the Ad Name field, enter the unique name of your ad.
Choose a format from the Ad Format drop-down.
Under Main Assets select the Workspace folder and default image.
Under Clickthrough & Events > Events, add a new Preload Event and add the following Custom Script:PL_HTML5_Accelerometer.js
Save.

Custom Interactions

Interaction Name	Description
CrossSlider_Dragged	When user drag the Slider button (on mouse down event)
CrossSlider_Dragged_Resolved_left	When user drags and chose one option in a specific direction
CrossSlider_Dragged_Resolved_right
CrossSlider_Dragged_Resolved_up
CrossSlider_Dragged_Resolved_down
CrossSlider_Tilt_Resolved_left	When user tilts and chose one option in a specific direction
CrossSlider_Tilt_Resolved_right
CrossSlider_Tilt_Resolved_up
CrossSlider_Tilt_Resolved_down
CrossSlider_Clicked_left	When user clicks and chose one option in a specific direction
CrossSlider_Clicked_right
CrossSlider_Clicked_up
CrossSlider_Clicked_down
CrossSlider_Dragged_autoResolved_left	If the automatic animation is enabled and an option is selected automatically
CrossSlider_Dragged_autoResolved_right
CrossSlider_Dragged_autoResolved_up
CrossSlider_Dragged_autoResolved_down
CrossSlider_autoResolved	The total of the cross Slider is resolved automatically
CrossSlider_autoRestarted	When the CrossSlider restart again without user interaction
CrossSlider_restarted	When the CrossSlider restart again after user interaction
CrossSlider_Click_PlayButton_Videos	If the user click in the button to play the videos
CrossSlider_Click_PauseButton_Videos	If the user click in the button to pause the videos

Known Issues

In Unfriendly iframes using the "Tilt" option in iOS, the Accelerometer Feature doesn't receive data from the device. In this case, if the Cross-Slider is still during 3 seconds without tilt interaction the autoAnimation will start (if it´s enabled)
In iPad and in MRAID(only in iOS) are not compatible to play 2 videos at the same time. The play button during the comparison won't be visible in these cases

Change Log

October 9, 2017

Initial Release