【发布时间】：2013-05-01 10:46:15
【问题描述】：
我正在尝试修改这个简单的 js 脚本，该脚本会在单击时从缩略图中放大图像。问题是，放大的图像是根据定义的固定宽度显示的。我希望根据它的 size 属性显示放大的图像。例如，图像尺寸是 200 宽和 300 高，我希望该图像根据该尺寸而不是固定的 300 高和宽显示。
我一直在尝试解决方案，例如删除宽度，但将图像放大到全屏尺寸。
如何修改此脚本，使放大后的图像根据其原始大小属性显示。
脚本属于 roXon，我完全信任他 How to enlarge image from thumbnail in jQuery?
这是 jquery http://jsbin.com/egevij/3/edit
HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link rel="stylesheet" href="css/forms.css">
<meta charset=utf-8 />
<title>Demo by roXon</title>
</head>
<body>
<div id="jQ_popup_window">
<div id="jQ_popup" class="shadow radius">
<div id="jQ_popup_close"></div>
</div>
</div>
<img src="http://placehold.it/250x150/cf5" data-full="1.jpg" alt="" />
<img src="http://placehold.it/250x150/fof" data-full="http://placehold.it/860x590/fof" alt="" />
<script type = "text/javascript" src ="trouble.js"></script>
</body>
</html>
jQuery:
// POPUP WINDOW:
var scrT = $(window).scrollTop();
$(window).scroll(function(){
scrT = $(window).scrollTop();
});
// GET and use WINDOW HEIGHT //
$.getDocHeight = function(){
var D = document;
return Math.max(Math.max(D.body.scrollHeight, D.documentElement.scrollHeight), Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), Math.max(D.body.clientHeight, D.documentElement.clientHeight));
};
// POPUP WINDOW (lightbox for video and other)
// GET WINDOW SCROLLtop OFFSET
$('[data-full]').on('click', function(e){
e.preventDefault();
$('#jQ_popup').css({
top: scrT+15
}).find('img').remove();
$('#jQ_popup_window').height($.getDocHeight).fadeTo(0,0).css({
marginLeft:0
}).fadeTo(600,1);
var imgToLoad = $(this).data('full');
$('<img>', {src:imgToLoad, width:'100%'}).appendTo('#jQ_popup');
});
// close popup
$('#jQ_popup_close, #jQ_popup_window').on('click', function(){
$('#jQ_popup_window').fadeTo(600,0,function(){
$(this).hide();
});
});
$('#jQ_popup').on('click', function(ev){
ev.stopPropagation();
});
// end POPUP WINDOW
CSS：
/* === POPUP WINDOW === */
#jQ_popup_window{
background: rgba(0,0,0,0.6);
left: 0;
margin-left: -9000px;
position: absolute;
top: 0;
width: 100%;
z-index:999999;
}
#jQ_popup {
background: #000;
border: 1px solid #BDB9B8;
margin: 30px auto;
padding: 25px;
position: relative;
width: 600px; /* SET HERE DESIRED W .*/
}
#jQ_popup_close {
background:#fff;
cursor: pointer;
height: 28px;
width: 28px;
position: absolute;
z-index:999999;
right: 10px;
top: 10px;
-webkit-border-radius:30px;
border-radius:30px;
border:2px solid #fff;
border-color: rgba(255,255,255,0.2);
}
#jQ_popup_close:hover{
background:#f00;
}
/* #POPUP WINDOW */
【问题讨论】：
标签： javascript jquery