Live Examples

The following code snippets are live examples which can be edited with the corresponding results being visible immediately

1. Basic Ad Rotation (default config)

To initialize adRotator, you only need 2 parameters -
  • The Element where the ad should be displayed
  • The Ads.
The ads are provided in an array with the following format
[{url: '...', img: '...'}]

AdRotator also accepts a 3rd, yet completely optional parameter config which you can use to customize your Ads and its behaviour.

Then you can initialize and start adRotation as shown below

// initialise Ad Rotation 
var rotator = new adRotator(
  document.querySelector('.className'), 
  [{ url: 'xyz.com', img: '../xyz.jpg'}]  
);
// start rotation (returns undefined by default)
rotator.start();
          
Here is a live example demonstrating basic Ad Rotation with default Config. (To see the default config, you can uncomment the last line)
var rotatorDefault = new adRotator( document.querySelector(".defaultAdContainer"), [ { url: "https://niketpathak.com#0", img: "https://i.imgur.com/GsNCBNJ_d.webp?maxwidth=728&fidelity=grand" }, { url: "https://niketpathak.com#1", img: "./assets/img/square/square-1.jpeg" }, { url: "https://niketpathak.com#2", img: "./assets/img/square/square-2.jpeg" }, { url: "https://niketpathak.com#3", img: "./assets/img/square/square-3.jpeg" }, { url: "https://niketpathak.com#4", img: "./assets/img/square/square-4.jpg" }, ] ); rotatorDefault.start(); //rotatorDefault.conf;

2. Ad Rotation with custom config: Shape Leaderboard / Desktop-only

We pass a 3rd parameter config with the value { shape: "leaderboard"} to set the shape of the Ad as leaderboard. Doing this sets the height: 90px and width: 728px. Since this ad would be cut-off on a mobile device given its long width, we will also set the target: "desktop" so that this Ad would be visible on a desktop but hidden on a mobile device.

// initialise Ad Rotation 
var rotator = new adRotator(
  document.querySelector('.className'), 
  [{ url: 'xyz.com', img: '../xyz.jpg'}],
  {
    shape: "leaderboard",
    target: "desktop"
  }  
);
// start rotation (returns undefined by default)
rotator.start();
          
