2014-03-05 405 views
1

Demo Fiddle無法Magnific酒店做和砌磚共同努力

所以我的工作我的投資組合的網站,我想用磚石佈局我的工作和圖像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> 

+0

小提琴根本就沒有工作......你還沒有在裏面加入'jquery'庫文件,加上圖像也不見了......更新小提琴和你會有一個肯定的答案! :D – NoobEditor

+0

謝謝你,第一次使用jsfiddle *驚喜!* – cn283

+0

我意識到在發表我的評論後,道歉爲...歡迎來到SO :) – NoobEditor

回答

0

所以我想通了,我的問題......

通過增加另一個DIV類分開我的彈出式圖庫和我的磚石項目,兩者都被正確地一起工作。