JQuery調整縮略圖圖像

我正在嘗試製作一個JQuery腳本，以便更改投資組合中某些圖像的大小。一些圖像在水平方向上較大，而另一些則在垂直方向上較大，所以我的想法只是將中間部分顯示爲縮略圖。如果你點擊它，你可以看到真實的圖像（與外部滑塊好嗎？）JQuery調整縮略圖圖像

於是小劇本我所做的就是以下幾點：

$(document).ready(function(){ 

    var w_div = $('#portfolio div').width(); 
    var h_div = $('#portfolio div').height(); 

    $('#portfolio div a img').each(function() { 

     /* Correction estimate: div.width - photo.width/2 */ 
     var posLeft = -(w_div - $(this).width())/2; 
     var posTop = -(h_div - $(this).height())/2; 

     /* Assignment of new measures to the current image */ 
     $(this).css({left: posLeft+'px', top: posTop+'px'}); 

    }); 

});

隨着循環我試着取img組並迭代它以計算正確的中心位置。但我不知道爲什麼它只適用於第一張圖片。我的意思是，這個腳本只改變了第一張圖片的所有圖片的CSS。爲什麼posLeft和posTop的任務不會改變？我不明白它...

（我忘了說，每一個圖像具有「位置：相對」？！句話放在CSS文件確定

感謝

編輯：可能是更容易和更好的主意，使用PHP和在服務器端執行這個任務？

來源

2011-09-18 albertoblaz

我讀這個速度太快了。所以，我大量編輯我的答案。

$（文件）。就緒（）運行如DOM即將呈現。這些圖像尚未加載，而且目前爲止，DOM對它們的唯一信息是img屬性中的內容。容器分區也是如此，這個分區沒有拉伸高度以容納圖像。這可能就是爲什麼你每次都得到相同的尺寸。理想情況下，您應該手動設置圖像的寬度和高度以及容器格。如果你不想這樣做，你可以使用$（window）.load（）來等待所有的圖像加載並且DOM被重新渲染，但是這非常明顯。
'left'和'top'僅適用於'position：absolute'元素;並在「位置：相對的」容器內。因此，圖像需要是絕對的，並且它們上方的div相對於左邊和上邊的工作。

我不確定爲什麼你使用left和top而不是寬度和高度，因爲你試圖製作一個縮略圖。另一種方法是計算寬度和高度的最大值並將其縮小到所需的寬度或高度。

var max_width = 20; var max_height = 20; 
$('#portfolio div a img').each(function() { 
    var w = $(this).width(); 
    var h = $(this).height(); 
    var scale = null; 
    if (w >= h) { if (w > max_width) { scale = 1/(w/max_width); } } 
    else { if (h > max_height) { scale = 1/(h/max_height); } } 
    if (scale) { 
     $(this).width(w * scale); 
     $(this).height(h * scale); 
    } 
});

我希望一些這方面澄清足以讓你的工作妥善的解決辦法了。

來源

2011-09-18 14:59:20 jcampbelly

但它沒有改變任何東西，不是嗎？我已經嘗試過，並且看到和以前一樣。問題是我不知道如何使循環工作正常，因爲posLeft和posTop總是具有相同的值，並且它們是第一個圖像的正確度量。 – albertoblaz

對不起，我過去兩天都很忙，我沒有回答你。我已經嘗試了你的想法，它的工作原理。我以爲我可以在途中做到這一點，但這還不夠。之前我應該學習更多的JavaScript。謝謝你的幫助！ :) – albertoblaz

JQuery調整縮略圖圖像

回答

相關問題