← Simple Vertical Slider
Full Width Slider →

Slider in lightbox

You can put completely any type of slider inside lightbox and load it dynamically.

jQuery ColorBox plugin is used in this demo, but you may use any other that you want.

Please note that lightbox option is not available with WordPress version of RoyalSlider. You'll need to add extra code to implement it.

Markup for current slider

For better understanding please don't use this HTML file as a starter file, create your own and follow steps in basic usage section of documentation

Slider JavaScript initialization code.

Additional CSS styles for current slider.

HTML markup of slider.

<!-- contents of external ajax file -->
<div id="simple-slider" class="royalSlider rsDefault" style="width: 100%; height: 300px;">
    <a class="rsImg" data-rsVideo="https://vimeo.com/45778774" href="http://b.vimeocdn.com/ts/318/502/318502540_640.jpg">
      <div class="rsTmb">
        <h5>The Epic & The Beasts</h5>
        <p>by Sebastian Linda</p>
      </div>
    </a>
    <a class="rsImg" data-rsVideo="https://vimeo.com/44878206" href="http://b.vimeocdn.com/ts/311/891/311891198_640.jpg">
      <div class="rsTmb">
        <h5>Dubstep Dispute</h5>
        <p>by Fluxel Media</p>
      </div>
    </a>
     <a class="rsImg" data-rsVideo="https://vimeo.com/41132461" href="http://b.vimeocdn.com/ts/284/709/284709146_640.jpg">
      <div class="rsTmb">
        <h5>Barcode Band</h5>
        <p>by Kang woon Jin</p>
      </div>
    </a>
   <a class="rsImg" data-rsVideo="hhttps://vimeo.com/44388232" href="http://b.vimeocdn.com/ts/308/375/308375094_640.jpg">
      <div class="rsTmb">
        <h5>Samm Hodges Reel</h5>
        <p>by Animal</p>
      </div>
    </a>
    <a class="rsImg" data-rsVideo="http://www.youtube.com/watch?v=VDspPKDMBMo" href="{{site.url}}/img/video/02.jpg">
      <div class="rsTmb">
        <h5>The Foundry Showreel</h5>
        <p>by The Foundry</p>
      </div>
    </a>
  </div>
</div>
<script type="text/javascript">
  jQuery(document).ready(function($) {
    $('#simple-slider').royalSlider({
      imageScaleMode: 'fill',
      video: {
        autoHideControlNav: true
      }
    });
  });
</script>

You should include: jQuery, main slider JavaScript file, main slider CSS file, skin CSS file.
It's recommended to get jquery.royalslider.min.js from build tool. Feel free to combine files in one.
Make sure that paths match locations of files.

List of Starter Templates