Blueimp Gallery自動啓動幻燈片模式

我有一個Blueimp圖庫工作，但當頁面加載時，它立即進入幻燈片模式，而不是隻顯示縮略圖。Blueimp Gallery自動啓動幻燈片模式

我想先顯示縮略圖，這樣如果有人想在展會中間開始他們可以輕鬆地做到這一點。

如何阻止它自動進入幻燈片模式？

這裏是我的html

18   <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-start-slideshow="false">              
 
19    <!-- The container for the modal slides -->                            
 
20    <div class="slides"></div>                                
 
21    <!-- Controls for the borderless lightbox -->                           
 
22    <h3 class="title"></h3>                                 
 
23    <p class="description"></p>                                
 
24    <a class="prev">‹</a>                                 
 
25    <a class="next">›</a>                                 
 
26    <a class="close">×</a>                                 
 
27    <a class="play-pause"></a>                                
 
28    <ol class="indicator"></ol>                                
 
29    <!-- The modal dialog, which will be used to wrap the lightbox content -->                    
 
30    <div class="modal fade">                                 
 
31     <div class="modal-dialog">                               
 
32      <div class="modal-content">                              
 
33       <div class="modal-header">                             
 
34        <button type="button" class="close" aria-hidden="true">&times;</button>                 
 
35        <h4 class="modal-title"></h4>                           
 
36       </div>                                  
 
37       <div class="modal-body next"></div>                           
 
38       <div class="modal-footer">                             
 
39        <button type="button" class="btn btn-default pull-left prev">                   
 
40         <i class="glyphicon glyphicon-chevron-left"></i>                      
 
41         Previous                                
 
42        </button>                                
 
43        <button type="button" class="btn btn-primary next">                      
 
44         Next                                 
 
45         <i class="glyphicon glyphicon-chevron-right"></i>                     
 
46        </button>                                
 
47       </div>                                  
 
48      </div>                                   
 
49     </div>                                    
 
50    </div>                                     
 
51   </div>                     
 

 

 
60  <div id="links"> 
 
61   @foreach ($finalQuery as $image) 
 
62    <a href="{{ URL::route ('ppMiscGetProtectedFile', [ 'fileID' => $image['fileID'], 'size' => 'original' ]) }}" 
 
63     title="{{ $image['image_number'] }}" 
 
64     data-description="Year: {{ $image['year'] }}" 
 
65     data-gallery 
 
66    > 
 
67     <img src="{{ URL::route('ppMiscGetProtectedFile', [ 'fileID' => $image['fileID'], 'size' => 'thumbSmall']) }}" alt="{{ $image['image_number'] }}" /> 
 
68    </a> 
 
69   @endforeach 
 
70 
 
71  </div>

這裏是JavaScript

78  <script src="//blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script> 
 
79  <script src="/js/bs_gallery/blueimp-gallery.min.js"></script> 
 
80 
 
86 <script> 
 
87   blueimp.Gallery(
 
88    document.getElementById('links').getElementsByTagName('a'), 
 
89    {                                                                    
 
90     startSlideshow:false, 
 
91     onslide: function (index, slide) { 
 
92      var text = this.list[index].getAttribute('data-description'), 
 
93       node = this.container.find('.description'); 
 
94      node.empty(); 
 
95      if (text) { 
 
96       node[0].appendChild(document.createTextNode(text)); 
 
97      } 
 
98     } 
 
99    } 
 
100  ); 
 
101   
 
102   
 
103   var options = { 
 
104    startSlideshow: false, 
 
105   }; 
 
106   
 
107 
 
108 
 
109 
 
110  </script>

它的工作原理，我得到的畫廊和我顯示的描述字段（年份：標籤）。花了一段時間才弄清楚如何讓描述字段顯示出來。 blueimp文檔代碼不起作用，但搜索堆棧交換得到修復。

但現在它總是以幻燈片模式啓動。我如何讓它默認顯示縮略圖的牆？

來源

2016-07-04 Nertskull

它立即啓動的原因是您在腳本加載後立即創建畫廊實例。首先加載縮略圖視圖的方法是將圖庫初始化程序代碼放入設置在縮略圖圖像上的點擊處理程序中。例子：

<script> 
    document.getElementById('links').onclick = function (event) { 
     event = event || window.event; 
     var target = event.target || event.srcElement, 
      link = target.src ? target.parentNode : target, 
      options = { index: link, event: event}, 
      links = this.getElementsByTagName('a'); 
     blueimp.Gallery(links, options); 
    }; 
</script>

此外，startSlideshow選項是用於控制在畫廊推出，我認爲這是比你所追求的不同幻燈片是否開始。

來源

2016-12-30 18:56:48 Andy

Blueimp Gallery自動啓動幻燈片模式

回答

相關問題