为帖子添加javascript

我对Javascript一无所知。我在Wordpress中使用Ignite主题。我试图在我的网站中添加lightbox图库： >“缩放库”示例

所以我把html代码放在帖子里，CSS放在style.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>

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

    });
});

$（文档）.ready（函数（）{
$（'.zoom gallery'）。放大弹出窗口({
代表：“a”，
键入：“图像”，
closeOnContentClick:false，
closebtnside:false，
mainClass:“带缩放功能的mfp mfp img mobile”，
图片：{
垂直拟合：正确，
标题RC：功能（项目）{
返回项.el.attr（'title'）+'·；'；
}
},
画廊：{
已启用：true
},
缩放：{
启用：对，
持续时间：300，//不要忘记更改CSS中的持续时间
开启器：函数（元素）{
返回元素。find（'img'）；
}
}
});
});

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

没关系，我刚刚安装了Notpad++，现在它可以工作了。那么，我必须在标记之间添加脚本还是在test.js文件中单独添加脚本？我也不明白：“把它包含在同一目录下名为index.php的文件中”不，你不需要。只需将ready函数放入js文件中，保存它，并使用script标记将其包含到index.php中。它不起作用。我可能做错了什么。我在js文件夹中创建了一个js文件，放入javascript，保存它。然后找到“Ignite”文件夹中的index.php，将脚本放在文件末尾的脚本标记之间并保存it@edou777确保js文件已成功包含。在chrome开放开发控制台中查找404错误。或者查找页面源代码。好的，这是我在您的第一个答案中没有得到的。在index.php中“包含”js文件是什么意思？？我所做的只是通过index.php文件末尾的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');
            }
        }

    });
});