Question

I am trying to get the jQuery Tools overlay to work. The problem is it only loads some kind of ASCII.

I use jQuery Tools v1.2.5 and it runs on a Resin Web Server. What could be wrong?

The webserver responds with image/jpeg; but could there be anything wrong with the XMLHttpRequest?

$('.overlay-trigger').each(function(i) {

        $(this).overlay({
            top: '10%',
            left: 'center',
            oneInstance: true,
            closeOnClick: true,
            onBeforeLoad: function() {
                var wrapper = this.getOverlay().find(".content-wrapper");
                console.log(wrapper);
                var contentRef = this.getTrigger().attr("href");
                var $content = $(contentRef + " > *");

                if ($content.length > 0) {
                    // Load from DOM tree
                    wrapper.html($content.clone())
                }
                else {
                    // Load data from HTTP request/response
                    console.log("LOADING IMAGE");
                    wrapper.load(contentRef);
                }
            },
            onLoad: function() {
                console.log("onLoad");
                var targetOverlay = this.getTrigger().attr("rel");

                // If local controllers exist, append them to the target overlay controller.
                if ($("#local-overlay-controllers > *")) {
                    $("#local-overlay-controllers > *").appendTo(targetOverlay + " > .overlay-controllers");
                }

                $(targetOverlay + " .overlay-confirm").click(function() {
                    $(".overlay-trigger:eq(" + i + ")").overlay().close();
                });

                $(targetOverlay + " .close-overlay").click(function() {
                    // If we have multiple overlay triggers on the same page sharing the
                    // same #overlay, we must make sure we close the one with the correct reference.
                    $(".overlay-trigger:eq(" + i + ")").overlay().close();
                });
            },
            onClose: function() {

                console.log("onClose");
                // Make sure we remove all content from the overlay controllers in case we reuse it.
                //var targetOverlay = this.getTrigger().attr("rel");
                //$(targetOverlay + " > .content-wrapper, #overlay > .overlay-controllers").empty();
            }
        });
    })

Answer 1

I found the answer.
The image data was written directly to the div, there wasn’t an img tag. It worked fine once I got an Img-tag in place.