index.html | searchcode

/assets/vendor/cc-royalslider-9.2.0/templates/slider-in-lightbox/index.html

https://bitbucket.org/tredius/tredius.bitbucket.org
HTML | 271 lines | 214 code | 50 blank | 7 comment | 0 complexity | 670e997a601001c858514cc7f72f6e7f MD5 | raw file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    

    <title> Slider in Lightbox | RoyalSlider Example</title>

    <meta content="Touch-enabled image gallery and content slider plugin, that focuses on providing great user experience on every desktop and mobile device." name="description">
    <meta name="keywords" content="content slider, gallery, plugin, jquery, banner rotator">
    <meta name="viewport" content="width = device-width, initial-scale = 1.0" />
    <meta name="author" content="Dmitry Semenov">

    <!-- slider JS files -->
    
    <link href="../royalslider/royalslider.css" rel="stylesheet">
    <script  src="../royalslider/jquery-1.8.0.min.js"></script>
    <script src="../royalslider/jquery.royalslider.min.js"></script>
    
    
     
        <script src="../preview-assets/js/colorbox/jquery.colorbox.js"></script>
     
    

    
    <!-- syntax highlighter -->
    <script src="../preview-assets/js/highlight.pack.js"></script>
    <script src="../preview-assets/js/jquery-ui-1.8.22.custom.min.js"></script>
    <script> hljs.initHighlightingOnLoad();</script>


    

    <!-- preview-related stylesheets -->
    <link href="../preview-assets/css/reset.css" rel="stylesheet">
    <link href="../preview-assets/css/grid.css" rel="stylesheet">
    <link href="../preview-assets/css/smoothness/jquery-ui-1.8.22.custom.css" rel="stylesheet">
    <link href="../preview-assets/css/github.css" rel="stylesheet">

    <!-- slider stylesheets -->
    
     
        <link href="../royalslider/default/rs-default.css" rel="stylesheet">
     
        <link href="../preview-assets/js/colorbox/colorbox.css" rel="stylesheet">
     
    

    <link href="../preview-assets/css/main.css" rel="stylesheet">

    
  </head>
  <body >
  <header  id="main-header" class="clearfix">  
    <div  class="page wrapper"> 
       <div class="col span_6">
         <a id="logo" href="#">Royal&thinsp;Slider</a>
         <nav>
            <a href="http://dimsemenov.com/plugins/royal-slider/documentation/?s=dp">Documentation Online</a>
            <a href="http://dimsemenov.com/plugins/royal-slider/build/?s=dp">Build Tool</a>
         </nav>
       </div>
    </div>
  </header>
  <div  class="page wrapper">    
    <div class="row clearfix">
      <div id="page-navigation" class="col span_6"> 
            
          <div class="left page-nav-item"> 
                  <a href="../simple-vertical/" title="Previous Example: 
  Simple Vertical Slider">← Simple Vertical Slider</a> 
          </div> 
           
           
          <div class="right page-nav-item"> 
          
                  <a href="../full-width/" title="Next Example: 
  Full Width Slider">Full Width Slider → </a> 
          
          </div> 
           
      </div> 
    </div>

    <!-- slider code start -->
      <div class="row clearfix">
  <div class="col span_4 fwImage">
    <div id="colorbox-items">
      <a class="colorboxSlider openBoxButton" href="../ajax-sliders/simple-slider.html" rel="">Click me to load slider in lightbox</a>
    </div>
  </div>
  <div class="col span_2">
    <h1>Slider in lightbox</h1>
    <p>You can put completely any type of slider inside lightbox and load it dynamically.</p>
    <p>jQuery ColorBox plugin is used in this demo, but you may use any other that you want.</p>
  </div>
</div>
 

  <!-- You don't need this part of code -->
  <div class="row clearfix">
    <div class="tabs col span_6">
    <ul>
        <li><a href="#js">JavaScript</a></li>
        <li><a href="#css">CSS</a></li>
        <li><a href="#html">HTML</a></li>
    </ul>
    <div id="js"><pre><code></code></pre></div>
    <div id="css"><pre><code></code></pre></div>
    <div id="html"><pre id="html-code"><code>&lt;!-- contents of external ajax file --&gt;
