Question

所以我正在我的投资组合网站上工作，我想用Masonry来布局我的工作图像和Magnific用于我的灯箱。我遇到的麻烦是我只能让一个或另一个工作。我90％肯定这是我正在制作的一些非常简单的命名/语法错误，但我不太了解编程以便自己解决它。

以上链接有砌体工作，但没有Magnific ....任何帮助将不胜感激。

JQ

$(document).ready(function () {
     function masonry() {
         //masonry
         var container = document.querySelector('.masonry');
         var msnry = new Masonry(container, {
             itemSelector: '.item',
             columnWidth: '.item',
             isFitWidth: true
         });
     };

     masonry();

     $('.popup-gallery').magnificPopup({
         delegate: 'a',
         type: ' image',
         closeOnContentClick: true,
         showCloseBtn: true,
     });
 });

 $('.child').each(function () {
     $(this).magnificPopup({
         delegate: '.image-link',
         type: 'image',
         gallery: {
             enabled: true
         }
     });
 });

HTML

            <img src="images//preggers_240.jpg" width="240" height="165">
        </div>
    </div>
</div>
<div class="item">
    <img src="images/PRObroch_240.jpg" width="240" height="180">
</div>
<div class="item">
    <img src="images/SA_Ad1_240.jpg" width="240" height="298">
</div>
<div class="item">
    <img src="images/asskick_240.jpg" width="240" height="160">
</div>
<div class="item">
    <img src="images/yowie_240.jpg" width="240" height="310">
</div>
<div class="item">
    <img src="images/202A0389_240.jpg" width="240" height="160" alt="" />
</div>
<div class="item">
    <img src="images/202A8355_240.jpg" width="240" height="160" alt="" />
</div>
<div class="item">
    <img src="images/202A9385_240.jpg" width="240" height="160" alt="" />
</div>
<div class="item">
    <img src="images/8583068635_8abc5248d1_o_240.jpg" width="240" height="360" alt="" />
</div>
<div class="item">
    <img src="images/derm_PC_240.jpg" width="240" height="180" alt="" />
</div>
<div class="item">
    <img src="images/FDFC_BCS_240.jpg" width="240" height="240" alt="" />
</div>
<div class="item">
    <img src="images/home_240.png" width="240" height="230" alt="" />
</div>
<div class="item">
    <img src="images/IMG_1883_240.jpg" width="240" height="160" alt="" />
</div>
<div class="item">
    <img src="images/NB_banners_240.jpg" width="240" height="360" alt="" />
</div>
<div class="item">
    <img src="images/promo_july_240.jpg" width="240" height="297" alt="" />
</div>
<div class="item">
    <img src="images/promo_freight_240.jpg" width="240" height="125" alt="" />
</div>
<div class="item">
    <img src="images/SA-2828_240.jpg" width="240" height="386" alt="" />
</div>
<div class="item">
    <img src="images/SA_Ad1_240.jpg" width="240" height="298" alt="" />
</div>
<div class="item">
    <img src="/images/skills_home_240.jpg" width="240" height="240" alt="" />
</div>
<div class="item">
    <img src="/images/summer_savings_240.jpg" width="240" height="243" alt="" />
</div>
<div class="item">
    <img src="images/usb_key_case_240.jpg" width="240" height="161" alt="" />
</div>

Answer 1

所以我想出了我的问题......

通过添加另一个div类来分隔我的弹出库和我的砌体项目，它们都可以正常工作。

无法使Magnific和Masonry一起工作

1 个答案: