javascript - Tumblr jQuery - 代码不执行(不是 Masonry/Infinite scroll)

Question

所以，我正在帮助一个 friend 为她的 tumblr 开发一个主题。正如每个合理的 Web 开发人员都会做的那样，我首先在我的硬盘驱动器上本地开发它，放入填充图像。在我的本地副本上，一切正常。当我将它移植到 tumblr 主题时，部分 jQuery 代码停止运行。

我正在使用 jQuery 2.0.3，MixItUp 可以正常工作，并且我编写了一个类似灯箱的函数。

这里有问题:

jQuery/javascript

        $(window).load(function() {
                $('.mix').on('click', function() {
                    var source = $(this).find('img').attr('src');
                    var image = $('<img src='+source+'>');
                    $('.overlay').children().remove();
                    $('.overlay').append(image);
                    $('.overlay').find('img').load(function() {
                        var overlayWidth = $('.overlay').width();
                        var overlayHeight = $('.overlay').height();
                        var overlayWPadding = overlayWidth - 40;
                        var imageWidth = $('.overlay').find('img').width();
                        var imageHeight = $('.overlay').find('img').height();
                        if (imageWidth > overlayWidth) {
                            var ratio = imageWidth / imageHeight;
                            var adjustedHeight = overlayWPadding / ratio;
                            var marginValue = (overlayHeight - adjustedHeight) / 2;
                            var marginTop = marginValue + "px";
                            $('.overlay').find('img').width(overlayWPadding);
                            $('.overlay').find('img').height(adjustedHeight);
                            $('.overlay').find('img').css('margin', ''+marginTop+' auto');
                        }
                    });
                    $('.overlay').css({'left': '200px', 'display': 'none'}).fadeIn(1000);
                });
                $('.overlay').on('click', function() {
                    $(this).fadeOut(500);
                });
        });

它影响的 HTML:

    <div id="Grid">
        <div class="mix">
          <img src="img/02.jpg" />
        </div>
        ...
    </div>

它各自的 tumblr 代码:

    <div id="Grid">

    {block:Posts}
    <div class="mix" id="{PostID}">
        {block:Photo}
                <img src="{PhotoURL-HighRes}" />
        {/block:Photo}
    </div>
    {/block:Posts}

</div>

问题是单击图像时该函数不会添加 .overlay div。就像我说的，当我在本地编码时它工作正常，但当我将它加载到 tumblr 时，它不起作用。出了什么问题，我该如何解决？

我认为 CSS 不是问题，但我会提供任何请求的 CSS。

编辑:

Answer 1

问题是因为没有像 <div class="overlay"></div> 这样的 div在给定的 Tumblr 页面中。

当我添加以下代码时，灯箱工作正常。

<div class="overlay"></div>