如果图像较大，则在窗口中放入灯箱容器

Question

I'm just looking for a simple way to set the max width and height of the Lightbox container and image based on the window size if the image is larger than the current window size.

So say the image is 2000x1200 and the window is 1280x1024, then the max-height and max-width of div.lb-outerContainer and img.lb-image should be set to

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

and

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

respectively.

I'm just having a bit of trouble determining where to go about implementing these rules. Do I do it in the lightbox.js file? If so, where? Would it be acceptable to just throw in some script on the page it's used on?

Answer 1

This answer isn't for lightbox only this is just general scaling of .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 );
});

And demo: http://jsbin.com/upisen/1/edit

Answer 2

This will not keep image ratio. You have to use something like this :

$(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 );
}

assuming you're using jquery