從縮略圖腳本修改放大圖像，以動態顯示基於其大小屬性的圖像

我試圖修改這個簡單的js腳本，只要點擊它就可以從縮略圖放大圖像。問題是，根據定義的固定寬度顯示放大的圖像。我想根據它的尺寸屬性顯示放大的圖像。例如圖像尺寸是200寬度和300高度，我希望該圖像根據該尺寸顯示，而不是固定的300高度和寬度。從縮略圖腳本修改放大圖像，以動態顯示基於其大小屬性的圖像

我一直在嘗試的解決方案，如刪除寬度，而不是圖像放大到全屏幕大小。

如何修改此腳本，以便根據原始大小屬性顯示放大圖像。

腳本屬於羅克森，我給所有功勞歸於他 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 */

來源

2013-05-01 donkeyboy72

像這樣的東西或許應該工作

<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');

來源

2013-05-01 11:03:09 dt192

什麼得到了一個邊界？圖片？ – dt192 2013-05-01 11:11:01

img {border-style：none;}在你的css – dt192 2013-05-01 11:12:00

哦，好吧，很高興你得到它排序:-) – dt192 2013-05-01 11:32:45

從縮略圖腳本修改放大圖像，以動態顯示基於其大小屬性的圖像

回答

相關問題