Click on the image to enlarge html achieve functional

<html>
    <head>
        <style>
            .over {position: fixed; left:0; top:0; width:100%; z-index:100;}
            .tempContainer {position:fixed; width:100%; margin-right:0px; margin-left:0px;align = left-text : Center ; Z-index : 101 ; } 
        </ style > 
        < Script the src = "http://code.jquery.com/jquery-1.8.0.min.js" > </ Script > 
    </ head > 
    < body > 
        < div class = "over" > </ div > <-! background layer -> 
        < div class = "logoImg amplifyImg" > <-! Note: amlifyImg essential here -> 
            <img src="test.jpg"/><! - here the path is introduced image -> 
        </ div > 
        < Script > 
            $ (Document) .ready ( function () {
                 var imgsObj = $ ( ' .amplifyImg IMG ' ); // need to enlarge the image 
                IF (imgsObj) { 
                    $ .each (imgsObj, function () { 
                        $ ( the this ) .click ( function () {
                             var currImg = $ ( the this ); 
                            coverLayer ( . 1);
                             Var tempContainer = $ ( ' <div class = tempContainer> </ div> ' ); // Image vessel 
                            with (tempContainer) { // width method is equivalent to $ (the this) 
                                the appendTo ( " body " );
                                 var windowWidth = $ (window) .width ();
                                 var windowHeight = $ (window) .height ();
                                 // get image original width, height 
                                var orignImg =  new new Image ();
                                orignImg.src = currImg.attr ( " the src " );
                                 var currImgWidth = orignImg.width;
                                 var currImgHeight = orignImg.height;
                                 IF (currImgWidth < windowWidth) { // To make pictures without distortion, when a small time width of the image, reserved picture 
                                    IF (currImgHeight < windowHeight) {
                                         var topHeight = (windowHeight - currImgHeight) / 2; 
                                        IF(topHeight > 35 ) { / * Here In order to image the entire height centered on the phone screen: because there are micro-channels android, ios navigation of a title, title navigation height 35 * / 
                                            topHeight = topHeight - 35 ; 
                                            CSS ( ' Top ' , topHeight); 
                                        } the else { 
                                            CSS ( ' Top ' , 0 ); 
                                        } 
                                        HTML ( ' <IMG border = 0 the src =' + currImg.attr('src') + '>');
                                    }else{
                                        css('top',0);
                                        html('<img border=0 src=' + currImg.attr('src') + ' height='+windowHeight+'>');
                                    }
                                }else{
                                    var currImgChangeHeight=(currImgHeight*windowWidth)/currImgWidth;
                                    if(currImgChangeHeight<windowHeight){
                                        var topHeight=(windowHeight-currImgChangeHeight)/2;
                                        if(topHeight>35){
                                            topHeight=topHeight-35;
                                            css('top',topHeight);
                                        }else{
                                            css('top',0);
                                        }
                                        html('<img border=0 src=' + currImg.attr('src') + ' width='+windowWidth+';>');
                                    }else{
                                        css('top',0);
                                        html('<img border=0 src=' + currImg.attr('src') + ' width='+windowWidth+'; height='+windowHeight+'>');
                                    }
                                }
                            }
                            tempContainer.click(function () { 
                                $ ( the this ) .remove (); 
                                coverLayer ( 0 ); 
                            }); 
                        }); 
                    }); 
                } 
                the else {
                     return  to false ; 
                } 
                // used to disable the effect of the mask layer 
                function coverLayer (Tag) {
                     with ($ ( ' .over ' )) {
                         IF (Tag == . 1 ) { 
                            CSS ('height' , $ (Document) .height ());
                            css('display','block');
                            css('opacity',1);
                            css("background-color","#FFFFFF");
                            css("background-color","rgba(0,0,0,0.7)" );  {the else                        }
                        mask layer transparency//
'
                            CSS (display','none');
                        }
                    }
                }
            });
        </script>
    </body>
</html>
Click on the image to enlarge html achieve functional

Guess you like
