View large image feature code jquery version _jquery

Copy Code code as follows:

/* View Large Map * *
var screenheight = $ (window). Height ();
var screenwidth = $ (window). width ();
var loadcss = function () {
var screenwidth = $ (window). width ();
var screenheight = $ (window). Height ();
$ ("Div.lookbigpicture"). CSS ({"Left": screenwidth*0.2, "Top": screenheight*0.15+$ (document). ScrollTop (),
"width": screenwidth*0.6, "height": screenheight*0.7});
$ ("img.bigimg"). CSS ({"Max-width":(screenwidth*0.6-30), "Max-height": screenheight*0.7-40});
$ ("img.bigimg"). Load (function () {
$ ("img.bigimg"). CSS ("Top", (Screenheight*0.7-30-$ ("img.bigimg"). Height ()) *0.5 + 30);
});
$ ("img.bigimg"). CSS ("Top", (Screenheight*0.7-30-$ ("img.bigimg"). Height ()) *0.5 + 30);
$.log ("$ (document). Height ():" +$ (document). Height ());
};
$ ("A#bigpic"). Click (function () {
$.log ("ScreenHeight:" +screenheight+ "ScreenWidth:" +screenwidth);
str = $ ("img[img-size]"). attr ("src");
$ ("Body"). Append ("<div class= ' grey ' ></div>");//Gray Bottom
$ ("Body"). Append ("<div class= ' lookbigpicture ' ><span class= ' protopic '" ><a z-index= ' 20001 ' target= ') _ Blank ' href= ' "+str+" ' > View original </a></span><a href= ' javascript:; ' class= ' bigpicclose ' title= ' close ' >x </a></div> ');
$ ("Div.grey"). CSS ("height", $ (document). Height ());
Loadcss ();
$ ("Body"). CSS ({overflow: "hidden"}); Disable scroll bars
});
$ ("Body"). Delegate ("Div.grey,a.bigpicclose", "click", Function () {
$ ("Body"). CSS ({overflow: "visible"}); Redo scroll Bar
$ ("Div.lookbigpicture"). Remove ();
$ ("Div.grey"). Remove ();
});
When the browser window size changes
$ (window). Resize (function () {
Loadcss ();
});

Copy Code code as follows:

/*** Mask Layer ****/
. Grey {
Background: #000;
Display:block;
z-index:1000;
width:100%;
Position:absolute;
Filter:alpha (OPACITY:50);
opacity:0.5;
top:0;
left:0;
top:0;
}

. lookbigpicture {
border: #000 solid 1px;
Position:absolute;
z-index:2000;
Text-align:center;
Background:black;
}

. bigimg {
Margin-left:auto;
Margin-right:auto;
position:relative;
}

. bigpicclose {
Position:absolute;
width:36px;
height:36px;
font-size:0;
z-index:20001;
Top: -18px;
Right: -18px;
Background
URL ("yun_qi_img/multipic_ico.png?id=20131018174500")
0 0 no-repeat;
}

. LOOKBIGICN {
Display:inline-block;
width:12px;
height:12px;
Background
URL ("yun_qi_img/icon.png?id=1383027536816")
-175px-25px no-repeat;
Vertical-align: -2px;
margin-left:20px;
}

. w_ico12 {
Display:inline-block;
width:12px;
height:12px;
Background
URL ("yun_qi_img/icon.png?id=1383027536816")
-175px 0px no-repeat;
Vertical-align: -2px;
}

. protopic {
Position:absolute;
Display:inline-block;
height:30px;
top:10px;
right:50px;
Overflow:hidden;
Cursor:pointer;
Color: #F8F8F8;
text-shadow:0 1px 0 rgba (0, 0, 0,. 5);
}

Copy Code code as follows:

<p pic-choice style= "Display:none;" >
<em class= "w_ico12" ></em><a href= "javascript:;" id= "Hidepic" > Close Up </a>
<em class= "LOOKBIGICN" ></em><a href= "javascript:;" id= "bigpic" > View Large Map </a>
</p>