Fancybox3 shows thumbnails in IE11...

User 2879688 Photo


Registered User
149 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.
So we’re all good then : )
User 187934 Photo


Senior Advisor
18,128 posts

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.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
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 personnel site used for testing and as an easy way to share photos.(RLM imported to RSD)
http://ericrohloff.com
http://ericrohloff.com/property/
User 2879688 Photo


Registered User
149 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
So we’re all good then : )
User 187934 Photo


Senior Advisor
18,128 posts

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.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
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 personnel site used for testing and as an easy way to share photos.(RLM imported to RSD)
http://ericrohloff.com
http://ericrohloff.com/property/
User 187934 Photo


Senior Advisor
18,128 posts

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.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
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 personnel site used for testing and as an easy way to share photos.(RLM imported to RSD)
http://ericrohloff.com
http://ericrohloff.com/property/
User 187934 Photo


Senior Advisor
18,128 posts

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.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
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 personnel site used for testing and as an easy way to share photos.(RLM imported to RSD)
http://ericrohloff.com
http://ericrohloff.com/property/
User 2879688 Photo


Registered User
149 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.
So we’re all good then : )
User 187934 Photo


Senior Advisor
18,128 posts

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.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
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 personnel site used for testing and as an easy way to share photos.(RLM imported to RSD)
http://ericrohloff.com
http://ericrohloff.com/property/
User 2879688 Photo


Registered User
149 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.
So we’re all good then : )
User 187934 Photo


Senior Advisor
18,128 posts

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.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
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 personnel site used for testing and as an easy way to share photos.(RLM imported to RSD)
http://ericrohloff.com
http://ericrohloff.com/property/

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.