&lt;div id=&quot;simple-slider&quot; class=&quot;royalSlider rsDefault&quot; style=&quot;width: 100%; height: 300px;&quot;&gt;
    &lt;a class=&quot;rsImg&quot; data-rsVideo=&quot;https://vimeo.com/45778774&quot; href=&quot;http://b.vimeocdn.com/ts/318/502/318502540_640.jpg&quot;&gt;
      &lt;div class=&quot;rsTmb&quot;&gt;
        &lt;h5&gt;The Epic &amp; The Beasts&lt;/h5&gt;
        &lt;p&gt;by Sebastian Linda&lt;/p&gt;
      &lt;/div&gt;
    &lt;/a&gt;
    &lt;a class=&quot;rsImg&quot; data-rsVideo=&quot;https://vimeo.com/44878206&quot; href=&quot;http://b.vimeocdn.com/ts/311/891/311891198_640.jpg&quot;&gt;
      &lt;div class=&quot;rsTmb&quot;&gt;
        &lt;h5&gt;Dubstep Dispute&lt;/h5&gt;
        &lt;p&gt;by Fluxel Media&lt;/p&gt;
      &lt;/div&gt;
    &lt;/a&gt;
     &lt;a class=&quot;rsImg&quot; data-rsVideo=&quot;https://vimeo.com/41132461&quot; href=&quot;http://b.vimeocdn.com/ts/284/709/284709146_640.jpg&quot;&gt;
      &lt;div class=&quot;rsTmb&quot;&gt;
        &lt;h5&gt;Barcode Band&lt;/h5&gt;
        &lt;p&gt;by Kang woon Jin&lt;/p&gt;
      &lt;/div&gt;
    &lt;/a&gt;
   &lt;a class=&quot;rsImg&quot; data-rsVideo=&quot;hhttps://vimeo.com/44388232&quot; href=&quot;http://b.vimeocdn.com/ts/308/375/308375094_640.jpg&quot;&gt;
      &lt;div class=&quot;rsTmb&quot;&gt;
        &lt;h5&gt;Samm Hodges Reel&lt;/h5&gt;
        &lt;p&gt;by Animal&lt;/p&gt;
      &lt;/div&gt;
    &lt;/a&gt;
    &lt;a class=&quot;rsImg&quot; data-rsVideo=&quot;http://www.youtube.com/watch?v=VDspPKDMBMo&quot; href=&quot;{{site.url}}/img/video/02.jpg&quot;&gt;
      &lt;div class=&quot;rsTmb&quot;&gt;
        &lt;h5&gt;The Foundry Showreel&lt;/h5&gt;
        &lt;p&gt;by The Foundry&lt;/p&gt;
      &lt;/div&gt;
    &lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
  jQuery(document).ready(function($) {
    $(&#39;#simple-slider&#39;).royalSlider({
      imageScaleMode: &#39;fill&#39;,
      video: {
        autoHideControlNav: true
      }
    });
  });
