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

它立即启动的原因是您在脚本加载后立即创建库实例。首先加载缩略图视图的方法是将gallery初始化程序代码放在缩略图图像上设置的单击处理程序中。例如：

<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选项用于控制在图库启动时幻灯片是否开始，我认为这与您所使用的不同。

Blueimp Gallery会自动以幻灯片模式启动

1 个答案: