添加javascript的帖子

我不知道任何關於Javascript。我在Wordpress中使用Ignite主題。我試圖在我的網站添加一個燈箱畫廊： http://dimsemenov.com/plugins/magnific-popup/>「Zoom-gallery」示例添加javascript的帖子

所以我把html代碼放在post.css.css中的CSS中，但我不知道我必須在哪裏把JavaScript。我試圖在content-page.php，content.php，header.php或footer.php裏面（在腳本標籤之間）通過它，但它不起作用。

HTML

<div class="zoom-gallery"> 
    <a href="http://farm4.staticflickr.com/3763/9204547649_0472680945_o.jpg" data-source="http://500px.com/photo/32736307" title="Into The Blue" style="width:193px;height:125px;"> 
     <img src="http://farm4.staticflickr.com/3763/9204547649_7de96ee188_t.jpg" width="193" height="125"> 
    </a> 
    <a href="http://farm3.staticflickr.com/2856/9207329420_7f2a668b06_o.jpg" data-source="http://500px.com/photo/32554131" title="Light Sabre" style="width:82px;height:125px;"> 
     <img src="http://farm3.staticflickr.com/2856/9207329420_e485948b01_t.jpg" width="82px" height="125"> 
    </a> 
</div>

CSS

.image-source-link { 
    color: #98C3D1; 
} 

.mfp-with-zoom .mfp-container, 
.mfp-with-zoom.mfp-bg { 
    opacity: 0; 
    -webkit-backface-visibility: hidden; 
    -webkit-transition: all 0.3s ease-out; 
    -moz-transition: all 0.3s ease-out; 
    -o-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out; 
} 

.mfp-with-zoom.mfp-ready .mfp-container { 
     opacity: 1; 
} 
.mfp-with-zoom.mfp-ready.mfp-bg { 
     opacity: 0.8; 
} 

.mfp-with-zoom.mfp-removing .mfp-container, 
.mfp-with-zoom.mfp-removing.mfp-bg { 
    opacity: 0; 
}

JAVASCRIPT

$(document).ready(function() { 
    $('.zoom-gallery').magnificPopup({ 
     delegate: 'a', 
     type: 'image', 
     closeOnContentClick: false, 
     closeBtnInside: false, 
     mainClass: 'mfp-with-zoom mfp-img-mobile', 
     image: { 
      verticalFit: true, 
      titleSrc: function(item) { 
       return item.el.attr('title') + ' &middot; <a class="image-source-link" href="'+item.el.attr('data-source')+'" target="_blank">image source</a>'; 
      } 
     }, 
     gallery: { 
      enabled: true 
     }, 
     zoom: { 
      enabled: true, 
      duration: 300, // don't foget to change the duration also in CSS 
      opener: function(element) { 
       return element.find('img'); 
      } 
     } 

    }); 
});

來源

2015-08-29 edou777

添加javascript的帖子

回答

相關問題