PRODUCT
Follow

Overview

Introduction and Screenshots

The Image Gallery Ad Feature enables a user to navigate through a series of images by either swiping left or right on an image, or by tapping on the navigation arrows. Each image has its own customizable caption, as well as an individual clickthrough.

The following illustration shows the Image Gallery Ad Feature.  Within this demo, a user is able to swipe between five different images or use navigation buttons to advance through them. There are also UI indicators at the bottom of the gallery to show the total number of images as well as the image in the sequence currently being selected.  The “Click” button is a clickthrough link that enables the user to click through to the specific landing page.

gallery1.jpg  gallery2.jpg

There are three different templates representing the three different ways images may be shown with the Image Gallery Ad Feature.

With the first or “Fixed Sized” method, the user specifies a width and height of the image gallery.  The packaged template uses a 300x250 size.  Images that are larger than 300x250 will be resized to maintain their aspect ratio and fit within this pre-defined gallery.  Smaller images will not be altered.

With the second or “Auto Sized” method, the Image Gallery is resized based on the maximum width and maximum height of all the images within the gallery.  This packaged template has a size of 500x400.  Like the fixed sized variant, images that are larger than the determined size (e.g. 500x400 in the demo) will be resized to maintain their aspect ratio and fit within this pre-defined gallery.  Smaller images will not be altered.

With the third or “Full Screen” method, the window gallery will be resized to fit the window size.  This method will resize the images to maintain their same aspect ratio and fit within the gallery, but unlike the other two templates, the fullscreen variant will enlarge smaller images. 

Demos/Downloads

The following table provides links to the template and demo for the HTML5 Image Gallery ad feature.

Template

Sizmek_image_gallery_3_0_0.zip

Demo

Preview demo

Supported Platforms

Platform

Supported Version

Windows

Internet Explorer 10+, Edge, Firefox, Chrome

Mac

Chrome, Safari

iPhone

iOS 9.0 and later

iPad

iOS 9.0 and later

Android

Android 4.4 and later ( including tablets)

Assets

Workspaces Available

The Image Gallery Ad Feature includes three templates for Workspaces, built using the HTML5 Polite Banner. 

Included Workspace Files

File Name 

Description

config.js

Sizmek Ad Manifest file

images/xxx.jpg

Image Gallery Images

images/backup.jpg

Demo Default Backup image

images/loader.gif

Ad Feature Image Loader animation

index.html

Demo HTML index file

scripts/imageGallery.js

Ad Feature Javascript file

styles/style.css

Ad Feature StyleSheet

  

Implementing the Ad Feature

Getting Started

Add the Image Gallery Ad Feature to Your Workspace Code

The following steps illustrate how to add the Image Gallery Ad Feature to your Creative Workspace.

Procedure
  1. Include the supporting Image Gallery Javascript file in the head of your Workspace index.html file:
    <script language="JavaScript" src="scripts/image_gallery.js"></script>
  1. Include the Image Gallery Stylesheet: 
    <link href="styles/style.css" rel="stylesheet" type="text/css" media="all"/>
  1. Add and edit the following code to your HTML's body element. 

    <div id="imageGallery"></div>
    <script type="text/javascript">
	var imageGalleryConfig = {
	    container: "imageGallery",
	    width: 300,
	    height: 250,
	    images: [
		{
		    source: "images/1.jpg",
		    width: 500,
		    height: 400,
		    caption:"Impressions that inspire"
		},
		{
		    source: "images/2.jpg",
		    width: 500,
		    height: 400,
		    caption:"Data enablement"
		},
		{
		    source: "images/3.jpg",
		    width: 500,
		    height: 400,
		    caption:"Liquid formats"
		},
		{
		    source: "images/4.jpg",
		    width: 500,
		    height: 400,
		    caption:"Dynamic creative optimization"
		},
		{
		    source: "images/5.jpg",
		    width: 500,
		    height: 400,
		    caption:"Media Execution"
		}		
	    ],
	    actionRegister: function(){
		EB.userActionCounter("Image_Gallery_Navigated_To_0");
		EB.userActionCounter("Image_Gallery_Navigated_To_1");
		EB.userActionCounter("Image_Gallery_Navigated_To_2");
		EB.userActionCounter("Image_Gallery_Navigated_To_3");
		EB.userActionCounter("Image_Gallery_Navigated_To_4");
		EB.clickthrough("Image_Gallery_ClickThrough_0");
		EB.clickthrough("Image_Gallery_ClickThrough_1");
		EB.clickthrough("Image_Gallery_ClickThrough_2");
		EB.clickthrough("Image_Gallery_ClickThrough_3");
		EB.clickthrough("Image_Gallery_ClickThrough_4");
	    }
	};

	var myImageGallery = new ImageGallery(imageGalleryConfig);
    </script> 
  1. Configurations: The code you’ve pasted in step 2 is a basic configuration for your Image Gallery ad. Please change the values in configuration as needed

