Front-end jquery Implementation Click on the picture to pop the large layer (and scroll the mouse wheel picture zoom)

<div id= "BG" ></div><div id= "show{$i}" class= "Show" style= "Display:none;" >
</div> <script type=" Text/javascript "> Funct                Ion Loserbtn (mid) {var msg= $ ("#loserinfo option:selected"). Text ();                var url= "{: U ('/admin/merchant/loserbtn ')}";                url=url+ '? mid= ' +mid+ ' &msg= ' +msg;        Window.location=url;            }//Picture pop-up layer displays the original size JS function Showdiv (i) {document.getElementById ("bg"). Style.display = "block";      document.getElementById ("Show" +i). Style.display = "block";          } function Hidediv (i) {document.getElementById ("bg"). Style.display = ' None ';      document.getElementById ("Show" +i). Style.display = ' None '; }//Picture zoom in JS function bbimg (o) {var zoom=parseint (o.style.zoom, 10) | |               100;zoom+=event.wheeldelta/12;if (zoom>0) o.style.zoom=zoom+ '% '; ReTurn false; }</script><style type= "Text/css" > #bg {display:none; position:absolute; top:0%; left:0%; width:10 0%; height:100%; Background-color:black; z-index:1001; -moz-opacity:0.7; opacity:.70;          Filter:alpha (opacity=70);} Show{display:none, Position:absolute, top:10%, left:10%, width:80%, height:80%, padding:8px, border:8px solid #E8 E9f7; Background-color:white; z-index:1002; Overflow:auto;} </style>

　

<div class= "Am-container lose" > <div class= "am-g" > <?php if (!empty ($result [' image '])) {?> <div class= "am-u-sm-12" style= "text-align:center; Border-bottom: #CCC 1px solid; width:90%; margin-left:5% "> <div class=" am-slider am-slider-default "Data-am-flexslider><ul class=" am-slide S "> <?php foreach ($result [' image '] as $value) {?> <li style=" ">

 "/>//Small picture display area

</li> <?php}?> </ul> </div> &lt ;/div> <?php}?> </div> <!--Click on the image to enlarge the area--<div id= "BG" ;</div> <div id= "show" class= "Show" style= "Display:none;" >  </div> <style type=" Text/css "> #bg {display:none; position:absolute ; top:0%; left:0%; width:100%; height:100%; Background-color:black; z-index:1001; -moz-opacity:0.7;
opacity:.70;          Filter:alpha (opacity=70);} Show{display:none, Position:absolute, top:10%, left:0%, border:8px solid #E8E9F7; background-color:white; z-index:1 002; Overflow:auto;}          </style> <script>//Picture pop-up layer displays the original size JS function showdiv (obj) {var src=$ (obj). attr ("src");          $ ('. Get_src '). attr ("src", SRC);          document.getElementById ("BG"). Style.display = "block";      document.getElementById ("Show"). Style.display = "block";           } function Hidediv () {document.getElementById ("bg"). Style.display = ' None ';      document.getElementById ("Show"). Style.display = ' None '; }//Picture zoomed-in JS (invalid mobile) function bbimg (o) {var zoom=parseint (o.style.zoom, 10) | |                100;zoom+=event.wheeldelta/12;if (zoom>0) o.style.zoom=zoom+ '% ';       return false; } </script>

　　

　

Front-end jquery Implementation Click on the picture to pop the large layer (and scroll the mouse wheel picture zoom)