Fancybox3 shows thumbnails in IE11...

User 2879688 Photo


Registered User
192 posts

Hi Eric
No luck I'm afraid. It all works as before i.e. In all the browsers apart from IE11.
I still don't actually know if the the thumbnails work in IE11 as the picture links aren't displaying that you need to use to get to the gallery!
So near and yet so far!
Do you need the rff file?
T.
Jazz isn't dead it just smells funny!
User 187934 Photo


Senior Advisor
20,181 posts
Online Now

The issue is the way the images are setup. If you use a html element and set the links and images up as I posted above it will work.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2879688 Photo


Registered User
192 posts

Ok Thanks Eric.
Appreciate the help.
Just out of curiosity. Would using RSD avoid this problem?
Thanks T
Jazz isn't dead it just smells funny!
User 2879688 Photo


Registered User
192 posts

Hi Eric.
Yes that seems to do the trick. Will proceed with this setup.
Appreciate the help
T.
Also didn't make any difference on RSD
Jazz isn't dead it just smells funny!
User 244626 Photo


Registered User
811 posts

If you do not use multiple "scrset" settings for the thumbnail image this code will work. Basically it changes the base64 conversion of the "src" that is done on export to all images back to the "src" link that was used inside the program.

<script>
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('srcset')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('srcset'));
} } }
window.onload = init;
</script>


(Put this in your footer)

Again, this script will only work if you do not choose to have different image sizes or resolutions at different breakpoints for you image. (thumbnail link in your case)
I would love for someone to take this one step further and make the script work for multiple "scrset" settings.
It would also be great if CC would allow us to choose if the image should be converted or not as I understand the reasoning of a fast loading web site but SEO indexing of images is just as important to some of us.
I suppose one could argue though if this script works you may get the fast loading of the base64 image and also the SEO indexing of the non-converted image.jpg link that replaces it.

I have a link to a working fancybox http://gluexp.coffeecup.com/fancybox.html with a small thumbnail gallery with only the one "srcset".....and then a gallery below it that uses two different sized images at different breakpoints.....that does not work (thumbnails missing) because of the multiple srcsets involved. I have not yet figured out a way to script a fix for that.
Bootstrap 5 CSS Grid.
User 244626 Photo


Registered User
811 posts

It is worth mentioning the advanced capability of Fancybox3 to add different srcsets for you to use so different pictures sizes can be served for different device widths. I added two data-srcset settings (see Fancybox3 instructions) to the first (top gallery) popup image of the parrot. This allows you to bypass the multiple srcsets in the CC program and lets you use the image defer and replace script, while still taking advantage of serving multiple image sizes and resolutions handled directly by Fancybox3.

I can also confirm that Google will index images that have been converted from base64 to the standard link jpg format using the deferred image script referenced in my earlier post. My test image on my website came to the top 10 in Google Image Search just two weeks. Sweet !
Bootstrap 5 CSS Grid.
User 2876170 Photo


Registered User
5 posts

Hi Twinstream.
any chance of uploading a FF file of
http://gluexp.coffeecup.com/fancybox.html
so we can see all the juicy details!!!

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.