如何修復jquery燈箱的寬度和高度？

Question

我在我的圖片庫中使用了jquery lighbox，但是由於圖像的大小不同，燈箱尺寸不固定因此打開了圖像的原始尺寸，這反過來導致biga圖像走出屏幕並顯示水平滾動條在瀏覽器中。

因此，我正在尋找將修復寬度和高度應用於燈箱的方法，以便每個圖像必須在燈箱中以此尺寸顯示。

請幫忙..

更新

我剛嘗試解決方案Scott（ http://geekswithblogs.net/wojan/archive/2009/06/17/jquerylightbox.aspx ）給了我，我做了這個，

function _resize_container_image_box(intImageWidth,intImageHeight) {
// Get current width and height
//rescale if necessary
if((settings.maxWidth != null && settings.maxHeight != null) && (intImageWidth > settings.maxWidth || intImageHeight > settings.maxHeight)){
var isWider = intImageWidth > intImageHeight;//is the image wide or tall?
var scale = isWider ? settings.maxWidth/intImageWidth : settings.maxHeight/intImageHeight;
intImageWidth = intImageWidth * scale;
intImageHeight = intImageHeight * scale;
}

$('#lightbox-image').height(intImageHeight); 
$('#lightbox-image').width(intImageWidth); 
var intCurrentWidth = $('#lightbox-container-image-box').width();
var intCurrentHeight = $('#lightbox-container-image-box').height();
// Get the width and height of the selected image plus the padding
var intWidth = (intImageWidth + (settings.containerBorderSize * 2)); // Plus the image´s width and the left and right padding value
var intHeight = (intImageHeight + (settings.containerBorderSize * 2)); // Plus the image´s height and the left and right padding value
// Diferences
var intDiffW = intCurrentWidth - intWidth;
var intDiffH = intCurrentHeight - intHeight;
// Perfomance the effect
$('#lightbox-container-image-box').animate({ width: intWidth, height: intHeight },settings.containerResizeSpeed,function() { _show_image(); });
if ( ( intDiffW == 0 ) && ( intDiffH == 0 ) ) {
if ( $.browser.msie ) {
___pause(250);
} else {
___pause(100);  
}
} 
$('#lightbox-container-image-data-box').css({ width: intImageWidth });
$('#lightbox-nav-btnPrev,#lightbox-nav-btnNext').css({ height: intImageHeight + (settings.containerBorderSize * 2) });
};

和

$('#gallery a').lightBox( maxHeight: null,
maxWidth: null);
});

但每當我這樣做並點擊圖片時，只需在瀏覽器中打開另一個標簽，所有燈箱功能都會失敗

請幫我糾正一下

謝謝

Answer 1

我修改了Leandro Vieira Pinho的jquery.lightbox-0.5.js文件。 這個修改過的javascript文件的作用是，它會檢查每個圖像，如果寬度或高度超過屏幕（視口區域），則會在保留縱橫比的同時調整圖像大小。

要使用此文件，您只需將此javascript文件的全部內容復制並粘貼到現有的jquery.lightbox-0.5.js文件中，或者只需用此替換舊文件即可。

我給了2個鏈接：第一個將讓你下載整個javascript文件，第二個將顯示你可以復制並粘貼到現有jquery.lightbox-0.5.js的源代碼。

下載javascript文件： http ： //turboupload.com/081zwttawcb6

源代碼： http ： //www.sourcepod.com/twhbtf88-5047

Answer 2

您的燈箱呼叫缺少{。 將您的燈箱調用更改為：

$('#gallery a').lightBox( {maxHeight: null,
maxWidth: null
});

Answer 3

您需要針對lightbox（）的所有調用指定maxHeight和maxWidth。 例：

$('#gallery a').lightBox({
  maxHeight: 700, 
  maxWidth: 700
});

Answer 4

您的函數應該替換jquery.lightbox.js插件文件中的函數（在第196行的某處查找以function _resize_container_image_box開頭的function _resize_container_image_box ）。

接下來你需要做的是在外部JS文件中調用lightBox()或者在#cocacola09和#Chandu建議的html中調用：

   $('#gallery a').lightBox( {maxHeight: null,
    maxWidth: null
    });

我另外做的是動態獲取窗口的寬度和高度，因此它適合當前窗口大小：

$(function() {
    //get height and width of window
    var windowWidth = $(window).width();
    var windowHeight = $(window).height();
    //windowsize - 50px
    var windowHeightFixed = windowHeight - 50;
    var windowWidthFixed = windowWidth - 50;    

    $('a.lightbox').lightBox({          
        maxHeight: windowHeightFixed,
        maxWidth: windowWidthFixed
    });
}); 

但是這種方法會產生一些錯誤的結果。 當您以不同的窗口大小重新加載頁面時，會發生此問題。 有些圖像保留了之前窗口大小的寬度/高度，但有些圖像沒有。 在Firefox 18，Chrome 24中測試過。

Answer 5

Sunimal Kaluarachchi的代碼運行良好但不能正確處理景觀縱橫比。

要正常工作，您需要改變

 if ( newViewPortWidth > viewPortHeight ) // if viewport width > viewport height
 to    
 if ( newImageWidth > newViewPortWidth  ) //

在他的函數___calculateImageDimension函數中

這是完整的功能

function ___calculateImageDimension(viewPortWidth, viewPortHeight, imageWidth, imageHeight)
    {
        // obtain 82% of ViewPort Height
        var viewPortHeightPercent = viewPortHeight * (82/100);

        var newImageHeight = imageHeight;
        var newImageWidth = imageWidth;
        var newViewPortWidth = viewPortWidth;
        var scaleHeight =0;
        var scaleWidth = 0;

       // if ( newViewPortWidth > viewPortHeight ) // if viewport width > viewport height
        if ( newImageWidth > newViewPortWidth  ) // if viewport width > viewport height
        {
            // Get 80% of current viewport width so the image width will be displayed within this 80% of viewport width size
            newViewPortWidth = viewPortWidth * (80/100);
        }

        // image width check
        if ( newImageWidth > newViewPortWidth )
        {
            newImageWidth = newViewPortWidth;
            scaleWidth = imageHeight/imageWidth;
            newImageHeight = scaleWidth * newImageWidth;
        }
        // image height check
        if ( newImageHeight > viewPortHeightPercent )
        {
            newImageHeight = viewPortHeightPercent;
            //calculate scale to set width
            scaleHeight = imageWidth/imageHeight;
            newImageWidth = scaleHeight * newImageHeight;
        }
        arrayNewImageSize = new Array(newImageWidth,newImageHeight);
        return arrayNewImageSize;
    }