Property

Type

Description

container

String

The div id that you will write the Image Gallery Ad Feature to.

width

Integer

Number of pixels for the Image Gallery

Ad Feature width.

height

Integer

Number of pixels for the Image Gallery

Ad Feature height.

images

Array

The image items for the image gallery.


The images property is an array that contains image items for the image gallery, each image item contains following properties.

Property

Type

Description

source

String

The file path of the image.

width

Integer

The width of the image in the number of pixels.

height

Integer

The height of the image in the number of pixels.

caption

String

The caption of the image. (Optional)

widgets

Array

The widget(s) that shows up on the image (Optional)

bgColor

String

The background color for the image. (Optional)


The widgets property for setup the widget(s) that can display along with the image, a widget contains following properties.

Property

Type

Description

name

String

The name of the widget. (can be used to access the widget later)

content

String

The HTML code of the content that to be placed on the widget.

  1. Customization:

1) Customize your Image Gallery Ad Feature landing div by editing the following two lines in the code pasted in step 2


     <div id="image_gallery"></div>(remove)
     container: "image_gallery", (edit)

Edit the ”image_gallery” to the div id you plan your Image Gallery Ad Feature will go to. Note: All contents of the div will be replaced by Image Gallery Ad Feature.

2) Customize your Image Gallery Ad Feature configuration variable by editing the following two lines in the code pasted in step 2


    var imageGalleryConfig = {
    var myImageGallery = new ImageGallery(imageGalleryConfig);

Edit the “imageGalleryConfig” to the name you desired.

3) Customize your Image Gallery Ad Feature event names by changing the event name prefix. To do so, edit the following four lines in the code pasted in step 2


    EB.userActionCounter("Image_Gallery_Navigated_To_#");
    EB.clickthrough("Image_Gallery_ClickThrough_#");

Edit “Image_Gallery” to the name you desired. Depends on the number of the images you are using for the image gallery, you should have these two lines for each of images and replace the # with the index number of the image. (Starts from 0) Note: You MUST add eventNamePrefix to options if you change the event name prefix.

4) Customize your Image Gallery Ad Feature by adding options and templates. You may customize your Image Gallery Ad Feature by adding options and templates. Please change the following configurations as you need. The configuration formatted as follows


    var imageGalleryConfig = {
        container: "image_gallery",
	width: 300,
	height: 250,
	images: [{
		source: "images/1.jpg",
		width: 500,
		height: 400,
		caption:"Impressions that inspire"
	},],
	actionRegister: function(){
		EB.userActionCounter("Image_Gallery_Navigated_To_0");
		EB.clickthrough("Image_Gallery_ClickThrough_0");
	},
        options: {
            dimensionOverride: “none”,
            eventNamePrefix: “Image_Gallery”,
            imageSmartLoader: true,
            showImageCaption: true,
            showNavigationBar: true,
            showImageIndicator: true
        },
        templates: {
            caption: "{IMAGE_CAPTION}",
            indicator: "•"
        }
    };

Available Options

Option

Type

Description

Default

dimensionOverride

String

Overrides image gallery dimension option, available options are…

 

“fullscreen”: image gallery will be resized to document width and height.

“images”: image gallery will grab the maximum value of image width and image height from image items from the configuration.

“none”: no override

none

eventNamePrefix

String

The prefix of the custom clickthrough event name and user interaction name.

Image_Gallery

imageSmartLoader

Boolean

Use smart load to load images. When the smart load is enabled, image gallery will only load first two images when image gallery initialized, and then on user swipes, image gallery will only load the current image and the ones that before and after the current image. When Smart Load is off, image gallery will load all the images when image gallery initialized.

true

showImageCaption<code>

Boolean

Display image caption or not.

true

showNavigationBar

Boolean

Display navigation control or not. For the devices that do not support swipe, the navigation control should show up automatically even this option set to false.

true

