← 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.

<!-- 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>

List of Starter Templates