How to fix jquery lightbox width and height?

I use jquery lighbox in my image gallery, but due to the large size of the images, the lightbox size is not fixed, so it opens with the original image size, which, in turn, causes biga images to exit the screen and display a horizontal scroll bar in browser

Therefore, I am looking for a way to apply the width and height fix to the lightbox so that each image should be displayed with that lightbox size.

Please, help..

Update

i Just tried Scott's solution ( http://geekswithblogs.net/wojan/archive/2009/06/17/jquerylightbox.aspx ), I did it,

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

and

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

, , " ", .

,

+3
5

maxHeight maxWidth (). :

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

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

+5

{. :

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

, jquery.lightbox.js( , function _resize_container_image_box - 196).

- lightBox() JS html, # cocacola09 #Chandu:

   $('#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.

0

Sunimal Kaluarachchi , .

,

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

___calculateImageDimension function

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;
    }
0

Source: https://habr.com/ru/post/1782054/


All Articles