Blueimp Gallery автоматически запускается в режиме слайд-шоу

Question

У меня есть работа в галерее Blueimp, но когда страница загружается, она сразу переходит в режим слайд-шоу, а не только показывает миниатюры.

Сначала я хочу отображать миниатюры, чтобы, если кто-то хочет начать посередине шоу, они могут легко это сделать.

Как я могу остановить его от автоматического перехода в режим слайд-шоу?

Вот мой 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 не работает, но поиск стека обмена получил это исправление.

Но теперь он всегда начинается в режиме слайд-шоу. Как мне заставить его по умолчанию отображать стену миниатюр вместо этого?

Answer 1

Причина, по которой он начинается немедленно, заключается в том, что вы создаете экземпляр галереи, как только загружается скрипт. Способ загрузки эскизов сначала состоит в том, чтобы поместить код инициализатора галереи внутри обработчика кликов, настроенного на изображения миниатюр. Пример:

<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 для управления начинается ли слайд-шоу, когда галерея запуски, которые я думаю, отличается от того, что вы после этого.