• Home

  • Custom Ecommerce
  • Application Development
  • Database Consulting
  • Cloud Hosting
  • Systems Integration
  • Legacy Business Systems
  • Security & Compliance
  • GIS

  • Expertise

  • About Us
  • Our Team
  • Clients
  • Blog
  • Careers

  • VisionPort

  • Contact
  • Our Blog

    Ongoing observations by End Point Dev people

    Full Screen Gallery with Supersized and video slides

    Marina Lohova

    By Marina Lohova
    January 26, 2016

    I was recently looking to build a full screen image and video gallery for our client Mission Blue. Something similar to the Google Maps interface you can see in the screenshot below:

    After scouring the Internet to find a suitable jQuery plugin I finally decided on Supersized, Full screen background slideshow plugin for jQuery.

    After downloading the library, include it on the page:

    <link href="/wp-content/plugins/wp-supersized/theme/supersized.shutter.css?ver=4.2.2" id="supersized_theme_css-css" media="all" rel="stylesheet" type="text/css"></link>
    <script src="/wp-includes/js/jquery/ui/effect.min.js?ver=1.11.4" type="text/javascript"></script>
    <script src="/wp-content/plugins/wp-supersized/js/jquery.easing.min.js?ver=1.3" type="text/javascript"></script>
    <script src="/wp-content/plugins/wp-supersized/js/jquery.easing.compatibility.js?ver=1.0" type="text/javascript"></script>
    <script src="/wp-content/plugins/wp-supersized/js/jquery.animate-enhanced.min.js?ver=0.75" type="text/javascript"></script>
    <script type='text/javascript' src='/wp-content/plugins/wp-supersized/js/supersized.3.2.7.min.js?ver=3.2.7'></script>
    

    Basic functionality

    Let’s create a variable that will hold all the images in the slideshow:

    var images = [];
    images.push({
      type: 'IMAGE',
      image: 'img1.jpg',
      title: 'Image 1',
      thumb: 'img1_thumb.jpg',
      url: 'https://www.endpointdev.com'
    });
    images.push({
      type: 'YOUTUBE',
      image: 'screenshot1.jpg',
      title: 'YouTube slide',
      videoid: 'abc12345678',
      thumb: 'screenshot1_thumb.jpg',
      url: 'https://www.youtube.com/watch?v=abc12345678'
    });
    

    Let’s initialize Supersized:

    jQuery.supersized({
      slideshow: 1,
      autoplay: 0,
      min_width: 0,
      min_height: 0,
      vertical_center: 1,
      horizontal_center: 1,
      fit_always: 0,
      fit_portrait: 1,
      fit_landscape: 0,
      slide_links: 'blank',
      thumb_links: 1,
      thumbnail_navigation: 1,
      slides: images,
      mouse_scrub: 0
    });
    

    Customizing the toolbar

    <div id="thumb-tray" class="load-item">
      <div id="thumb-back"></div>
      <div id="thumb-forward"></div>
    </div>
    <div id="slidecaption"></div>
    

    Customizing the screen image size

    I didn’t want to have the full screen image as it was a little overwhelming for the user. I wanted the black bars just like in the Google interface. Supersized allows for easy customization. This CSS did the trick:

    #supersized, #supersized li {
      width: 70% !important;
      left: 0 !important;
      right: 0 !important;
      top: 1px !important;
      margin:auto;
    }
    

    Introducing video (YouTube) slides

    First, I added the Youtube API:

    <script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>
    

    Then I added a couple of CSS styles:

    #supersized .player {
      margin: auto;
      display: block;
    }
    

    Finally, I went into the Supersized library source and modified it. To allow for the video slides to appear, I added the new condition and the slide type ‘YOUTUBE’

    base._renderSlide = function(loadPrev, options) {
      var linkTarget = base.options.new_window ? ' target="_blank"' : '';
      var imageLink = (base.options.slides[loadPrev].url) ? "href='" + base.options.slides[loadPrev].url + "'" : "";
      var slidePrev = base.el + ' li:eq(' + loadPrev + ')';
      var imgPrev = $('<img src="' + base.options.slides[loadPrev].image + '"/>');
    
      if (base.options.slides[loadPrev].type == 'YOUTUBE') {
        imgPrev.load(function () {
          var video = $('<div class="player" id="player'+ base.options.slides[loadPrev].videoid + '"></div>');
          video.appendTo(slidePrev);
          var player = new YT.Player('player' + base.options.slides[loadPrev].videoid, {
            height: 390,
            width: 640,
            videoId: base.options.slides[loadPrev].videoid
          });
        });// End Load
      }
      else {
        imgPrev.appendTo(slidePrev).wrap('<a ' + imageLink + linkTarget + '></a>').parent().parent().addClass('image-loading ' + options['class']);
    
        imgPrev.load(function () {
          $(this).data('origWidth', $(this).width()).data('origHeight', $(this).height());
          base.resizeNow();// Resize background image
        });// End Load
      }
    };
    

    Final Result

    This is how gallery looks with the customizations:

    This is what a video slide looks like:

    Hope you found this writeup useful!

    css design html javascript jquery extensions video wordpress


    Comments