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>