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>
小提琴根本就沒有工作......你還沒有在裏面加入'jquery'庫文件,加上圖像也不見了......更新小提琴和你會有一個肯定的答案! :D – NoobEditor
謝謝你,第一次使用jsfiddle *驚喜!* – cn283
我意識到在發表我的評論後,道歉爲...歡迎來到SO :) – NoobEditor