從縮略圖列表中啓動RoyalSlider

Question

我試圖從非滾動縮略圖列表中動態地啓動RoyalSlider的全屏實例。

HTML：

<div class="royalSlider rsDefault"> 
    <a class="rsImg" data-rsBigImg="http://wordpress.ms/college-news/wp-content/uploads/sites/3/2014/01/NICOLA.jpg" href="http://wordpress.ms/college-news/wp-content/uploads/sites/3/2014/01/NICOLA.jpg">yay caption!<img width="150" height="150" class="rsTmb" src="http://wordpress.ms/college-news/wp-content/uploads/sites/3/2014/01/NICOLA-150x150.jpg" /></a> 
    <a class="rsImg" data-rsBigImg="http://wordpress.ms/college-news/wp-content/uploads/sites/3/2014/01/NICOLA.jpg" href="http://wordpress.ms/college-news/wp-content/uploads/sites/3/2014/01/NICOLA.jpg">yay caption!<img width="150" height="150" class="rsTmb" src="http://wordpress.ms/college-news/wp-content/uploads/sites/3/2014/01/NICOLA-150x150.jpg" /></a> 
    <a class="rsImg" data-rsBigImg="http://wordpress.ms/college-news/wp-content/uploads/sites/3/2014/01/NICOLA.jpg" href="http://wordpress.ms/college-news/wp-content/uploads/sites/3/2014/01/NICOLA.jpg">yay caption!<img width="150" height="150" class="rsTmb" src="http://wordpress.ms/college-news/wp-content/uploads/sites/3/2014/01/NICOLA-150x150.jpg" /></a> 
</div> 

JS：

// RoyalSlider 
$(".royalSlider").on("click", ".rsTmb", function(event) { 

    event.preventDefault(); 

    var index = $(event.target).parent().index(); 

    var slider = $(".royalSlider").royalSlider({ 
      keyboardNavEnabled: true, 
      controlNavigation: 'thumbnails', 
      globalCaption:true, 
      globalCaptionInside: false, 
      fullscreen: { 
       enabled: true 
      }, 
      thumbs: { 
       // thumbnails options go gere 
       spacing: 10, 
       arrowsAutoHide: true 
      } 
     }).data('royalSlider'); 

    if (!slider.isFullscreen) { // not fullscreen 

     slider.enterFullscreen(); 
     slider.goTo(index); // this quite often does not find the index 

    } 
}); 

UPDATE：此代碼的工作，從大拇指名單過渡到全屏，然後再返回。不過，在返回全屏後，我仍然遇到了正確的幻燈片。

例如

1. 頁面加載後，拇指出現 - >工作
2. 點擊拇指，負載全屏 - >工作
3. 退出全屏 - >工作
4. 單擊另一個拇指不是目前的ID - >全屏負載，但（如滑塊位置不同步）

Answer 1

原生HTML5全屏只能通過用戶操作（即單擊）執行。

您可以通過選項來禁用本地全屏 - 在啓動http://dimsemenov.com/plugins/royal-slider/documentation/#fullscreen

或者只是拉伸滑塊窗口的100％寬度/高度http://help.dimsemenov.com/kb/royalslider-jquery-plugin-faq/how-stretch-slider-to-full-browser-width-and-height