OwlCarousel with modal window

Question

I need to use OwlCarousel+thumbnails with Magnific Popup. So I have 2 synced carousel - one for slides and one for thumbnails. After clicking to Zoom button the modal window (Magnific Popup) appears which have just a moved OwlCarousel main slider (.js-owl-carousel-synced-slides)

I use owl.reinit() because I need to reinitialise slider for full-width images

The problem is that when I clicked to Zoom button the first slide becomes active, so the slides are no longer synchronized

Here is the carousel on codepen - http://codepen.io/karmeljuk/pen/mOoJBZ

The question is: how can I stretch the images on modal window to full-width and keep synchronized slides?

// OWL carousel

var slides = $(".js-owl-carousel-synced-slides");
var thumbnails = $(".js-owl-carousel-synced-thumbnails");

slides.owlCarousel({
   singleItem: true,
   items: 1,
   slideSpeed: 500,
   navigation: false,
   pagination: false,
   responsive: true,
   addClassActive: true,
   transitionStyle : false,
   afterAction: syncPosition
});

thumbnails.owlCarousel({
   items: 3,
   pagination: false,
   responsive: false,
   transitionStyle : false,
   afterInit: function(element){
       element.find(".owl-item").eq(0).addClass("synced");
   }
});

function syncPosition(element){
   var current = this.currentItem;
   thumbnails
       .find(".owl-item")
       .removeClass("synced")
       .eq(current)
       .addClass("synced");
}

$(thumbnails).on("click", ".owl-item", function(element){
   element.preventDefault();
   var number = $(this).data("owlItem");
   slides.trigger("owl.goTo",number);
});


// Magnific Popup
var $owlCarouselBlock = $('.owl-carousel-block'),
   owl = $(".js-owl-carousel-synced-slides").data('owlCarousel');

$('.view').magnificPopup({
   items: {
       src: $owlCarouselBlock,
       type: 'inline'
   },
   closeBtnInside: false,
   preloader: true,
   removalDelay: 500,
   tLoading: 'Loading',
   callbacks: {
       open: function () {
           owl.reinit();
       },
       elementParse: function () {
           setTimeout(function() {
               $(".mfp-content")
                   .show()
                   .animate({
                       opacity: 1
                   }, 300);
           }, 500); // delay for synchronous loading both carousels
       },
       close: function() {
           $owlCarouselBlock
               .removeClass('mfp-hide');
           $(".mfp-content")
               .removeClass('mfp-content-load');

           owl.reinit();
       }
   }
});

.owl-carousel-block {
  margin: 0 auto;
  width: 640px;
}
.owl-carousel-block .item img {
  display: block;
  height: auto;
}
.owl-carousel-block .js-owl-carousel-synced-thumbnails {
  margin-top: 20px;
}
.owl-carousel-block .js-owl-carousel-synced-thumbnails .synced img {
  border: 3px solid red;
}
.mfp-wrap .owl-carousel-block {
  width: 100vw;
}
.mfp-wrap .js-owl-carousel-synced-slides .item img {
  width: 100vw;
  height: 600px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>

<div class="owl-carousel-block">   
   <div class="js-owl-carousel-synced-slides"> 
     <div class="item">
        <img src="http://placehold.it/640x380" alt="">
      </div>
     <div class="item">
        <img src="http://placehold.it/640x380" alt="">
      </div>
     <div class="item">
        <img src="http://placehold.it/640x380" alt="">
      </div> 
   </div>
   <a href="#" class="view">Zoom</a>
   
   <div class="js-owl-carousel-synced-thumbnails"> 
     <div class="item">
        <img src="http://placehold.it/160x100" alt="">
      </div>
     <div class="item">
        <img src="http://placehold.it/160x100" alt="">
      </div>
     <div class="item">
        <img src="http://placehold.it/160x100" alt="">
      </div> 
   </div>
</div>