&lt;/script&gt;
</code></pre></div>
    </div>
  </div>
  <script>
    jQuery(document).ready(function(e) {
        var code = $('#html-code code');
        if(code.is(':empty')) {
          var rsCode = $('.royalSlider-preview');
          if(!rsCode.length) {
              rsCode = $('.royalSlider');
          }
          rsCode = rsCode.clone().removeClass('royalSlider-preview').wrap('<div></div>').parent().html();
          rsCode = htmlencode(rsCode);
          code.html(rsCode);
        }
        $('#js code').html( htmlencode($('#addJS').html()) );
        $( ".tabs" ).tabs();
    });
    function htmlencode(str) {
      if(str) {
         return str.replace(/[&<>"']/g, function($0) {
            return "&" + {"&":"amp", "<":"lt", ">":"gt", '"':"quot", "'":"#39"}[$0] + ";";
        });
      }
    }   
  </script>
  <div class="row clearfix">
    <h2>List of Starter Templates</h2>
  <ul id="templates-list" class="col span_6">
  
  <li><a href="../content-slider/"><img width="341" height="250" src="../img/previews/content-slider.jpg" /><h3>HTML Content Slider</h3></a></li>
  
  <li><a href="../video-gallery/"><img width="341" height="250" src="../img/previews/video-gallery.jpg" /><h3>Video Gallery</h3></a></li>
  
  <li><a href="../gallery/"><img width="341" height="250" src="../img/previews/gallery.jpg" /><h3>Image Gallery with Fullscreen Option</h3></a></li>
  
  <li><a href="../visible-nearby/"><img width="341" height="250" src="../img/previews/visible-nearby.jpg" /><h3>Gallery with Visible Nearby Images</h3></a></li>
  
  <li><a href="../animated-blocks/"><img width="341" height="250" src="../img/previews/animated-blocks.jpg" /><h3>Slider with Animated Blocks</h3></a></li>
  
  <li><a href="../full-width/"><img width="341" height="250" src="../img/previews/fullwidth.jpg" /><h3>Full Width Slider</h3></a></li>
  
  <li><a href="../slider-in-lightbox/"><img width="341" height="250" src="../img/previews/lightbox.jpg" /><h3>Slider in Lightbox</h3></a></li>
  
  <li><a href="../simple-vertical/"><img width="341" height="250" src="../img/previews/simple-vertical.jpg" /><h3>Simple Vertical Slider</h3></a></li>
  
  <li><a href="../gallery-vertical-fade/"><img width="341" height="250" src="../img/previews/gallery-fade.jpg" /><h3>Gallery with Fade and Vertical Thumbs</h3></a></li>
  
  <li><a href="../slider-in-laptop/"><img width="341" height="250" src="../img/previews/slider-in-laptop.jpg" /><h3>Slider in Laptop</h3></a></li>
  
  <li><a href="../gallery-with-deeplinking/"><img width="341" height="250" src="../img/previews/deeplinking.jpg" /><h3>Gallery with Deep Linking</h3></a></li>
  
  </ul>
</div>
  <footer class="row clearfix" id="main-footer">
    <div class="col span_6">
      <nav><a href="http://dimsemenov.com/subscribe.html?s=sb">Email Newsletter</a><a href="http://twitter.com/dimsemenov">Twitter</a><a href="mailto:diiiimaaaa@gmail.com?subject=RoyalSlider bug">Report Bug</a><a href="http://dimsemenov.com/plugins/royal-slider/support/">Contact support</a></nav>
      <p class="copy">© 2011-2012 <a href="http://dimsemenov.com">Dmitry Semenov</a></p>
    </div>
  </footer>
   <!-- tabs & footer end /// --> 
   
  
    <script id="addJS">jQuery(document).ready(function($) {
  var win = $(window),
      w,
      cContent = $('#cboxLoadedContent'),
      currRs;
  $('#colorbox-items').on('click', '.colorboxSlider', function(e) {
      e.preventDefault();
      $.colorbox({
          preloading: true,
          modal: true,
          transition: 'none',
          speed: 0,
          onComplete: function(e) {
            currRs = $('#cboxLoadedContent').find('.royalSlider').royalSlider({
              imageScaleMode: 'fill',
              keyboardNavEnabled: true,
              video: {
                autoHideControlNav: true
              }
            }).data('royalSlider');
            updateLightboxSize();
          },
          href:$(this).attr('href')
      });
      return false;
  });

  win.resize( function() {
     updateLightboxSize();
  });

  // dynamic lightbox resizing
  function updateLightboxSize() {
     w = win.width();
      if(w > 1200) {
        w = '700px';
      } else if(w < 800) {
        w = '90%';
      } else {
        w = '60%';
      }
       $.colorbox.resize({
           width: w
       });
      if(currRs) {
        currRs.updateSliderSize();
      }
  }
});
</script>
  
  </div>
  </body>
</html>