lightbox image is resizing wrong

Question

I am having a strange issue. Whenever I re-size the window and proceed to launch the lightbox, the image is the wrong size. Once you re size the window again the lightbox detects the window size and re-scales the image properly.

<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>

I have a demo of the site here link to demo on site you can also download a small zip with the contents here zip 26kb

so to replicate the error I am seeing.

A .Start by opening the demo.

B. Click on "Inline". Close it.

C. Afterwards rescale the browser window to something like ~400px. Click on "Inline" again.

D. The image should be the wrong size. As soon as you resize with the browser with the lightbox open the problem is fixed. But i want the image to always be the correct size when you launch the lightbox initially.

the image is always cropped incorrectly. Sometimes you see two images and sometimes the image runs off.

Answer 1

You can simply call a window resize in your javascript code, once you have initialised flexslider

$(".fancybox").fancybox({
     type:'inline',
     autoCenter : true,
     afterShow: function(){
          $('.flexslider').flexslider({
            animation: "slide",
            controlNav: "thumbnails",
            slideshow: true,
            touch: true,
            animationLoop: false
          });

          //force browser re-calculation
          $(window).resize();
     }
 });