PageRenderTime 53ms CodeModel.GetById 23ms RepoModel.GetById 0ms app.codeStats 0ms

/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
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <title> Slider in Lightbox | RoyalSlider Example</title>
  7. <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">
  8. <meta name="keywords" content="content slider, gallery, plugin, jquery, banner rotator">
  9. <meta name="viewport" content="width = device-width, initial-scale = 1.0" />
  10. <meta name="author" content="Dmitry Semenov">
  11. <!-- slider JS files -->
  12. <link href="../royalslider/royalslider.css" rel="stylesheet">
  13. <script src="../royalslider/jquery-1.8.0.min.js"></script>
  14. <script src="../royalslider/jquery.royalslider.min.js"></script>
  15. <script src="../preview-assets/js/colorbox/jquery.colorbox.js"></script>
  16. <!-- syntax highlighter -->
  17. <script src="../preview-assets/js/highlight.pack.js"></script>
  18. <script src="../preview-assets/js/jquery-ui-1.8.22.custom.min.js"></script>
  19. <script> hljs.initHighlightingOnLoad();</script>
  20. <!-- preview-related stylesheets -->
  21. <link href="../preview-assets/css/reset.css" rel="stylesheet">
  22. <link href="../preview-assets/css/grid.css" rel="stylesheet">
  23. <link href="../preview-assets/css/smoothness/jquery-ui-1.8.22.custom.css" rel="stylesheet">
  24. <link href="../preview-assets/css/github.css" rel="stylesheet">
  25. <!-- slider stylesheets -->
  26. <link href="../royalslider/default/rs-default.css" rel="stylesheet">
  27. <link href="../preview-assets/js/colorbox/colorbox.css" rel="stylesheet">
  28. <link href="../preview-assets/css/main.css" rel="stylesheet">
  29. </head>
  30. <body >
  31. <header id="main-header" class="clearfix">
  32. <div class="page wrapper">
  33. <div class="col span_6">
  34. <a id="logo" href="#">Royal&thinsp;Slider</a>
  35. <nav>
  36. <a href="http://dimsemenov.com/plugins/royal-slider/documentation/?s=dp">Documentation Online</a>
  37. <a href="http://dimsemenov.com/plugins/royal-slider/build/?s=dp">Build Tool</a>
  38. </nav>
  39. </div>
  40. </div>
  41. </header>
  42. <div class="page wrapper">
  43. <div class="row clearfix">
  44. <div id="page-navigation" class="col span_6">
  45. <div class="left page-nav-item">
  46. <a href="../simple-vertical/" title="Previous Example:
  47. Simple Vertical Slider">← Simple Vertical Slider</a>
  48. </div>
  49. <div class="right page-nav-item">
  50. <a href="../full-width/" title="Next Example:
  51. Full Width Slider">Full Width Slider → </a>
  52. </div>
  53. </div>
  54. </div>
  55. <!-- slider code start -->
  56. <div class="row clearfix">
  57. <div class="col span_4 fwImage">
  58. <div id="colorbox-items">
  59. <a class="colorboxSlider openBoxButton" href="../ajax-sliders/simple-slider.html" rel="">Click me to load slider in lightbox</a>
  60. </div>
  61. </div>
  62. <div class="col span_2">
  63. <h1>Slider in lightbox</h1>
  64. <p>You can put completely any type of slider inside lightbox and load it dynamically.</p>
  65. <p>jQuery ColorBox plugin is used in this demo, but you may use any other that you want.</p>
  66. </div>
  67. </div>
  68. <!-- You don't need this part of code -->
  69. <div class="row clearfix">
  70. <div class="tabs col span_6">
  71. <ul>
  72. <li><a href="#js">JavaScript</a></li>
  73. <li><a href="#css">CSS</a></li>
  74. <li><a href="#html">HTML</a></li>
  75. </ul>
  76. <div id="js"><pre><code></code></pre></div>
  77. <div id="css"><pre><code></code></pre></div>
  78. <div id="html"><pre id="html-code"><code>&lt;!-- contents of external ajax file --&gt;
  79. &lt;div id=&quot;simple-slider&quot; class=&quot;royalSlider rsDefault&quot; style=&quot;width: 100%; height: 300px;&quot;&gt;
  80. &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;
  81. &lt;div class=&quot;rsTmb&quot;&gt;
  82. &lt;h5&gt;The Epic &amp; The Beasts&lt;/h5&gt;
  83. &lt;p&gt;by Sebastian Linda&lt;/p&gt;
  84. &lt;/div&gt;
  85. &lt;/a&gt;
  86. &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;
  87. &lt;div class=&quot;rsTmb&quot;&gt;
  88. &lt;h5&gt;Dubstep Dispute&lt;/h5&gt;
  89. &lt;p&gt;by Fluxel Media&lt;/p&gt;
  90. &lt;/div&gt;
  91. &lt;/a&gt;
  92. &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;
  93. &lt;div class=&quot;rsTmb&quot;&gt;
  94. &lt;h5&gt;Barcode Band&lt;/h5&gt;
  95. &lt;p&gt;by Kang woon Jin&lt;/p&gt;
  96. &lt;/div&gt;
  97. &lt;/a&gt;
  98. &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;
  99. &lt;div class=&quot;rsTmb&quot;&gt;
  100. &lt;h5&gt;Samm Hodges Reel&lt;/h5&gt;
  101. &lt;p&gt;by Animal&lt;/p&gt;
  102. &lt;/div&gt;
  103. &lt;/a&gt;
  104. &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;
  105. &lt;div class=&quot;rsTmb&quot;&gt;
  106. &lt;h5&gt;The Foundry Showreel&lt;/h5&gt;
  107. &lt;p&gt;by The Foundry&lt;/p&gt;
  108. &lt;/div&gt;
  109. &lt;/a&gt;
  110. &lt;/div&gt;
  111. &lt;/div&gt;
  112. &lt;script type=&quot;text/javascript&quot;&gt;
  113. jQuery(document).ready(function($) {
  114. $(&#39;#simple-slider&#39;).royalSlider({
  115. imageScaleMode: &#39;fill&#39;,
  116. video: {
  117. autoHideControlNav: true
  118. }
  119. });
  120. });
  121. &lt;/script&gt;
  122. </code></pre></div>
  123. </div>
  124. </div>
  125. <script>
  126. jQuery(document).ready(function(e) {
  127. var code = $('#html-code code');
  128. if(code.is(':empty')) {
  129. var rsCode = $('.royalSlider-preview');
  130. if(!rsCode.length) {
  131. rsCode = $('.royalSlider');
  132. }
  133. rsCode = rsCode.clone().removeClass('royalSlider-preview').wrap('<div></div>').parent().html();
  134. rsCode = htmlencode(rsCode);
  135. code.html(rsCode);
  136. }
  137. $('#js code').html( htmlencode($('#addJS').html()) );
  138. $( ".tabs" ).tabs();
  139. });
  140. function htmlencode(str) {
  141. if(str) {
  142. return str.replace(/[&<>"']/g, function($0) {
  143. return "&" + {"&":"amp", "<":"lt", ">":"gt", '"':"quot", "'":"#39"}[$0] + ";";
  144. });
  145. }
  146. }
  147. </script>
  148. <div class="row clearfix">
  149. <h2>List of Starter Templates</h2>
  150. <ul id="templates-list" class="col span_6">
  151. <li><a href="../content-slider/"><img width="341" height="250" src="../img/previews/content-slider.jpg" /><h3>HTML Content Slider</h3></a></li>
  152. <li><a href="../video-gallery/"><img width="341" height="250" src="../img/previews/video-gallery.jpg" /><h3>Video Gallery</h3></a></li>
  153. <li><a href="../gallery/"><img width="341" height="250" src="../img/previews/gallery.jpg" /><h3>Image Gallery with Fullscreen Option</h3></a></li>
  154. <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>
  155. <li><a href="../animated-blocks/"><img width="341" height="250" src="../img/previews/animated-blocks.jpg" /><h3>Slider with Animated Blocks</h3></a></li>
  156. <li><a href="../full-width/"><img width="341" height="250" src="../img/previews/fullwidth.jpg" /><h3>Full Width Slider</h3></a></li>
  157. <li><a href="../slider-in-lightbox/"><img width="341" height="250" src="../img/previews/lightbox.jpg" /><h3>Slider in Lightbox</h3></a></li>
  158. <li><a href="../simple-vertical/"><img width="341" height="250" src="../img/previews/simple-vertical.jpg" /><h3>Simple Vertical Slider</h3></a></li>
  159. <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>
  160. <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>
  161. <li><a href="../gallery-with-deeplinking/"><img width="341" height="250" src="../img/previews/deeplinking.jpg" /><h3>Gallery with Deep Linking</h3></a></li>
  162. </ul>
  163. </div>
  164. <footer class="row clearfix" id="main-footer">
  165. <div class="col span_6">
  166. <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>
  167. <p class="copy">© 2011-2012 <a href="http://dimsemenov.com">Dmitry Semenov</a></p>
  168. </div>
  169. </footer>
  170. <!-- tabs & footer end /// -->
  171. <script id="addJS">jQuery(document).ready(function($) {
  172. var win = $(window),
  173. w,
  174. cContent = $('#cboxLoadedContent'),
  175. currRs;
  176. $('#colorbox-items').on('click', '.colorboxSlider', function(e) {
  177. e.preventDefault();
  178. $.colorbox({
  179. preloading: true,
  180. modal: true,
  181. transition: 'none',
  182. speed: 0,
  183. onComplete: function(e) {
  184. currRs = $('#cboxLoadedContent').find('.royalSlider').royalSlider({
  185. imageScaleMode: 'fill',
  186. keyboardNavEnabled: true,
  187. video: {
  188. autoHideControlNav: true
  189. }
  190. }).data('royalSlider');
  191. updateLightboxSize();
  192. },
  193. href:$(this).attr('href')
  194. });
  195. return false;
  196. });
  197. win.resize( function() {
  198. updateLightboxSize();
  199. });
  200. // dynamic lightbox resizing
  201. function updateLightboxSize() {
  202. w = win.width();
  203. if(w > 1200) {
  204. w = '700px';
  205. } else if(w < 800) {
  206. w = '90%';
  207. } else {
  208. w = '60%';
  209. }
  210. $.colorbox.resize({
  211. width: w
  212. });
  213. if(currRs) {
  214. currRs.updateSliderSize();
  215. }
  216. }
  217. });
  218. </script>
  219. </div>
  220. </body>
  221. </html>