showImageIndicator

Boolean

Display image indicator or not.

true

Available Templates

Template

Type

Description

Default

caption

String

Override the layout of image caption.

Note: The {IMAGE_CAPTION} string will be replaced with caption property from the image item.

{IMAGE_CAPTION}

indicator

String

Override the look for the image indicator.

&#8226;

 

5) Customize your Image Gallery Ad Feature by editing the stylesheet image_gallery/image_gallery.css.

Available Styles

Style

Description

.imageGallery.galleryStage

The style of inner div that writes the Image Gallery Ad Feature.

.imageGallery.imageCaptionBar

Style for the div that contains image caption.

.imageGallery.imageLoader

Style for image loading icon

.imageGallery.leftNavigation

Style for left navigation control.

.imageGallery.rightNavigation

Style for right navigation control.

.imageGallery.indicatorBar

Style for the div that contains image indicator.

.imageGallery.indicatorOn

On style for the indicator.

.imageGallery.indicatorOff

Off style for the indicator.

 

6) Customize your Image Gallery Ad Feature by overriding the stylesheet with your own existing CSS by adding customCSS to override the default CSS. The configuration is formatted as follows


    var imageGalleryConfig = {
        container: "image_gallery",
	width: 300,
	height: 250,
	images: [{
		source: "images/lincoln_center.jpg",
		width: 500,
		height: 380,
		caption:"Lincoln Center"
	},],
	actionRegister: function(){
		EB.userActionCounter("Image_Gallery_Navigated_To_0");
		EB.clickthrough("Image_Gallery_ClickThrough_0");
	},
        customCSS: [
            “.imageGallery.leftNavigation = .myLeftNavigation”,
	    “.imageGallery.rightNavigation = .myRightNavigation”
        ]
    };

The customCSS is an array contains the element using the format of [DEFAULT_CSS_NAME] = [CUSTOM_CSS_NAME] For available styles, please refers to 5) above.

  1. Methods

Available Methods

Method

Description

getCurrentIndex

This method will return the index number of the current image that appears in the image gallery.

getCurrentImage

This method will return the image object of the current image that appears in the image gallery.

showNavigation

Show navigation control.

hideNavigation

Hide navigation control.

showIndicator

Show image indicator.

hideIndicator

Hide image indicator.

showCaption

Show image caption.

hideCaption

Hide image caption.

goToNextImage

Slide to next image.

goToPreviousImage

Slide to previous image.

goToImage

Slide to specific image by supplied image index.

myImageGallery.goToImage([IMAGE_INDEX]);

clickThrough

Trigger click through for the current image.

resize

Resize the image gallery to certain width and height.

myImageGallery.resize([WIDTH],[HEIGHT]);

addWidget

Add widget to the image.

var widget1 = myImageGallery.addWidget([IMAGE_INDEX],"[WIDGET_HTML_CODE]");

Widget Methods

Method Name

Description

show

Show the widget.

widget1.show();

hide

Hide the widget.

widget1.hide();

moveTo

Move the widget.

widget1.moveTo([X], [Y]);

remove

Remove the widget.

Widget1.remove();


Setting up the Image Gallery Ad Feature in the Sizmek Platforms

Sizmek MDX2.0 Platform Setup

Archive the Image Gallery Ad Feature workspace into ZIP files, preserving the directory structure. You can do this with WinZip, 7Zip, or another archiving program.

  1. Zip the Workspace folder.
  2. Log into the MDX2.0 platform.
  3. Click 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 list.
  8. Choose the HTML5 Workspace Folder you uploaded to the platform.
  9. Save

Sizmek Sizmek Advertising Suite Setup

  1. Zip the Workspace 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 Creative >Ads. Then, click New Ad and select New Master Ad.
  6. In the Ad Name field, enter the unique name of your ad.
  7. Choose a format from the Ad Format list.
  8. Under Main Assets select the Workspace folder and default image.
  9. Save

Custom Interactions

Interaction Name Description
Image_Gallery_Navigated_To_# User navigate to image #
Image_Gallery_ClickThrough_# User clickthrough on image #

Known Issues

Change Log 

March 15, 2018

Updated to latest Ad Feature Template

Updated to Adkit

Migrated to SAS

Optimized Feature script to remove the use of custom scripts. 

Rebrand demos

 

July 26, 2016

Updated for secure protocol

 

July 24, 2014

Initial Release

 

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

Comments