0

画像が現在のウィンドウサイズよりも大きい場合、ウィンドウサイズに基づいてライトボックスコンテナと画像の最大幅と高さを設定する簡単な方法を探しています。

したがって、画像が2000x1200で、ウィンドウが1280x1024であるとすると、andofandを次のようmax-heightに設定する必要があります。max-widthdiv.lb-outerContainerimg.lb-image

$(window).height() - 286, $(window).width() - 60

と

$(window).height() - 306, $(window).width() - 80

それぞれ。

これらのルールをどこに実装するかを決めるのに少し苦労しています。ファイルでそれを行いlightbox.jsますか？もしそうなら、どこ？使用されているページにスクリプトを挿入するだけでもかまいませんか？

4

2 に答える 2

0

.imageこの答えはライトボックス専用ではありません。これはvsの一般的なスケーリングですwindow

var $window = $(window),
    $image = $(".image");

$image.load(function() {
    var windowHeight = $window.height(),
        windowWidth = $window.width(),
        imageHeight = $image.height(),
        imageWidth = $image.width(),

        radioHeight = windowHeight/imageHeight,
        radioWidth;

        if ( radioHeight < 1 ) {
            imageHeight *= radioHeight;
            imageWidth *= radioHeight;
        }
        radioWidth = windowWidth/imageWidth;
        if ( radioWidth < 1 ) {
            imageHeight *= radioWidth;
            imageWidth *= radioWidth;
        }

    $image.height( imageHeight );
    $image.width( imageWidth );
});

そしてデモ: http://jsbin.com/upisen/1/edit

于 2012-08-30T09:43:26.463 に答える
0

これは画像の比率を維持しません。次のようなものを使用する必要があります。

$(function(){
$('SELECTOR FOR YOUR IMAGE').load(function() {
    this.removeAttribute( "height" );
    this.removeAttribute( "width" );
    this.style.height = this.style.width = "";
    $(this).data('w',this.width);
    $(this).data('h',this.height);
    ResizeGallery();
});
// on resize window 
$(window).resize(function() {
   ResizeGallery();
});
});


function ResizeGallery() {
    var img=$('SELECTOR FOR YOUR IMAGE');
    // remove attribute to get true size
    img.removeAttr( "height" );
    img.removeAttr( "width" );
    var w = img.data('w');
    var h = img.data('h'); 
    // compute maximum dimention
    var maxW = $(window).width()-300; //300= margin
    var maxH = $(window).height()-200;
    // compute zoom ratio and keep only the smallest
    // also ratio must not exceed 1
    var ratio=Math.max(1,Math.min(maxW/w, maxH/h));
    // compute new dimentions
    var newW = Math.floor(ratio*w);
    var newH = Math.floor(ratio*h);

    // apply to image
    img.css('height',newW ).css('width',newH );
}

あなたがjqueryを使っていると仮定して

于 2012-08-30T09:44:51.393 に答える