Lightbox

Appearing front and center makes the lightbox highly effective at capturing attention, at generating clicks, and it never comes up short on viewable impressions!

Customization

  • By default the lightbox is automatically closed after 15 seconds, but you can adjust this from 1 to 900 seconds.
  • The lightbox will adjust to fit ads of varying sizes and orientation.
  • The lightbox can easily be made responsive to show appropriately sized ads to desktop/laptop users, mobile phone users and tablet users for a better user experience.

Media Support

  • Graphic banners (GIF/JPG/PNG)
  • Flash banners
  • HTML5 banners
  • Custom HTML banners, including forms with CSS and JavaScript
  • Third-Party banners from agencies and ad networks such as DoubleClick, Google, Sizmek and others

Deployment

Deploying lightboxes on your web site couldn't be easier. Our code wizard will generate all of the HTML code for you. All you have to do is copy and paste that code into the bottom of your web page near the </body> tag.

The code wizard also gives you the option to adjust the auto-close timeout if the default 15 seconds is not suitable.

Advisory

We are aware that lightboxes may require site changes to be compliant with the Better Ads standards because they cover up page content. Failure to achieve compliance may result in all of your ads being blocked by Google Chrome starting in early 2018. For more information about how you can deal with this situation, please read this article which explains everything in detail.

Recommendations

  • Lightboxes are best implemented with large-scale banners since they can utilize a good portion of the browser window area, but you don't want to go too large as not all users will have high-resolution screens!
  • We recommend serving 300x600 or 550x480 banners to desktop/laptop users and tablet users since they fit nicely on all such screens.
  • Smaller sizes such as 300x250 or 180x150 can be substituted for mobile phones users, which will improve the usability of your web site on those devices.
  • To make the lightbox a bit more polite you can optionally set it to disable itself for the remainder of the current browsing session if a visitor clicks the close button.

Advanced Techniques

Close Button

Don't like the default close button? You can change it by going to Settings > Basic > Code Wizard

Close Callback Function

The ability to include a JavaScript callback function in custom creatives is useful to stop audio or video from playing promptly when the lightbox is closed by the user: 

<script type="text/javascript">
function lightboxCloseCallback() {
// your custom close logic here...
}
</script>

Remember this needs to be a global function in order for it to be visible to the lightbox wrapper code. Using this callback is not necessary with HTML5 banners or video banners. Those types of banners are designed to destroy any audio/video components upon closing so they stop playing automatically.

Header and Footer

Header

<div id="lightbox_header" style="display: none; text-align: center; margin-bottom: 24px">
<img src="/images/logo.png" border="0" width="116" height="50" alt="AdvertServe" />
<span style="padding: 32px">Click here to continue to www.advertserve.com</span>
</div>

Footer

<div id="lightbox_footer" style="display: none; text-align: center; margin-top: 24px">
<span>This advertisement from our sponsors will close in <span id="lightbox_countdown"></span> seconds...</span>
</div>

Notice that we've included a special <span id="lightbox_countdown"></span> tag in the footer. It will be dynamically updated with the number of seconds remaining before the lightbox is closed. This is completely optional, of course, but it may be included in the header or the footer.

Return to Example Gallery