PRODUCT
Follow

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.

demo1.jpg 

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.

 300x600.jpg

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.

  1. 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>
  1. 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>
  1. 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
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"

 FullContent.jpg

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"

 doublePlay.jpg

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:

paris.jpg

<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.

endCard.jpg

 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)

video.jpg

 

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

fully.jpg

 

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.

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

Sizmek Advertising Suite Setup

  1. Zip the HTML5 Workspace Folder found in the template folder.
  2. Login to the Sizmek Advertising Suite.
  3. Click the Creative menu item > Asset Library, and upload your Workspace to the appropriate asset folder.
  4. (Optional) Rename the folder.
  5. Click Creative > Ads and click New Ad and select Blank Ad.
  6. In the Ad Name field, enter the unique name of your ad.
  7. Choose a format from the Ad Format drop-down.
  8. Under Main Assets select the Workspace folder and default image.
  9. Under Clickthrough & Events > Events, add a new Preload Event and add the following Custom Script:PL_HTML5_Accelerometer.js
  10. 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
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments