Swipe Gallery. HTML5 Component..2.. swipegallery.css ... - Google

.Swipe Gallery.
HTML5 Component.
Introduction.
.Rich Media HTML5 Build Guide.
.JULY 2012 .
Mobile devices are heavily constrained for screen real estate. Creative layouts can maximize the space available
to convey your brand message, all while being highly interactive. On phones and tablets, users have grown
accustomed to swiping content naturally in order to reveal additional information. The carousel/gallery metaphor
is a common way to enable users to cycle through a series of media. Combined with touch input, the Swipe Gallery
is an excellent way to show a variety of media to users in a way that is not intrusive. HTML5 Swipe Gallery achieves
hardware accelerated, “buttery smooth” animation on modern WebKit-based devices.
A preview of a creative using the Swipe Gallery HTML5 component can be found here.

.Build &.
.Delivery.
Swipe Gallery is a configurable HTML5 template & component that consists of an horizontal strip of images that is
sequenced in such a way that it allows a user to swipe from one image to the next in a smooth, swiping gesture, and
is supported for both touch and mouse.
.NOTE:. This format is initially supported only on WebKit-based browsers (Android, iOS, desktop Chrome and Safari). For initial deployment it is
recommended that you explicitly target mobile Android and iOS.
Developers can easily configure the gallery images, ad dimensions, and animation speed as the gallery is swiped.
Events are raised when an image is swiped into view so custom events can be reported to gauge user interaction.
At present the Swipe Gallery has no CTA associated with the component. It is recommended that the ad developer
embed the Swipe Gallery as part of a broader ad/creative that will feature CTAs elsewhere.
Demo files for this creative can be found .here.
A breakdown of the files and how they work can be found below:
.1.. swipeGallery.html (300x250 inpage)
This is the HTML page which contains the HTML5 creative itself, it creates and calls the elements which the creative
will pull in and also contains the DoubleClick HTML5 Enabler.
The Enabler contains all of the tracking calls and functionality which allows this creative to work within the
DoubleClick Studio platform and should be added to the head of your HTML as follows:
.NOTE:. Additional information on setting up HTML5 creatives within DoubleClick Studio and the use of the Enabler can be found .here.
.NOTE:. The HTML page is fully commented, however if you have any questions or comments about the please reach out to our technical team
via .dclk-drmtechnical@google.com.
.2.. swipegallery.css, swipegallery.js, modernizr.js
These are required CSS and JS files which form the basis of the swipe gallery component. They contain all of the
script and functionality of the swipe gallery and as such need to be included within the head of the HTML as follows:

.3.. 1.jpg, 2.jpg, 3.jpg, 4.jpg
These are the images which are pulled into the Swipe Gallery. Note that you can configure the gallery to have an
arbitrary number of images, though you should balance this with total filesize and download times on mobile
devices.
.4.. swipe.png
This is an image which is displayed within the swipe gallery on first load that makes it clear to a user that the
images can be “swiped”. The image can be turned on or off within the config settings explained further down this
document.
.5.. backup.jpg
This is the backup image for the creative which will display if the creative is viewed by a non HTML5 compliant
browser. It should be the size of the creative, so in this case 300x250px
.Using the Component.
.>. Configuration
The goal of this mobile component is to be as flexible as possible especially around its configuration. In order to set
it up a config object is created in JavaScript (shown below) and then passed to the component.
var config = {
// // Id of container that will hold the component.
adContainerId: 'gallery',
// Image that instructs user that swiping is possible.
swipeInstructionImage: 'swipe.png',
// Images in the swipe gallery. Make sure that the width
// of each image should be the same and should furthermore
// match the container div's width.
images: [{'src': Enabler.getUrl('1.jpg'), 'width': 315, 'height': 197},
{'src': Enabler.getUrl('2.jpg'), 'width': 315, 'height': 197},
{'src': Enabler.getUrl('3.jpg'), 'width': 315, 'height': 197},
{'src': Enabler.getUrl('4.jpg'), 'width': 315, 'height': 197}
],
// Transition duration in milliseconds.
transitionDuration: 300,
zIndexStart: 8000,
// Whether to display the slide the user is on.
showNavigation: false,
// Delay in ms (used to correct an Android animation glitch).
animationSnapDelay: 40
};
.NOTE:. To pull in more images to the swipe gallery simply add extra lines to the images array and the swipe gallery will pull in more images.
Alternatively if you want fewer images, simply remove an image from the array.
.NOTE:. Enabler.getUrl() is required when loading in an image within Studio to make sure that studio can locate the file properly when adserved.
For more information check out our help centre .here.

.>. Instantiation and Event Handling
Wait for the Enabler to be initialised:
// Set up our point of entry.
if (Enabler.isInitialized()) {
init();
} else {
Enabler.addEventListener(studio.events.StudioEvent.INIT, init);
}
Instantiating the component is straightforward
function init() {
var gallery = new studio.innovation.components.SwipeGallery(config);
}
Immediately following instantiation, you can set up listeners and callback for the SLIDE custom event. When a user
slides to an image, the event slideX is raised where X is a number starting from 0 and counting upward depending
on how many images are in the gallery.
gallery.addEventListener('slide0', function() {
console.log('slide0');
Enabler.counter("slide - image 1");
});
gallery.addEventListener('slide1', function() {
console.log('slide1');
Enabler.counter("slide - image 2");
});
gallery.addEventListener('slide2', function() {
console.log('slide2');
Enabler.counter("slide - image 3");
});
gallery.addEventListener('slide3', function() {
console.log('slide3');
Enabler.counter("slide - image 4");
});
.NOTE:. The Enabler.counter() call is a custom Rich Media counter which will appear within the Rich Media report for your creative, allowing you
to easily see which of your images was viewed the most. For more information on setting up Rich Media Counters see our help centre .here.
To actually show the component you must call the render method and supply the parent container. The parent
container can be any valid element.
gallery.render(document.getElementById('gallery'));
Finally, a method is available for you to jump to any slide in the gallery. The two parameters it takes are the slide
index number (starting at index 0) and the animation duration, in milliseconds.
gallery.slide(3, 300);
gallery.slide(2, 3000);
gallery.slide(0, 1000);

Additional Notes.
Once finished your creative and all of its files should be uploaded to Studio exactly as you would do with any other Rich
Media creative, for more information on uploading to Studio check out the help centre .here.
Swipe Gallery is compatible with any HTML5 format that’s uploaded to DoubleClick Studio and some more
advanced sample files which use the swipe gallery component can be downloaded from the Resources section
below.
.Resources.
.>. [DEMO] Swipe Gallery
.>. [FILES] Inpage Demo (Basic)
.>. [FILES] Inpage with Video Demo (Advanced)
.>. [FILES] Expanding Demo (Advanced)
.>. [HELP DOCUMENTATION] Studio link to HTML5 Information
.>. [HELP DOCUMENTATION] Studio Enabler API/SDK Information
.>. [HELP DOCUMENTATION] Setting up your creative in Studio
.>. DoubleClick Rich Media Help Center
.>. DoubleClick Rich Media Studio
.>. DoubleClick Rich Media Gallery
.>. @rmgallery - DoubleClick Rich Media Gallery Twitter Account

Contact Us.
If you still have any questions relating to this format or build then please feel free to contact our Rich Media
Technical Support team through Doubleclick’s Help Center Contact Us form.
About DoubleClick.
For advertisers and publishers who need to reach a target audience, the Google’s DoubleClick product suite is
an advertising platform that maximizes revenue growth and return on advertising spend through a unique and
innovative ad targeting process. The experience and innovative spirit at DoubleClick drives a constant evolution of
products and solutions, ensuring the best, most effective advertising tools are always at our customers’ command.
.www.doubleclick.com.
.www.richmediagallery.com.
.DoubleClick NY: 76 Ninth Ave, New York, NY 10011.
.www.google.com/doubleclick ©2012 Google Inc. All rights reserved..