Click on the image to enlarge realize js pop-up effect

<div class="listBody" id="banner">
　　<div class="pic" >
   　　<a href="#" style="display:block"><img alt="" style="height: 175px;width: 100%;" src="${ctxStatic}/images/1_1.png" /></a>
   　　<a href="#"><img alt="" style="height: 175px;width: 100%;" src="${ctxStatic}/images/1_2.jpg" /></a>
　　</div>
　　<div class="btn">
   　　<ul>
      　　<li class="one">1</li>
      　　<li>2</li>
   　　</ul>
   </div>
   <div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
       <div id="innerdiv" style="position:absolute;">
           <img id="bigimg" style="border:5px solid #fff;" src="" />
       </div>
   </div>
</div>




    $ ( "#Banner A"). The each ( function () {// div for the carousel in view of the need to traverse out to bind click event
        $ ( The this ) .click ( function () {
             var _this = the this .firstChild; // the current pimg element as a function of its argument is passed _this img tag 
            imgShow ( "# outerdiv", " #innerdiv", " #bigimg " , _this);
        })
    })
    function imgShow (outerdiv, innerdiv, bigimg, _this) { 
         var src = _this.src; // Get pimg src attribute element in the current click 
        $ (bigimg) .attr ( "src", src); // set #bigimg src attribute of the element 
          / * get the real size of the current clickable image, and displays pop-up layer and enlarge * / 
        $ ( "<img />"). attr ( "src", src) .load ( function () { 
           var windowW $ = (window) .width (); // get the current window width 
          var windowH = $ (window) .height (); // get the current window height 
          var realWidth = the this .width; // get the real picture width 
          var realHeight = the this .height;// Get the real image height 
          var imgWidth, imgHeight; 
           var Scale = 0.9; // scaling size, the real image when the scaling width and height greater than the width and height of the window 
          IF (realHeight> windowH * Scale) { // Analyzing image height 
            imgHeight windowH * scale =; // such as larger than the window height, the height of the image to zoom
            imgWidth = imgHeight / realHeight * realWidth; // scaling width 
            IF (imgWidth> windowW * Scale) { // The throw is greater than the width of the window width 
              imgWidth = windowW * Scale; // re-scaling width 
            }
          } The else  IF (realWidth> windowW * Scale) { // The suitable height of the image, the image width determines 
            imgWidth = windowW * Scale; // such as larger than the window width, the width of the scaled image
                  imgHeight = imgWidth / realWidth * realHeight; // scaling height 
          } The else { // If the real image height and width to meet the requirements, the aspect unchanged 
            imgWidth = realWidth;
            imgHeight = realHeight; 
          } 
              $ (bigimg) .css ( "width", imgWidth); // final width of the image scaling 
          var W = (windowW-imgWidth) / 2; // calculated from the image and the left window 
           var H = (windowH-imgHeight) / 2; // calculate the margin on the picture window
          $ (innerdiv) .css ({ "top": H, "left": W}); // Set top and left attributes #innerdiv 
          $ (outerdiv) .fadeIn ( "FAST"); // fade display #outerdiv and .pimg 
        });
        $ (outerdiv) .click ( function () { // click on the pop-up layer fade disappear again 
          $ ( the this ) .fadeOut ( "the FAST" );
        }); 
      }