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

More documents

Recommendations

Info

.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.
Page 1: .Swipe Gallery. HTML5 Component. In
Page 5 and 6: Additional Notes. Once finished you

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

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?