猫头鹰旋转木马和Magnific Popup

Question

我正在使用猫头鹰旋转木马，并决定添加它的大胆插件，以便能够点击旋转木马中的图像，查看更大，然后有一个灯箱图库，以便能够点击更大图片。 Lightbox部分可以工作，但是当点击灯箱时，它似乎会复制所有图像。它还在实际网站上打破了我的旋转木马并显示了所有图像。

＆＃13;

＆＃13;

app.get('/', function (req, res) {
    /***
    'template.hbs' - the filename of the template
    {} - the context - fill this with all the variables you 
                       want to use in your template
    ***/
    res.render('template.hbs', {title: 'My Title'});
});

＆＃13;

$(document).ready(function() {
  $(".popup").magnificPopup({
    type: "image",
    removalDelay: 160,
    preloader: false,
    fixedContentPos: true,
    gallery: {
      enabled: true
    }
  });
});
$(".bootleggers").owlCarousel({
  loop: true,
  margin: 10,
  nav: true,
  navText: [
    "<i class='fa fa-caret-left'></i>",
    "<i class='fa fa-caret-right'></i>"
  ]
});

＆＃13;

body {
  background: #f1f1f1;
}


/* image slideshows for events */

.carousel-wrap {
  width: 100%;
}

.bootleggers .item {
  -webkit-backface-visibility: hidden;
  display: inline-block;
}

.item img {
  border-radius: 50%;
}

.owl-nav>div {
  margin-top: -26px;
  position: absolute;
  top: 50%;
  color: #cdcbcd;
}

.owl-nav i {
  font-size: 52px;
}

.owl-nav .owl-prev {
  left: -30px;
  color: #000;
}

.owl-nav .owl-next {
  right: -30px;
  color: #000;
}

.aboutrow {
  display: flex;
}

.aboutcol {
  padding: 1.5em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.eventname {
  font-size: 2.25em;
  font-weight: bold;
  color: #8d0700;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

首先：您的owlCarousel对象在文档DOM函数之外。