1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
| $(document).ready(function () { $("img").addClass("pimg"); });
$(function () { $(".pimg").click(function () { var _this = $(this); imgShow("#outerdiv", "#innerdiv", "#bigimg", _this); }); }); function imgShow(outerdiv, innerdiv, bigimg, _this) { var src = _this.attr("src"); $(bigimg).attr("src", src); $("<img/>").attr("src", src).load(function () { var windowW = $(window).width(); var windowH = $(window).height(); var realWidth = this.width; var realHeight = this.height; var imgWidth, imgHeight; var scale = 0.8; if (realHeight > windowH * scale) { imgHeight = windowH * scale; imgWidth = imgHeight / realHeight * realWidth; if (imgWidth > windowW * scale) { imgWidth = windowW * scale; } } else if (realWidth > windowW * scale) { imgWidth = windowW * scale; imgHeight = imgWidth / realWidth * realHeight; } else { imgWidth = realWidth; imgHeight = realHeight; } $(bigimg).css("width", imgWidth); var w = (windowW - imgWidth) / 2; var h = (windowH - imgHeight) / 2; $(innerdiv).css({"top": h, "left": w}); $(outerdiv).fadeIn("fast"); }); $(outerdiv).click(function () { $(this).fadeOut("fast"); }); }
|