How manipulate DOM elements after window.open("_self")

Question

I want dynamically load a full screen image by clicking on it (normal size).

So I have

CSS

.full-image {
    max-width: 100%;
    max-height: 100%;
    bottom: 0;
    left: 0;
    margin: auto;
    overflow: auto;
    position: fixed;
    right: 0;
    top: 0;
}

JS

$(document).ready(function() {
    $('img').on("click", function() {
        var img = $(this);
        var myWindow = window.open("img.html");
        var src = img.attr('src');
        var document1 = myWindow.document;
        $(myWindow.document).ready(function() {
            alert();
            $(myWindow.document).contents().find('#image').attr('src', src);
        });
    });
});

I tried this answered question`in each variant but the best result I achieve is in the pasted javascript code: new window is opened and only after pressing the alert, image is loaded ONLY in the new window.

I would the image loaded in the same window, but obv adding "_self" doesn't work.

The new html page is like this <img id = "image" class = "full-image"/>

Thanks.

I don't understand your question. The image should already be loaded in your window. What exactly is supposed to happen to the image? — Sebastian Nette, Jul 04 '15 at 19:09
If you want it in same window than just simple [do it this way](http://jsfiddle.net/z3p9wz32/1/). — skobaljic, Jul 04 '15 at 21:43

score 0 · Accepted Answer · answered Jul 04 '15 at 21:13

I think I know what you're asking for. Here's one solution.

Wrap the image in a normal a tag. Set the href to be /img.html?src=x, where x is the img src.

On img.html, have some Javascript to get the value from the URL (there's a method for doing that on Stack), and then set the img src on that page to that value.

JsFiddle isn't ideal, 'cos its a single-page thing, but I've tried to show you how it would work here. The selectors will need slight adjustment.

How manipulate DOM elements after window.open("_self")

1 Answers1