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

Left and right not working from asynchronous api call

Tue Dec 19, 2017 3:55 am

Hi all,

I'm using Highslide 5.0.0 on a Drupal 8 site and for most of the site it works fine. However, I am now trying to load content from a third party site via their API. I use JavaScript to make an http GET request for their data which I then display on my site. This includes many images which I display in a Highslide light box. This is all working fine, however pressing left and right arrow keys to move between the images is not working. This works fine when I use it for images stored on my own server. I can confirm that each image has the same slideshowGroup setting. I think the problem may be that I am making the API call asynchronously, but I know using synchronous calls is bad. Does anyone have any advice as to how I could get this working as I have run out of ideas.

Thanks for any help, very much appreciated!.

Tom

MisterNeutron
Posts: 430
Joined: Sun Aug 18, 2013 11:20 am

Re: Left and right not working from asynchronous api call

Tue Dec 19, 2017 1:05 pm

DarkstarTom wrote:I think the problem may be that I am making the API call asynchronously, but I know using synchronous calls is bad.
If asynchronous loading works, it's a bit faster. But if the page requires the Javascript to load before other things happen, then there's nothing inherently wrong with doing it synchronously.

I guess the question is whether you want a fast-loading, broken page, or do you want a page that loads a tiny bit slower (try it - you might not even be able to tell the difference), but on which everything operates correctly?

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

Re: Left and right not working from asynchronous api call

Tue Dec 19, 2017 4:24 pm

Thanks for your reply MisterNeutron. I moved to making a synchronous call and it worked. My page now works fine, however I do now see an error in the console:

aw-api:319 Uncaught null
isHsAnchor @ js_IiZKgXXYzXkaUu2CBDu-Q5H2UooKtJv7euPrnUql6m8.js:691
updateAnchors @ js_IiZKgXXYzXkaUu2CBDu-Q5H2UooKtJv7euPrnUql6m8.js:968
getAnchors @ js_IiZKgXXYzXkaUu2CBDu-Q5H2UooKtJv7euPrnUql6m8.js:985
setClickEvents @ js_IiZKgXXYzXkaUu2CBDu-Q5H2UooKtJv7euPrnUql6m8.js:401
ready @ js_IiZKgXXYzXkaUu2CBDu-Q5H2UooKtJv7euPrnUql6m8.js:958

The JavaScript file it is referencing is highslide-full.js.

I've tried putting a try\catch block around my api call but it is never triggered. Is this something I should be worried about?

Thanks again,

Tom

MisterNeutron
Posts: 430
Joined: Sun Aug 18, 2013 11:20 am

Re: Left and right not working from asynchronous api call

Tue Dec 19, 2017 8:49 pm

I suppose that as long as everything's working, it's not worth worrying about an uncaught null somewhere in the Highslide script. Hell, the Google Analytics code coughs up an error in the console!

There's certainly no one around to debug it. I'm not really a Javascript guy, so it's above my pay grade, and there doesn't seem to be anyone else on Earth doing Highslide support. In fact, if you're worried about future-proofing your stuff, it's probably time to start hunting for another lightbox script. I can recommend Floatbox - not free, but seems to be very solid. I'm using it for a new "skin" in jAlbum called Saturn (my older Matrix skin uses Highslide). Demo Site.
Last edited by MisterNeutron on Thu Dec 21, 2017 12:17 pm, edited 1 time in total.

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

Re: Left and right not working from asynchronous api call

Wed Dec 20, 2017 11:41 pm

Thanks again for your reply. I tracked down the cause of the "Uncaught null" error. I was using "captionText:" to pass a text caption to the highslide lightbox. The error occurs when there are certain special characters in the string used. In my case it was the "❤" character. Anyway my page is working correctly now.

Thanks for the suggestion about Floatbox. It does look as if highslide is reaching the end of it's usefulness to me and Floatbox looks great on your site.

MisterNeutron
Posts: 430
Joined: Sun Aug 18, 2013 11:20 am

Re: Left and right not working from asynchronous api call

Thu Dec 21, 2017 12:29 pm

Besides being actively maintained, the other big plus to Floatbox is that, unlike Highslide JS, the expander is responsive to the viewport size not just for images, but also for videos (self-hosted MP4, YouTube, Vimeo, etc.) and even PDF's. Swipe-enabled, as well, though it's a little balky on a typically underpowered phone.

It's not perfect - for example, trying to swap in your own navigation icons is a miserable exercise, since the script uses a custom-made font to display them (haven't any of these folks ever heard of SVG's?), and there are a couple of other hard-coded choices that I've had to finagle my way around. It's not open source, unlike Highslide, so even if you're a Javascript person, you can't really tinker with the script.

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

Re: Left and right not working from asynchronous api call

Thu Dec 21, 2017 5:38 pm

In case anyone else encounters the same problem switching from using "captionText" to "captionID" fixed it.

Return to “Highslide JS Usage”