IMG has 0x0 pixels when src added with jQuery

Question

I was making custom modal popup(#light1). In my JavaScript I take src from the image I clicked on and add it to img tag with id addable.

jQuery

var images=$('#raam img'), index=0
$(images).click(function() {
    var src= $(images.eq(index)).attr('src');
    $("#addable").attr('src', src)
    $('#light1').css("display","block")
});

And HTML

<div id="raam">                
    <img id="pilt1" src="uudistepildid/1.jpg" alt="1">
    <div id="light1" class="wcontent">
        <img id="addable">
    </div>
</div>

and CSS

#addable { 
    width: 600px;
    height: 600px; //even forcing doesn't help
}

This all works fine. When I inspect it shows me the right src and sytle with width and height, but it has size 0x0 and I can't change it. It even tells me its natural size. I leave snapshot with the problem.

This is what inspector shows:

This is what it looks like( I took out some unnessesay code, just to make it faster to read);

Answer 1

wow! It seems that you seem to have installed adblock plus ,close it. Because your image id name matches its elimination rule "ad***," it considers this to be an advertisement, so it shields your image.

Answer 2

Your image uses the styles you applied to #raam img which sets the image to visibility:hidden. When you do display:block to show it, it's there physically (I mean you can access it's properties but it's not visible). In order to have it show on screen, you need to set it's visibility to visible.