jQuery Fullscreen Screen Saver

Vegas Plugin with Fullscreen Image, Video.

by Abid Shaik

HTML

<script src="https://assets.brightdoor.com.s3.amazonaws.com/test/CDN/jQPlugins/FullScreenSS/vegas.js"></script>
<link rel="stylesheet" href="https://assets.brightdoor.com.s3.amazonaws.com/test/CDN/jQPlugins/FullScreenSS/vegas.css">
<link rel="stylesheet" href="https://daneden.github.io/animate.css/animate.min.css">
<!-- jQuery Fullscreen Screen Saver -->

<div id="ScreenSaverContainer" class="animated">

</div>


<!-- 
http://vegas.jaysalvat.com/documentation/settings/
http://vegas.jaysalvat.com/documentation/methods/
http://vegas.jaysalvat.com/documentation/transitions/

-->

CSS

#ScreenSaverContainer {
  width: 100%;
  height: 540px;
}

JavaScript

function ShowKioskScreenSaver() {
  $("#ScreenSaverContainer").removeClass("fadeOut").addClass("fadeIn");
  $("#ScreenSaverContainer").vegas('play');
  console.log("Called");
}

setTimeout(ShowKioskScreenSaver, 5000);

$("#ScreenSaverContainer").on("click", function() {
  $(this).addClass("fadeOut");
  $(this).vegas('pause');
  setTimeout(ShowKioskScreenSaver, 5000);
});

$("#ScreenSaverContainer").vegas({
  slides: [{
      src: "https://assets.brightdoor.com.s3.amazonaws.com/test/CDN/IMAGES/Overview.jpg"
    }, {
      src: "https://assets.brightdoor.com.s3.amazonaws.com/test/CDN/IMAGES/click-to-play-940x410.jpg",
      video: {
        src: ["http://media.brightdoor.com/bdmktingcontent/Home-Page-1400x540.mp4"],
        loop: false,
        mute: true
      }
    }, {
      src: "https://assets.brightdoor.com.s3.amazonaws.com/test/CDN/IMAGES/Real%20Estate.jpg"
    }, {
      src: "https://assets.brightdoor.com.s3.amazonaws.com/test/CDN/IMAGES/Vacation%20Rentals.jpg"
    }
    /*LINKS Won't work with this, {
      src: "https://assets.brightdoor.com.s3.amazonaws.com/test/CDN/IMAGES/click-to-play-940x410.jpg",
      video: {
        src: ["https://vimeo.com/51618708"],
        loop: false,
        mute: true
      }
    } */
  ],
  delay: 6000,
  transition: "random",
 // transitionDuration: 2000,
  animation: 'random',
//  animationDuration: 5000
});