AdRotator Fallback Mode

Ad rotator in fallback mode

by Niket Pathak

HTML

<script src="https://cdn.jsdelivr.net/npm/ad-rotator"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ad-rotator/dist/style.css" /> <!-- Optional -->
<div class="wrapper">
  <h2>Javascript Ad-rotator</h2>

  <div id="container">
    You are seeing this text because there is no Ad Blocking software running. To see Ads running in this space, try enabling an Ad blocker and refresh the page.
  </div>

  <p>
  Adrotator in Fallback Mode i.e. Ad-rotator kicks in only if it detects an Ad blocking software. If there was no Ad blocking software, the library does nothing. Find the <b>complete tutorial</b> on <strong><a href="https://digitalfortress.tech/tutorial/rotate-ads-in-javascript-with-ad-rotator/">Digital Fortress</a></strong>
  </p>
</div>

CSS

#container {
  width: 250px;
  height: 300px;
}
#container img {
  height: 100%;
  width: 100%;
}
.wrapper {
  min-height: 450px;
}

JavaScript

const instance = rotator.init(
  document.getElementById("container"),
  [
    { url: "https://example.com#A", img: "https://rotator.digitalfortress.tech/assets/img/square/square-1.jpeg" },
    { url: "https://example.com#B", img: "https://rotator.digitalfortress.tech/assets/img/square/square-2.jpeg" },
    { url: "https://example.com#C", img: "https://rotator.digitalfortress.tech/assets/img/square/square-4.jpg" },
  ],
  { // optional configuration options
    timer: 3,
    fallbackMode: true,
  }
);

instance.start(); // starts Ad-rotator