Blueimp Gallery automatically starts on slideshow mode - gallery

Question

I have a Blueimp gallery working, but when the page loads, it immediately goes to slideshow mode, instead of only displaying the thumbnails.
I'd like to display thumbnails first, so that if someone wants to start in the middle of the show they can easily do that.
How can I stop it from automatically going to slideshow mode?
Here is my 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">×</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>
And here is the 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>
It works, I get the gallery and I get the description field showing up (the Year: tag). It took a while to figure out how to get the description field to show. The blueimp documentation code doesn't work, but searching stack exchange got that fixed.
But now it always starts in slideshow mode. How do I get it to default to displaying the wall of thumbnails instead?

Answer 1

The reason it starts immediately is that you are creating the gallery instance as soon as the script loads. The way to load the thumbnail view first is to put the gallery initializer code inside a click handler set up on the thumbnail images.
Example:
<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>
Also, the startSlideshow option is for controlling whether the slideshow begins when the gallery launches, which I think is different than what you are after.