Question

I am trying to implement Lighbox effect on click of a Image using below code

        document.addEventListener('click',function(){
        var target = event.target || event.srcElement;
        if(target.className == "acv"){
            var id = target.id, src= target.src, 
            type = target.nodeName, imgW, imgH,
            temp = document.createElement('div'),
            sHeight = screen.availHeight,    
            sWidth = screen.availWidth,
            st = temp.style;
            var img = new Image();
            img.onload = function(){
                imgW = this.width;
                imgH = this.height;
            }
            img.src = src;
            var imgH = ( sHeight >= imgH + 20 ? imgH : (sHeight - 20) );
            var imgW =  ( sWidth >= imgW + 20 ? imgW : (sWidth - 20) );
            img.style.height = imgH;
            img.style.width = imgW;
            img.style.position = "relative";
            img.style.left = ( (sWidth - imgW) / 2 ) + "px";
            img.style.top = ( (sHeight - imgH) / 2 ) + "px";
            temp.appendChild(img);
            temp.id = "lightbox";
            st.width = sWidth + "px";
            st.height = sHeight + "px";
            st.backgroundColor = "Gray";
            st.zIndex = 123;
            st.position = "absolute";
            st.top = st.left = 0;
            st.margin = "0 auto";
            document.body.appendChild(temp);
        }
    });​

Please check the working fiddle here.

And I feel like I have done something wrong in this. Please correct and help me to improve the code.

Answer 1

Seems, if image already loaded onload event not fires, also it is mistake to try to use ImgW and ImgH initialised in event body to use outside of scope of event handler, at least, you shold also “fix” img in event handler, so far here the code which work fine for the fiddle:

document.addEventListener('click', function() {
    var target = event.target || event.srcElement;
    if (target.className == "acv") {
        //     debugger;
        var id = target.id,
            src = target.src,
            type = target.nodeName,
            imgW, imgH, temp = document.createElement('div'),
            sHeight = screen.availHeight,
            sWidth = screen.availWidth,
            st = temp.style;
        var img = new Image();
        img.src = src + '?rand=' + Math.random();
        //HIDE before we sure that image loaded!
        img.style.display = "none";
        var pos_img = function(img) {
            var imgH = img.height,
                imgW = img.width;
            imgH = (sHeight >= imgH + 20 ? imgH : (sHeight - 20));
            imgW = (sWidth >= imgW + 20 ? imgW : (sWidth - 20));
            img.style.height = imgH;
            img.style.width = imgW;
            img.style.position = "relative";
            img.style.left = ((sWidth - imgW) / 2) + "px";
            img.style.top = ((sHeight - imgH) / 2) + "px";
            //SHOW IMAGE BACK
            img.style.display = "block";
        };
        //image not loaded?
        if (img.complete === false) {
            img.addEventListener('load', function(e) {
                console.log("LOAD", e, img);
                //TODO remove EventListener ?
                pos_img(img);
            });
        } else {

            pos_img(img);
        }
        temp.appendChild(img);
        temp.id = "lightbox";
        st.width = sWidth + "px";
        st.height = sHeight + "px";
        st.backgroundColor = "Gray";
        st.zIndex = 123;
        st.position = "absolute";
        st.top = st.left = 0;
        st.margin = "0 auto";
        document.body.appendChild(temp);

    }
});​

also i would to use window width/height for calculate positions.

please note that the code above not give you production code, it is just to show where is logic mistake.
you may be not ask the question if try to click on jslint button