修改缩略图脚本中的放大图像，以根据其大小属性动态显示图像

modifying an enlargement image from thumbnail script to dynamically display image based on their size property

本文关键字：图像 动态显示 属性 略图 脚本 放大 修改      更新时间：2023-09-26

我试图修改这个简单的js脚本，无论何时点击缩略图都会放大图像。问题是，放大的图像是根据定义的固定宽度显示的。我想放大的图像显示根据它的大小属性。例如，一个图像的宽度为200，高度为300，我希望该图像显示根据该大小，而不是固定的300的高度和宽度。

我一直在尝试解决方案，如删除宽度，但相反，图像被放大到全屏尺寸。

我如何修改这个脚本，使放大的图像显示根据它的原始大小属性

剧本属于roXon，我给他充分的信任如何放大图像从缩略图在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 */

像这样的东西应该可以工作

<img src="http://placehold.it/250x150/fof" data-full="http://placehold.it/860x590/fof" data-width="860px" data-height="590px" alt="" />
$('<img>', {src:imgToLoad, width: $(this).data('width'),height: $(this).data('height')}).appendTo('#jQ_popup');

或者这个取路径/860x590/

的大小
var dimensions=$(this).data('full').match(/('d+)x('d+)/);
$('<img>', {src:imgToLoad, width: dimensions[1]+'px',height: dimensions[2]+'px'}).appendTo('#jQ_popup');
相关文章：