iPad thumbnail bar issue when using echo.js

[alixbergeret]

i have a strange issue that is only happening on iPad, with the thumbnail bar open on the right, and I tap on random images... the big image on the left doesn’t ALWAYS get display full size... it doesn't happen often, i need to keep tapping around the thumbnail bar for a while before it happens:

If I navigate away and back using the left and right arrows (ie not the thumbnail bar) the image is back to its normal size.

This is baffling. It only happens on iPad, so i can’t debug using the dev tools... also it only seems to happen with large galleries, and only when navigating using the thumbnails... and again, only occasionally.

I am on iOS 12.4.1 Latest version of Chrome.

Any Idea?

[fancyapps]

Hi,

Does this happen on Chrome only or on Safari as well?

[alixbergeret]

Hi,

Thank you for your message.

Yes it happens on Safari as well. Please note that since yesterday I have installed the latest version on iOS(13.1.2) and it has NOT fixed the issue.

A few more thoughts:

• Having obsessed over this for hours last night, I have (I think) worked out when it happens... if I use the thumbnails to navigate the images in the correct, sequential order (as I would with the left-right arrows), it works fine... it's when i start jumping ahead or back by 2 or more images that I get the issue.... if I start moving sequentially again, it works again and even "fixes" the images that were small before.

• I am using the (undocumented?) data-thumb attribute to get my image paths, as my images are lazy loaded, and the src attribute only contains a placeholder. Not sure if it could be related to this? I don't see how, as looking at the library code it doesn't change much later on.

• As a side-note, my next job is to amend the library itself so that it lazy loads the thumbnails in the thumbnail bar, if that's of any interest to the project :)

• I have since found out that you can access a simplified dev console on iOS Chrome (by browsing to chrome://inspect) and can confirm that no JS errors are being logged.

• It only happens in large galleries, and only further down, never "above the fold".

• Here's how I initialised the library... nothing unusual here:

$('[data-fancybox="gallery"]').fancybox({ buttons : [ "zoom", "share", "fullScreen", "download", "thumbs", "close" ], transitionEffect: "slide", loop: true, thumbs : { autoStart : true } });

Let me know if I can provide anything else (a video of the issue?), as this is really bugging me, the thumbnail bar is an important feature on my website.... thanks!

[alixbergeret]

I have done a video showing the issue :)

https://www.youtube.com/watch?v=_NPcj7i_zLg

[alixbergeret]

A quick update.

It does indeed seem to be the use of the "data-thumb" attribute that is causing the problem. If I remove it:

• My thumbnails go back to being broken (as I lazy load my images, their "src" attribute only contains a placeholder)
• BUT I can now use my (broken) thumbnails to navigate the images in any way/order I like, and I get the "full size" image.

So... clearly the fact that I use the "data-thumb" is upsetting the code further down... but where? Maybe in the setBigImage function? it's so hard to know without being able to debug the code :(

[fancyapps]

Hard to tell without seeing your page, works fine for me.

[alixbergeret]

Hi, Fair enough, I have activated the thumbnails on this comics series only: https://www.bdtheque.com/series/126/thorgal

To replicate the issue (on iPad) :

• Scroll down the page a little bit, and tap on the image of a comics page on the right (under the heading "la galerie")
• Open the thumbnail bar
• There's loads of images there... scroll down to about halfway
• Tap on various images in a random order (not sequentially), and note how a small version of the page is displayed
• Tap in sequential order, or tap on images at the top of the thumbnail bar, and it works fine.

I hope this helps.

[fancyapps]

Oh, man, you know, no matter how hard I tried, I followed exactly all your steps on the video, and it just works fine on my iPad.

Could you try to disable transition effect (transitionEffect:false) to see if that helps you?

[alixbergeret]

Hi, Thank you for looking into it. I have tried disabling the transition effect, but that didn't fix it. Please note that I have isolated the issue on a simplified test page, to ensure the problem isn't caused by something else (I don't know Bootstrap for example). Here it is: http://mi-linux.wlv.ac.uk/~in9352/test.php

And I can replicate the issue on my iPad, but also on my old iPhone 5.

If you look at the code, I have only included the bare minimum.

As per before:

• I am lazy loading my images, using a small library called echo.
• As such I am passing my image URLs to the thumbnails via the "data-thumb" attribute, located in my a tags.

I was hoping it could just be my iPad, but now I can replicate on my iPhone too, so it worries me :(

[acwolff]

I see the issue on my iPad, but only if I click on a thumbnail in the left column, clicking on thumbnails of the right column show correct images.

[alixbergeret]

I see the issue on my iPad, but only if I click on a thumbnail in the left column, clicking on thumbnails of the right column show correct images.

Thank goodness it's not just me, I thought I was losing it.

[acwolff]

Yes but to see the issue I have not just to click some thumbnails on the first page, I have to scroll the thumbnails down to another set before I see the issue.

In my own albums I have the thumbnails at the bottom and I don’t see there the issue, see here. Did you try that?

[alixbergeret]

Yes but to see the issue I have not just to click some thumbnails on the first page, I have to scroll the thumbnails down to another set before I see the issue.

In my own albums I have the thumbnails at the bottom and I don’t see there the issue, see here. Did you try that?

Yes I have mentioned above, and in the video, the issue only happens in a very specific set of circumstances:

• only when using the data-thumb attribute (which is essential for anyone lazy loading their images, which is pretty much standard today)
• only on large galleries, for images further down, not at the top
• only when tapping on images in a non-sequential order.
• only on iOS (it works fine on Chrome + Windows)

But the above are pretty common with the average user to be honest. We had no trouble coming across this.

[fancyapps]

Hi,

Thanks for the minimal demo, that really helps to debug. So, could you, please, open http://fancyapps.com/tmp/echo/ (it is the same site as yours, I just modified a bit echo.js and upgraded jQuery to the latest) and check if that now works fine for you? If yes, then I think I know what is the cause of this issue.

[acwolff]

I do see the issue in demo http://fancyapps.com/tmp/echo/ if I click the 2nd thumbnail in the left column at the end.

[alixbergeret]

Hi,

Thanks for the minimal demo, that really helps to debug. So, could you, please, open http://fancyapps.com/tmp/echo/ (it is the same site as yours, I just modified a bit echo.js and upgraded jQuery to the latest) and check if that now works fine for you? If yes, then I think I know what is the cause of this issue.

Unfortunately it hasn't fixed... see latest video: https://youtu.be/3BwPMBDZ-0g

Please note that in the video i explain something else I have noticed, that may be of use.

Thank you for your time :)