Tumblr jQuery - code not executing (NOT Masonry / Infinite scroll)

Question

So, I was helping a friend develop a theme for her tumblr. As every reasonable web dev would do, I first developed it locally on my harddrive, putting in filler images. On my local copy, everything works fine. When I port it to a tumblr theme, a portion of the jQuery code ceases to function.

I'm using jQuery 2.0.3, and have MixItUp working, and a lightbox-esque function I wrote.

Here's the bit in question:

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

The HTML it affects:

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

The respective tumblr code for it:

    <div id="Grid">

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

</div>

The problem is that the function doesn't add the .overlay div when an image is clicked. Like I said, this works fine when I coded it locally, but when I load this into tumblr, it doesn't work. What's wrong and how do I fix it?

I don't think the CSS is the problem, but I'll put up any requested CSS.

Edit:

Answer 1

The issue is because there is no div like <div class="overlay"></div> in the given Tumblr page.

The lightbox is working fine when I added the below code.

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

Answer 2

在声明var image之后，尝试在div.overlay上使用createElement（）或appendTo（）。