PRODUCT
Follow

Overview

Introduction

The 3D Product Viewer Ad Feature takes a sequence of images and creates an image that can be rotated 360 degrees around its axis. The 3D Product Viewer Ad Feature works on both desktop and mobile, using both touch and mouse events to rotate the object. 

 

 3d.jpg   

Downloads

The following table provides links to the template  for the 3D Product Viewer ad feature.

Template

Sizmek_360_Viewer_1_0_3_DeluxeBanner.zip

Supported Platforms

Platform

Supported Version

Windows

Internet Explorer 10+, Edge, Firefox, Chrome, Safari

Mac

Firefox, Chrome, Safari

iPhone

iOS 8.0 and later

iPad

iOS 8.0 and later

Android

Android 4.1 and later (including tablets)

Assets

Workspaces Available

The 3D Product Viewer Ad Feature includes one HTML5 Workspace for an HTML5 Single Expandable working demo. 

Included Workspace Files

      Filename

Description

config.js

Sizmek Ad Kit manifest file.

images/banner/DefaultImage300x250.gif

Sizmek Ad Feature default backup Image and demo background

images/earth/

Image directory for Demo 360 Image

images/earth/sprites.png,306.png,fs.png, 360_icon.png

Additional images for feature should be included in this directory

index.html

Sizmek Ad Feature HTML file.

scripts/expandable_banner.js

Script for single expandable format

scripts/jquery-1.10.2.min.js

jQuery include

scripts/threesixty.min.js

360 Image Slider plugin script

scripts/threeSixtyImageView.js

Sizmek Ad Feature script

styles/styles.css

Sizmek Ad Feature Stylesheet

styles/threesixty.css

360 Image Slider Stylesheet

  

Implementing the Ad Feature

How to Add the Ad Feature to Your Workspace Code

Prerequisite

Before you begin, make sure you have the following resources available:

  • 3D Product Viewer Ad Feature Files 
Procedure

The following steps illustrate how to add the 360 Image View Ad Feature to your creative Workspace.

  1. Add the Sizmek AdKit include to the head of your index.html file.

    Note: The file path has been shortened for simplification.

    <script type="text/javascript" src="http://ds.serving-sys.com…/adkit.js"></script>>/pre>

  1. Include 360 Stylesheet:
    <link type="text/css" rel="stylesheet" href="styles/threesixty.css">
  1. Include jQuery, 360 plugin script and Ad Feature script:
    <script type="text/javascript" src="scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="scripts/threesixty.min.js"></script>
    <script type="text/javascript" src="scripts/threeSixtyImageView.js"></script>
  1. Include jQuery, 360 plugin script and Ad Feature script:
    var config = {
        div: '.earth', 
        totalFrames: 100, 
        imgList: '.threesixty_images' 
    } 
    
    threeSixtyImageView = new ThreeSixtyImageView(config);

3D Product Viewer Options 

Option

Description

Default

div:String

Class of div container

.earth

totalFrames:Number

Set total number for frames used in the 360 rotation

100

currentFrame:Number

Set the starting frame of the auto spin on initialize

1

endFrame:Number

Set the frame where you want the auto spin to stop

20

framerate:Number

Set the Speed of the animation

60

imgList:String

The Selector of the image list that the images are added to

‘. threesixty_images’

progress:String

The Selector of the div that will contain the progress loader

‘.spinner’

imagePath:String

Path to the directory with 360 image assets

‘images/earth/

filePrefix:String

file prefiex for the assets. Ex: file name ‘my_file_1.png’, prefix would be ‘my_file_’

""

ext:String

File extension of the assets

‘.jpg’

height:Number

Height you want to set for the three sixty container

600

width:Number

Width you want to set for the three sixty container

450

style:Object

Object containing styles for the preloader

{}

navigation:Boolean

Set false if you don't want default navigation controls

false

autoplayDirection:Number

Control the direction of the spin depending on your assets. You can use 1 or -1

1

drag:Boolean

Set false if you want to disable mouse and touch events on the slider.

true

disableSpin:Boolean

disable the initial spin on load

false

zeroPadding:Boolean

true will add 0 padding for file names 1 - 9

false

responsive:Boolean

Enable responsive width for 360

false

onReady:Function

Callback triggered once all images are loaded and ready to render on the screen

‘function() {}’

playSpeed:Number

Value to control the speed (in milliseconds) of play button rotation

100

zeroBased:Boolean

Zero based for image filenames starting at 0

false

Setting Up the 3D Product Viewer Ad Feature in the Sizmek Platform

Sizmek MDX2.0 Setup

Archive the 3D Product Viewer 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 MDX2.0 Platform.
  3. Click on ManageCreative 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 HTML5 Single Expandable from the format type drop-down.
  8. Choose the HTML5 Workspace Folder you uploaded to platform.
  9. Click Save

Sizmek Sizmek Advertising Suite Setup

  1. Zip the HTML5 Workspace Folder found in the template folder.
  2. Log in to the Sizmek Advertising Suite.
  3. Click Creative > Asset Library, and upload your Workspace to the appropriate asset folder.
  4. (Optional) Rename the folder.
  5. Click the Creative > Ads and click the New Ad button and select Blank Ad.
  6. In the Ad Name field, enter the unique name of your ad.
  7. Choose HTML5 Single Expandable from the Ad Format drop-down.
  8. Under Main Assets select the Workspace folder and default image.
  9. Click Save

Custom Interactions

None 

Known Issues

  • Images flicker on IE11 and Firefox on first load.
  • Auto spin does not work in IE11 and Edge.
  • Not supported on Surface devices.

Important Notice

Important: Developers must use a third party app, such as Adobe Media Encoder, to create the image sequence.

Change Log

22 October 2018

  • Product name changed from 360 Image View to 3D Product Viewer

28 September 2016

  • Updated for AdKit.
  • Support secure protocol.
  • Migrated to the Sizmek Advertising Suite.

 

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments