Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save jahir07/2bf95e9e81804fec61e456e28aac6018 to your computer and use it in GitHub Desktop.
Save jahir07/2bf95e9e81804fec61e456e28aac6018 to your computer and use it in GitHub Desktop.
WordPress: Owl Carousel in magnificPopup with ajax request
$(".quickview").magnificPopup({
type: "ajax",
removalDelay: 300,
mainClass: "mfp-fade mfp-quickview",
closeOnBgClick: false,
preloader: true,
tLoading: "",
callbacks: {
ajaxContentAdded: function () {
$(".owl-carousel").each(function (index) {
var items = $(this).data('items');
var autoplay = $(this).data('autoplay');
$(this).owlCarousel({
items: items,
autoplay: autoplay
});
});
}
}
});
<div class="quickview-area">
<a class="quickview" href="<?php echo admin_url( 'admin-ajax.php' ); ?>?action=product_quick_view&post_id=<?php echo get_the_ID() ?>"><span class="arrow_expand_alt"></span></a>
</div>
<div id="owl-carousel-gallery" class="owl-carousel" data-autoplay="true" data-items="1">
<div class="item-image">
<img class="img-fluid" src="1.jpg" alt="">
</div>
<div class="item-image">
<img class="img-fluid" src="2.jpg" alt="">
</div>
<div class="item-image">
<img class="img-fluid" src="3.jpg" alt="">
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment