Popup images not displaying correctly

Popup images not displaying correctly

I've run into a problem that I can't fiqure out how to solve it or what the issue is either. I got a page that displays images and if you click on an image a popup is shown with images that belongs to the main image. The problem I'm having is that 1) There is 2 images being displayed instead of 1. 2) If you go to another tab and you go back to the site the wrapper gets bigger.

I'm using flexslider for the gallery.

I've tried deleting my css and putting it back bit by bit and the same with my js, but I still can't figure it out.
Link to the site
http://www.webkrunch.co.za/clients/bellamage-cakes/gallery/3


My js
  1. $(document).ready(function () {
        // BEGIN MENU HOVER FOR DROP DOWN MENU

        //BEGIN GALLERY POPUP
        $(".popup").click(function(){
            console.log("I've been clicked");
            // $(".popup_background").show().css({"background":"green none repeat scroll 0 0", "left":"43%", "position":"absolute", "top":"50%", "z-index":"42"});
            $(".popup_background").show().css({"background":"green none repeat scroll 0 0", "position":"absolute", "top":"2%", "z-index":"42"});
            $(".overlay").show().css({"background":"red", "height":"100%", "left":"0", "opacity":"0.4", "position":"absolute", "top":"0", "z-index":"41"});
        });

        $(".close1").click(function(){
            console.log("closed");
            $(".popup_background").hide();
            $(".overlay").hide();
        });

        $('.category_items').click(function() {
            $('.items_links').hide();
            var target_category = $(this).attr('data-category');
            $('.items_links[data-item=' + target_category + ']').show();
            return false;
        });




        //test
         $('.flexslider').flexslider({
            animation: "slide",
            maxItems: 0,
            controlNav: "thumbnails"
          });

        //END GALLERY POPUP
    });