DarkstarTom
Posts: 5
Joined: Thu May 04, 2017 1:58 am

Highslide grouping not working on Drupal 8 with BigPipe

I'm having a puzzling problem with my Drupal 8.3 site, I'm using Highslide to show images in a lightbox and it works fine. Until I enable the Big Pipe module that is. Then the images show in the lightbox correctly but using the arrows keys to move between images in a gallery no longer works. It's using JQuery 2.2.4 and I've tried Highslide 4.1.13 and 5.0.0 but get the same result with both. I am using the highslide-full.js file. I am using the Bootstrap theme.

Here is a Drupal issue description which I think describes the same problem:

https://www.drupal.org/node/2794099

I don't understand JavaScript very well so the answer may be on that page, but I don't know how to implement the wrapper they mention.

My HTML code looks like this:

Code: Select all

      
<a onClick="return hs.expand(this, { slideshowGroup: '{{ first_name }}' })" href="{{ photos_array[0] }}">
<img class="img-responsive" src="{{ thumbnails_array[0] }}">
</a>
<a onClick="return hs.expand(this, { slideshowGroup: '{{ first_name }}' })" href="{{ photos_array[1] }}">
<img class="img-responsive" src="{{ thumbnails_array[1] }}">
</a>
<a onClick="return hs.expand(this, { slideshowGroup: '{{ first_name }}' })" href="{{ photos_array[2] }}">
<img class="img-responsive" src="{{ thumbnails_array[2] }}">
</a>
 
Please can you offer any advice as to how I can get this working? What could cause the moving between images to stop working? Thanks!

Return to “Highslide JS Usage”