Fancybox3 shows thumbnails in IE11...

User 2879688 Photo


Registered User
192 posts

I think this may be a complete shot in the dark but.......
I've posted an install post for New Fancybox 3 but then found that the gallery browser thumbnails only appear to work in IE 11. The spaces and blue bordered box links are there and will go to a picture but the actual thumbnail picture spaces are blank. I made a RFF file that can be downloaded on the install post.
T.
Jazz isn't dead it just smells funny!
User 187934 Photo


Senior Advisor
20,181 posts
Online Now

Can you share a link to the webpage?
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

Hi Eric
The shot in the dark hit the target!!
thanks for replying
the website is
http://timcorke.studio/work.html
Im still building it......
if you scroll down to 'Studies in Wales' to the backward c shaped picture link thing
that should open up the Fancybox gallery.
The toolbar to open up the thumbnails is the 9 squares in a square on the bottom right
thanks Tim
Jazz isn't dead it just smells funny!
User 187934 Photo


Senior Advisor
20,181 posts
Online Now

I see your adding your images through Foundation. The <picture></picture> and or the srcset is causing the issue. Try an html element.
Here's the proper setup for images with thumbs
<a href="image_2.jpg" data-fancybox="group" data-caption="Caption #2">
<img src="thumbnail_2.jpg" alt="" />
</a>
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 187934 Photo


Senior Advisor
20,181 posts
Online Now

Hold on. I might have a work around.
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 187934 Photo


Senior Advisor
20,181 posts
Online Now

Setup your fancybox script like this.
<script type="text/javascript">
$(document).ready(function() {
/*
* Simple image gallery. Uses default settings
*/
$('.fancybox picture').children('img').addClass('remove');
$('.remove').attr('src', '');
$('.remove').contents().unwrap();
$('.remove').attr('srcset', 'src');

$('.fancybox').fancybox();


});
</script>
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

Hi Eric
Thanks for that. Appreciated
Sorry but a complete dunce!!! but I'm not quite sure we're exactly I should put the script?
T.
Jazz isn't dead it just smells funny!
User 187934 Photo


Senior Advisor
20,181 posts
Online Now

In the footer of your page you have this.
<script type="text/javascript">
$(document).ready(function() {
/*
* Simple image gallery. Uses default settings
*/

$('.fancybox').fancybox();


});
</script>


Change it to this.
<script type="text/javascript">
$(document).ready(function() {
/*
* Simple image gallery. Uses default settings
*/
$('.fancybox picture').children('img').addClass('remove');
$('.remove').attr('src', '');
$('.remove').contents().unwrap();
$('.remove').attr('srcset', 'src');

$('.fancybox').fancybox();


});
</script>

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

Hi Eric
I was about to send you a round of drinks....
then IE 11 rears its ugly head!!!!
Now the site works on all the browsers apart from IE 11
well actually whats happened is the link images on the page have gone. weird!
when you refresh the page they appear as you refresh and then vanish!!
Paaah. Damn you Microsoft!!!
T.
Jazz isn't dead it just smells funny!
User 187934 Photo


Senior Advisor
20,181 posts
Online Now

Lets try this. Just a slight change. If this does work in all I'll need to open FF and see if something else can be done.
<script type="text/javascript">
$(document).ready(function() {
/*
* Simple image gallery. Uses default settings
*/
$('.fancybox picture').children('img').addClass('remove');
$('.remove').attr('src', '');
$('.remove').attr('srcset', 'src');

$('.fancybox').fancybox();


});
</script>
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

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.