How to fix the width and height of jquery lightbox?


I have aplied jquery lighbox on my image gallery, but due to the variable size of images, the lightbox size is not fixed hence opens up with image's original size, this in turn causes the biga images to go out of screen and display horizontal scroll bar in browser.

Hence I am looking for the way to apply the fix width and height to lightbox so that every image must be displayed with this size in lightbox.

Please help..




i Just tried with the solution Scott (http://geekswithblogs.net/wojan/archive/2009/06/17/jquerylightbox.aspx) has given to me, I did this,

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

But whenever I do this and click on the image just gets open in browsers annother tab, all the lightbox functinalty fails

Please help me to correct it



You need to specify the maxHeight and maxWidth against all calls of the lightbox(). Example:

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

I modified the jquery.lightbox-0.5.js file by Leandro Vieira Pinho. What this modified javascript file does is, it will check each image and if the width or height exceeds the screen (viewport area), then the image is resized while preserving the aspect ratio.

To use this file, you just have to copy and paste entire contents of this javascript file in your already existing jquery.lightbox-0.5.js file or you just have to replace the old file with this.

I have given 2 links: First one will let you down load the entire javascript file and the second will display the source code which you can copy and paste into your existing jquery.lightbox-0.5.js.

Download javascript file: http://turboupload.com/081zwttawcb6

Source code : http://www.sourcepod.com/twhbtf88-5047


You lightbox call is missing a {. Change your lightbox call to as follows:

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

Sunimal Kaluarachchi's code works well but doesn't handle a landscape aspect ratio properly.

To work properly you need to change

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

in his function ___calculateImageDimension function

here is the complete 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; }

Your function should replace the one in the jquery.lightbox.js plugin file (look for the function that starts with function _resize_container_image_box somewhere around line 196).

What you need to do next is call lightBox()in your external JS file or inside html like #cocacola09 and #Chandu suggested:

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

What i did in addition is to get the width and height of a window dynamically, so it fits the current window size:

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

But this method gives some buggy results. The problem occurs when you reload the page in a different window size. Some images preserve the width/height of previous window size, but some don't. Tested in Firefox 18, Chrome 24.



  • How to fix the width and height of jquery lightbox?
  • print 30 digits of a double value in c++
  • ASP.NET MVC, set culture after authorization
  • Stubbing a property twice with rhino mocks
  • Execution order with (>>=) not what I expected
  • Mat-autocomplete - How to access selected option?
  • .NET MVC custom routing with empty parameters
  • Centering the Navigation bar
  • Nested information in Firebase
  • percentage calculation for each row in hive
  • How does one upload a photo to twitter with the API function POST statuses/update_with_media
  • Crystal Report rendered differently on server and development machine
  • How I can have previewing permanently when capture video for android?
  • Perl is respecting '
  • Meteor's cordova: geolocation plugin doesn't work on mobile
  • how to display individual listings? Ruby on Rails
  • Get posts from all categories except one category
  • TYPO3 distribution.png issue when posting images
  • Linq-to-SQL to search only DATE portions of a date
  • HTTP Status 500 - Error instantiating servlet class org.springframework.web.servlet.DispatcherServle
  • Contact us email sending is not working in codeigniter php
  • How do you save a Linq object if you don't have its data context?
  • Batch script read a file that's continously written
  • Starting Bootstrap tour with a button after ending tour once
  • Extract the data specified in brackets '[ ]' from a string message in python
  • autotest on ubuntu does nothing
  • date changes on export kendoGrid
  • mssql script data insert or update
  • jQuery colorbox breaks postbacks in ASP.NET Web Forms
  • In metro, get all inherited classes of an (abstract) class?
  • Please update your Node runtime to version >=0.12.x
  • opencv deskewing a contour
  • Drag and drop unicode TText in DelphiXe4