Something strange is happening with my website. Whenever I resize the window and try to open the lightbox, the image appears in the wrong size. It's only when I resize the window again that the lightbox detects the correct window size and properly displays the image.
<script type="text/javascript">
jQuery(document).ready(function($){
$(".fancybox").fancybox({
type:'inline',
autoCenter : true,
afterShow: function(){
$('.flexslider').flexslider({
animation: "slide",
controlNav: "thumbnails",
slideshow: true,
touch: true,
animationLoop: false
});
}
}); // fancybox
}); // ready
</script>
The demo of the site can be found here link to demo on site. You can also download a small zip file containing the contents from this link zip 26kb.
To replicate the error I am experiencing:
A. Start by opening the demo.
B. Click on "Inline" and then close it.
C. Resize the browser window to around ~400px and click on "Inline" again.
D. The image should appear in the wrong size. Once you resize the window with the lightbox open, the issue is fixed. However, I want the image to always display in the correct size when launching the lightbox initially.
The image is consistently cropped incorrectly. Sometimes two images show up, and other times the image extends beyond the screen.
https://i.sstatic.net/N280A.png https://i.sstatic.net/B7ue2.png