jQuery failed to load the given url
<p>Hi I am trying to create a jQuery lightbox and while doing this I was trying to create a image with jQuery and append it to the dom i got an error thats shown in firebug : Failed to load the give URL.</p>

<p>I've checked double checked and triple checked the url of the image is corect furthermore i'm using phpstorm as my IDE and it highliths my code if the path dosent exist.This is my jQuery code:</p>

<pre><code>$('&lt;div&gt;&lt;/div&gt;').addClass('bg-lightbox')
                   .fadeIn(1000, function(){
                        var width = $(window).width() / 2 - ($('div.lightbox').width() / 2);
                        var height = $(window).height()/2 - ($('div.lightbox').height() / 2);
           console.log(width);

                        $('&lt;div&gt;&lt;/div&gt;').addClass('lightbox')
                                        .css({
                                            'left':width,
                                            'top':height

                                        })
                                        .animate({
                                            'width':'+=600px',
                                            'height':'+=400px',
                                            'left':'-=300px',
                                            'top':'-=200px'
                                         }, 'slow' , 'easeInQuad')
                                        .appendTo('body');
                        $('&lt;div&gt;&lt;/div&gt;').addClass('exit')
                                        .appendTo('div.lightbox');
                        console.log('Image Start');
                        $('&lt;img src="../img/X.png" alt="Close"&gt;').addClass('x')
                                                                          .fadeIn(1000,function(){
                                                                            console.log('Its done');
                                                                          })
                                                                          .appendTo('div.exit');
                    })
                   .appendTo('body');
});
</code></pre>

<p>And this is the css that styles it:</p>

<pre><code>    div.bg-lightbox{
    width:100%;
    height:100%;
    opacity: 0.7;
    background-color: black;
    position: absolute;
    top:0;
    left:0;
    z-index: 300;
}
div.lightbox{
    width: 5%;
    height: 5%;
    position: absolute;
    top:0;
    left: 0;
    z-index: 400;
    border-radius: 5px;
    background-color: #DFE2E8;
    border:3px solid #677EA1;
}

    div.exit{
        width:5%;
        height: 6%;
        position: absolute;
        top:-15px;
        right:-15px;
        z-index: 500;
        border-radius: 5px;
        background-color: #DFE2E8;
        border:3px solid #677EA1;

    }
        img.x{
            position: absolute;
            top:0;
            left:0;
            z-index: 600;
        }
</code></pre>

<p>It's probably a beginner mistake.Thanx in advance!</p>

<p><strong>EDIT</strong>:Also it seems that the lightbox loads extremly slow in chrome oposed to firefox those anyone has an answey why this hapens?</p>