A live example to go along with it. (Note: If you are simulating a mobile device, ensure you refresh the page for correct results)
var rotatorLeaderboard = new adRotator( document.querySelector(".leaderboardAdContainer"), [ { url: "https://niketpathak.com#1", img: "./assets/img/leaderboard/leaderboard-1.gif" }, { url: "https://niketpathak.com#2", img: "./assets/img/leaderboard/leaderboard-2.jpeg" }, { url: "https://niketpathak.com#3", img: "./assets/img/leaderboard/leaderboard-3.gif" }, { url: "https://niketpathak.com#4", img: "./assets/img/leaderboard/leaderboard-4.gif" }, { url: "https://niketpathak.com#5", img: "./assets/img/leaderboard/leaderboard-5.png" }, ], { shape: 'leaderboard', target: 'desktop', //width: 500, // 500px //height: 150, // 150px //timer: 2000, // 2 seconds //sticky: {} } ); rotatorLeaderboard.start();

3. Ad Rotation on a Mobile device

To show Ads specific to mobiles alone, we set the shape as { shape: "mobile"} which also automatically sets the target: "mobile" meaning that these Ads will only be visible on a mobile device. It also sets the height: 90px and width to the width of the container element.

// initialise Ad Rotation 
var rotator = new adRotator(
  document.querySelector('.className'), 
  [{ url: 'xyz.com', img: '../xyz.jpg'}],
  {
    shape: "mobile",
  }  
);
// start rotation (returns undefined by default)
rotator.start();
          
And here's a live example. (Note: If you are simulating a mobile device, ensure you refresh the page for correct results. This result of this live example would be hidden on a desktop device by default)
var rotatorMobile = new adRotator( document.querySelector(".mobileAdContainer"), [ { url: "https://niketpathak.com#1", img: "./assets/img/leaderboard/leaderboard-1.gif" }, { url: "https://niketpathak.com#2", img: "./assets/img/leaderboard/leaderboard-2.jpeg" }, { url: "https://niketpathak.com#3", img: "./assets/img/leaderboard/leaderboard-3.gif" }, { url: "https://niketpathak.com#4", img: "./assets/img/leaderboard/leaderboard-4.gif" }, { url: "https://niketpathak.com#5", img: "./assets/img/leaderboard/leaderboard-5.png" }, ], { shape: "mobile", //sticky: {}, } ); rotatorMobile.start();

4. Ad Rotation with Sticky Ads

To show sticky Ads, if it sufficient to pass an empty { sticky: {} } object as the 3rd parameter. However, we can further customize sticky Ads by passing certain options as shown below

// initialise Ad Rotation 
var rotator = new adRotator(
  document.querySelector('.className'), 
  [{ url: 'xyz.com', img: '../xyz.jpg'}],
  {
    sticky: {
      beforeEl: document.querySelector('.start'),
      afterEl: document.querySelector('.end'),
      offsetTop: '10', // or '10px' (defaults to 0px)
      offsetBottom: '150px', // or '150' (defaults to 0px)
      noMobile: true, // disable stickiness on mobile (defaults to false)
    }
    // beforeEl => Element after which the Ad becomes sticky
    // afterEl => Element before which Ad stops being sticky
  }  
);
// start rotation (returns undefined by default)
rotator.start();
                    
And here's a live example. Try scrolling until the next live example to see it in action. To remove stickiness, set sticky: null. Note that we have set noMobile: true which means that this Ad will not be sticky on a mobile device.
var rotatorSticky = new adRotator( document.querySelector(".stickyAdContainer"), [ { url: "https://niketpathak.com#1", img: "./assets/img/square/square-1.jpeg" }, { url: "https://niketpathak.com#2", img: "./assets/img/square/square-2.jpeg" }, { url: "https://niketpathak.com#3", img: "./assets/img/square/square-3.jpeg" }, { url: "https://niketpathak.com#4", img: "./assets/img/square/square-4.jpg" }, ], { sticky: { beforeEl: document.querySelector(".startSticky"), afterEl: document.querySelector(".endSticky"), offsetTop: "50px", offsetBottom: "60px", noMobile: true }, // sticky: null, // uncomment to disable StickyAd. } ); rotatorSticky.start(); // rotatorSticky.destroy(); // removes Ad completely

5. Ad Rotation with Callbacks (shape sidebar)

When we set the { shape: "sidebar"}, it causes the Ad Unit's height & width to be updated as height: 600px and width: 300px. We can setup 3 types of callbacks =>

  • cb - This callback is executed after each rotation
  • onHover - This callback is executed on hovering an Ad item
  • onClick- This callback is executed on clicking of an Ad item

// initialise Ad Rotation 
var rotator = new adRotator(
  document.querySelector('.className'), 
  [{ url: 'xyz.com', img: '../xyz.jpg'}],
  {
    shape: 'sidebar',
    cb: function() {
      // do something
    },
    onHover: function() {
      // do something
    },
    onClick: function() {
      // do something
    },
  }  
);
// start rotation (returns undefined by default)
rotator.start();
          
And now lets get to the live example. You should see logs below when you hover, click and also when each Ad gets rotated. Note that sometimes it is possible that you do not see the logs due to a known issue with the live editor. (It has nothing to do with the Adrotator library). To fix the logs, you can comment & then uncomment the last line rotatorSidebar.start();
var rotatorSidebar = new adRotator( document.querySelector(".sidebarAdContainer"), [ { url: "https://niketpathak.com#1", img: "./assets/img/sidebar/sidebar-1.jpg" }, { url: "https://niketpathak.com#2", img: "./assets/img/sidebar/sidebar-2.jpg" }, { url: "https://niketpathak.com#3", img: "./assets/img/sidebar/sidebar-3.jpg" }, { url: "https://niketpathak.com#4", img: "./assets/img/sidebar/sidebar-4.jpg" }, { url: "https://niketpathak.com#5", img: "./assets/img/sidebar/sidebar-5.png" }, ], { shape: 'sidebar', cb: function(item) { console.log("Mark Ad impression", item); }, onHover: function(item, El) { console.log("You hovered over this Ad =>", item); }, onClick: function(e, item) { alert("You clicked on this Ad. Navigating to " + item.url); } } ); rotatorSidebar.start();
The dreams of yesterday are the hopes of today and the reality of tomorrow. Science has not yet mastered prophecy. We predict too much for the next year and yet far too little for the next ten.