In my experience, I have found flexslider and fancybox to be very useful plugins. Individually, they work perfectly fine on a website that I am currently working on. However, when I tried placing a flexslider gallery inside a fancybox div, I encountered a problem. It's important to mention that this is a responsive website, meaning that all the widths are based on percentages rather than fixed values.
Initially, everything seemed to be functioning correctly. I loaded fancybox and flexslider displayed properly with its width set at 50% of the fancybox container. But when I added display: none; to the fancybox div in order to hide it until needed, an issue arose. When fancybox loaded, all the images within flexslider appeared tiny, even though the width of the flexslider div was correct. My assumption is that because flexslider loads along with the page, it has no knowledge of its own width. This explains why the issue does not occur when display: none; is set.
This is the current Javascript code I'm using to load both plugins:
// =FANCYBOX
$(".fancybox").fancybox({
padding : 2,
nextEffect: 'fade',
prevEffect: 'fade',
title: false,
});
// =FLEXSLIDER
$(function(){
if($(".flexslider").length > 0) {
$(".flexslider").addClass("loading");
// Can also be used with $(document).ready()
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
directionNav: false,
slideshowSpeed: 5000,
animationSpeed: 360,
easing: "easeInQuad",
useCSS: false,
start: function(slider){
$('.flexslider').removeClass('loading');
}
});
});
}
});
I am wondering if there is a way to force flexslider to initialize again after fancybox becomes visible?
Appreciate any help or insight,
Steve