首页>>音乐/视频>>视频相册展示，点击显示播放视频(2015-01-05)

视频相册展示，点击显示播放视频

视频相册展示，点击显示播放视频
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="row clearfix">  
  2.   <div class="col span_6 fwImage">  
  3. <div id="video-gallery" class="royalSlider videoGallery rsDefault">  
  4.   <a class="rsImg" data-rsw="843" data-rsh="473" data-rsVideo="http://www.youtube.com/watch?v=HFbHRWwyihE" href="http://dimsemenov.comhttp://dimsemenov.com/plugins/royal-slider/img/admin-video.png">  
  5.     <div class="rsTmb">  
  6.       <h5>New RoyalSlider</h5>  
  7.       <span>by Dmitry Semenov</span>  
  8.     </div>  
  9.   </a>  
  10.    <a class="rsImg" data-rsVideo="https://vimeo.com/45830194" href="http://b.vimeocdn.com/ts/319/715/319715493_640.jpg">  
  11.     <div class="rsTmb">  
  12.       <h5>Stanley Piano</h5>  
  13.       <span>by Digital Kitchen</span>  
  14.     </div>  
  15.   </a>  
  16.   <div class="rsContent">  
  17.     <a class="rsImg" data-rsVideo="https://vimeo.com/31240369" href="http://b.vimeocdn.com/ts/210/393/210393954_640.jpg">  
  18.       <div class="rsTmb">  
  19.         <h5>I Believe I Can Fly</h5>  
  20.         <span>by sebastien montaz-rosset</span>  
  21.       </div>  
  22.     </a>  
  23.     <h3 class="rsABlock sampleBlock">Animated block, to show you that you can put anything you want inside each slide.</h3>  
  24.   </div>  
  25.    <a class="rsImg" data-rsVideo="https://vimeo.com/44878206" href="http://b.vimeocdn.com/ts/311/891/311891198_640.jpg">  
  26.     <div class="rsTmb">  
  27.       <h5>Dubstep Dispute</h5>  
  28.       <span>by Fluxel Media</span>  
  29.     </div>  
  30.   </a><a class="rsImg" data-rsVideo="https://vimeo.com/41132461" href="http://b.vimeocdn.com/ts/284/709/284709146_640.jpg">  
  31.     <div class="rsTmb">  
  32.       <h5>Barcode Band</h5>  
  33.       <span>by Kang woon Jin</span>  
  34.     </div>  
  35.   </a>  
  36.  <a class="rsImg" data-rsVideo="hhttps://vimeo.com/44388232" href="http://b.vimeocdn.com/ts/308/375/308375094_640.jpg">  
  37.     <div class="rsTmb">  
  38.       <h5>Samm Hodges Reel</h5>  
  39.       <span>by Animal</span>  
  40.     </div>  
  41.   </a>  
  42.   <a class="rsImg" data-rsVideo="http://www.youtube.com/watch?v=VDspPKDMBMo" href="http://dimsemenov.com/plugins/royal-slider/img/video/02.jpg">  
  43.     <div class="rsTmb">  
  44.       <h5>The Foundry Showreel</h5>  
  45.       <span>by The Foundry</span>  
  46.     </div>  
  47.   </a>  
  48. </div>  
  49.   </div>  
  50.    
  51. </div>  
  52.   
  53.   
  54.   </div>  
  55.   <div class="wrapper page">  
  56.     
  57.     <script>  
  58.       jQuery(document).ready(function($) {  
  59.   $('#video-gallery').royalSlider({  
  60.     arrowsNav: false,  
  61.     fadeinLoadedSlide: true,  
  62.     controlNavigationSpacing: 0,  
  63.     controlNavigation: 'thumbnails',  
  64.     thumbs: {  
  65.       autoCenter: false,  
  66.       fitInViewport: true,  
  67.       orientation: 'vertical',  
  68.       spacing: 0,  
  69.       paddingBottom: 0  
  70.     },  
  71.     keyboardNavEnabled: true,  
  72.     imageScaleMode: 'fill',  
  73.     imageAlignCenter:true,  
  74.     slidesSpacing: 0,  
  75.     loop: false,  
  76.     loopRewind: true,  
  77.     numImagesToPreload: 3,  
  78.     video: {  
  79.       autoHideArrows:true,  
  80.       autoHideControlNav:false,  
  81.       autoHideBlocks: true  
  82.     },   
  83.     autoScaleSlider: true,   
  84.     autoScaleSliderWidth: 960,       
  85.     autoScaleSliderHeight: 450,  
  86.   
  87.       
  88.     imgWidth: 640,  
  89.     imgHeight: 360  
  90.   
  91.   });  
  92. });  
  93.   
  94.     </script>  
  95.     
  96.   
  97.   
  98.     
  99.         
  100.   </div>  

 


原文地址:http://www.freejs.net/article_yingyueshipin_454.html