Expandable / Flyout (Beta)

Summary

This is an ad which, when hovered over, will expand outward and display a second image in either the top, right, left, or bottom direction. Responsive and mobile friendly. Currently in 'beta', but stable.

Setup / Inputs

These are the fields / inputs taken to generate this ad. In general, inputs are not required. That said, these inputs are how you customize the ad!

  • Primary Image: The primary ad image to display
    Default value:
    Default Value

  • Primary Width: The width of the primary image
    Default value:
    300

  • Primary Height: The height of the primary image
    Default value:
    250

  • Fly out image: The image for the flyout/expanded portion of the ad
    Default value:
    Default Value

  • Flyout Width: The width of the expandable / flyout section
    Default value:
    300

  • Flyout Height: The height of the expandable / flyout section
    Default value:
    250

  • Flyout Direction: The direction to pop out: up, down, left, right
    Default value:
    down

  • Destination: Where the user gets taken when they click the ad
    Default value:
    http://broadstreetads.com

  • Maximum Cutoff Level: Bump this number (and experiment) if your ad is being clipped by another part of the page
    Default value:
    8

Embed An Example In Your Media Kit

Customers who wish to embed the example on some "Media Kit" page on their website can do so in one of two ways:

  • Option 1: If you have Wordpress and the Broadstreet plugin, you can use this shortcode anywhere in any post to render the example. 

    [broadstreet ad="34619"]

  • Option 2: If you do not have Wordpress, or choose not install the Broadstreet plugin, you can embed this javascript code snippet into your post: 

    <div street-address="34619"></div><script>
(function(d, s) {
  // CLICK MACRO AND CONFIGURATION SECTION
  var destination = '%%CLICK_URL_ESC%%';
  // DO NOT EDIT BELOW THIS LINE
  var js, bjs = d.getElementsByTagName(s)[0];
  js = d.createElement(s); js.async = true;
  js.src = "//ad.broadstreetads.com/display/34619.js?sa=1&"
    + (window.broadstreet ? 'init=0' : '')
    + (destination.indexOf('CLICK_URL_ESC') >= 0
      ? '' : '&destination=' + destination);
  bjs.parentNode.insertBefore(js, bjs);
}(document, 'script'));</script>