Javascript Tumblr jQuery-代码未执行（非砌体/无限滚动）

所以，我帮一个朋友为她的tumblr设计了一个主题。正如每一个合理的web开发人员所做的那样，我首先在我的硬盘上本地开发了它，并加入了填充图片。在我的本地副本上，一切正常。当我将它移植到tumblr主题时，jQuery代码的一部分停止工作

我使用的是jQuery2.0.3，可以使用MixItUp和我编写的lightbox风格的函数

这里有一点值得商榷：

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

$（窗口）.load（函数（）{
$（'.mix'）。在（'click'，function（）上{
var source=$（this.find（'img'）.attr（'src'）；
变量图像=$（''）；
$（'.overlay'）.children（）.remove（）；
$（'.overlay'）.append（图像）；
$（'.overlay'）.find（'img'）.load（函数（）{
var overlayWidth=$（'.overlay'）.width（）；
var overlayHeight=$（'.overlay'）.height（）；
var OverlawPadding=OverlawWidth-40；
var imageWidth=$（'.overlay'）.find（'img'）.width（）；
var imageHeight=$（'.overlay'）.find（'img'）.height（）；
如果（图像宽度>覆盖宽度）{
var比率=图像宽度/图像高度；
var调整高度=重叠填充/比率；
var marginValue=（超高-调整高度）/2；
var marginTop=marginValue+“px”；
$（'.overlay'）.find（'img'）.width（overlayWPadding）；
$（'.overlay'）。查找（'img'）。高度（调整后的高度）；
$（'.overlay'）.find（'img'）.css（'margin'，''+marginTop+'auto'）；
}
});
$（'.overlay'）.css（{'left'：'200px'，'display'：'none'}）.fadeIn（1000）；
});
$（'.overlay'）。在（'click'，function（）上{
美元（本）。淡出（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>

{block:Posts}
{块：照片}
{/block:Photo}
{/block:Posts}

问题是，当单击图像时，函数没有添加.overlay div。正如我所说，当我在本地编码它时，它工作得很好，但是当我将它加载到tumblr中时，它就不工作了。出了什么问题，我该如何解决

我不认为CSS是个问题，但我会提供任何需要的CSS

---

编辑：

这个问题是因为在给定的Tumblr页面中没有类似于

的div

当我添加以下代码时，lightbox工作正常

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

请在声明变量映像后立即尝试使用createElement（）或appendTo（）作为div.overlay。

控制台中有错误吗？您能显示链接吗？@Surjith控制台中没有错误。链接：函数的哪一行应该添加div.overlay？我在该页面中找不到名为

.overlay

的div。在加载脚本之前，您应该将div.overlay添加为html，或者在jquery脚本中添加一行来添加div.overlay。您正在设置div.overlay，但ir不存在。有时会发生这种情况。不用担心。：-）谢谢我想提高这个，但我还没有足够的声誉。对不起，我不能很好地编码，因为我在手机上。但是，如果在单击div.overlay后将其销毁，并且需要在不重新加载页面的情况下再次添加该div，则此解决方案应该会更好。实际上，当单击div.overlay时，它只是隐藏的，因为我使用了fadeOut（）。不过你说得很对。