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 |
|
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 |
|
Slider button |
|
Pause button handle both videos at the same time |
|
Play button handle both videos at the same time |
|
An image for the first slide |
|
An image for the second slide |
|
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 |
|
String |
Drag Elements will slide Horizontal or Vertical |
horizontal |
|
String |
MouseIcon to show on MouseOver (CSS). Examples: ew-resize, row-resize, crosshair |
ew-resize |
|
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] |
|
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:
|
[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"
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
Comments