Animated expanding image ad
Animating the expansion operation is easy. Below is an example using the popular JavaScript library jQuery.
Live example page here. http://dev1.cxpublic.com/examples/expandingad-animated.html
Render template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Expanding Ad Example</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style type="text/css">
body { margin: 0; }
#smallImageBox { float: right; position: relative; width: 200px; height: 200px; padding: 0; margin: 0; }
#largeImageBox { position: absolute; right: 0; width: 200px; height: 200px; padding: 0; margin: 0; display: none; }
#largeImageBox a, #largeImageBox a:hover, #largeImageBox a:visited, #largeImageBox a:active { border: 1 solid black; color: black; float: right; }
#largeImageBox img { border: 1px solid black; }
</style>
</head>
<body xmlns:tmp="javascript:">
<!-- Include the cx.js script -->
<script type="text/javascript" src="https://scdn.cxense.com/cx.js"></script>
<!-- Ad template -->
<div id="smallImageBox" onmouseover="sendParentResizeMessage(700, 200); if ('postMessage' in window) { document.getElementById('largeImageBox').style.display = 'block'; }">
<!-- This is the invisible template that is used to instanciate the ad -->
<div id="AdsTemplate" style="display: none;">
<!--%
var ads = data.searchResult.spaces[0].ads;
for (var i = 0; i < ads.length; i++) {
var ad = ads[i];
var smallImageSrc = '';
var largeImageSrc = '';
var images = ad.creative.images;
for (var k = 0; k < images.length; k++) {
if (images[k].key === 'Small') { smallImageSrc = images[k].source; }
if (images[k].key === 'Large') { largeImageSrc = images[k].source; }
}
%-->
<div id="largeImageBox" onmouseout="sendParentResizeMessage(200, 200); document.getElementById('largeImageBox').style.display = 'none';">
<a tmp:href="{{ad.clickUrl}}" target="_blank">
<img id="largeImage" width="700" height="200" tmp:src="{{largeImageSrc}}" alt=""/>
</a>
</div>
<img width="200" height="200" tmp:src="{{smallImageSrc}}" alt=""/>
<!--%
}
%-->
</div>
</div>
<!-- Insert AdSpace -->
<script type="text/javascript">
var cX = cX || {}; cX.callQueue = cX.callQueue || [];
cX.callQueue.push(['insertAdSpace', {
adSpaceId:'00000000004c961a',
templateElementId: 'AdsTemplate',
targetElementId: 'smallImageBox',
backend: 'sandbox'
} ]);
</script>
<!-- Define function which sends the "resize" message to the parent -->
<script>
function sendParentResizeMessage(width, height) {
if (parent && parent.postMessage) {
var hashArgs = cX.library.parseHashArgs();
var parentElementId = hashArgs.parentElementId;
var message = 'method=updateAdSpace'
+ '&contentWidth=' + width
+ '&contentHeight=' + height
+ '&elementId=' + encodeURIComponent(parentElementId);
window.parent.postMessage(message, '*');
$("#largeImageBox").animate({ width: width }, "fast", "linear");
}
}
</script>
</body>
</html>
|
Code on publisher page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Expanding Ad Example</title>
</head>
<body style="min-width:720px; margin: 10px; padding: 0; ">
<!-- Expanding Ad Tag Begin -->
<style type="text/css">
#expandingAdTarget {
position: relative;
height: 200px;
width: 200px;
float: right;
}
#expandingAdTarget iframe {
position: absolute;
right: 0;
top: 0;
}
</style>
<!-- The ads are inserted into this div: -->
<div id="expandingAdTarget"></div>
<!-- Insert AdSpace -->
<script type="text/javascript">
var cX = cX || {}; cX.callQueue = cX.callQueue || [];
cX.callQueue.push(['insertAdSpace', {
width: 200, height: 200, // The initial "small" size
resizeToContentSize: true, // Allow full resizing control from template
appendToElementId: 'expandingAdTarget',
renderTemplateUrl: 'ExpandingRenderTemplateAnimated.html'
}]);
</script>
<!-- Load cx.js -->
<script type="text/javascript">
(function() { try { var scriptEl = document.createElement('script'); scriptEl.type = 'text/javascript'; scriptEl.async = 'async';
scriptEl.src = ('https:' == document.location.protocol) ? 'https://scdn.cxense.com/cx.js' : 'http://cdn.cxense.com/cx.js';
var targetEl = document.getElementsByTagName('script')[0]; targetEl.parentNode.insertBefore(scriptEl, targetEl); } catch (e) {}; }());
</script>
<!-- Expanding Ad Tag End -->
<h1>Main content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. (...)</p>
</body>
</html>
|
Last updated:
