Question

我对Javascript一无所知。我在Wordpress中使用Ignite主题。我尝试在我的网站中添加一个灯箱库： http://dimsemenov.com/plugins/magnific-popup/＆gt; ＆＃34;缩放图库＆＃34;示例

所以我把html代码放在了post.css中的CSS中，但我不知道在哪里放javascript。我试图在content-page.php，content.php，header.php或footer.php中通过它（在脚本标记之间），但它没有用。

HTML

.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;
}

CSS

$(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');
            }
        }

    });
});

JAVASCRIPT

{{1}}

Answer 1

查找实际的主题文件夹。应该有一个名为“js”的文件夹，如果没有它将这个脚本放入该“js”文件夹中的某个js文件中，并将其包含在同一目录中名为index.php的文件中。

为帖子添加javascript

1 个答案: