limit slimbox (lightbox) image to window size

Question

HI all,

Anyone know how to limit the overlay window size of slimbox to be a percentage of the user's window size (like prettyphoto does)

Thanks

Here's the module code: http://paste.ly/3Kz

And the slimbox js: http://paste.ly/3L0

Answer 1

Actually neither of your solutions quite did it for me , so i had to put them in a blender and sorta mix the result by doing this:

as he said, look out for this lines in slimbox2.js

w(g).css({backgroundImage:"url("+n+")",visibility:"hidden",display:""});
w(p).width(k.width);
w([p,I,d]).height(k.height);

and replace them with this block:

        var winWidth  = window.innerWidth  - 20;
        var winHeight = window.innerHeight - 120;
        if (winWidth > winHeight) { 
            var maxSize = winHeight; 
        } else { 
            var maxSize = winWidth;
        }

        /* determine proper w and h for img, based on original image'w dimensions and maxSize */
        var my_w = k.width; 
        var my_h = k.height;            

        if (my_w > my_h) {
            my_h = maxSize * my_h / my_w;
            my_w = maxSize;
        } else {
            my_w = maxSize * my_w / my_h;
            my_h = maxSize;
        }

        if (k.width > my_w || k.height > my_h){ /* constrain it */
            w(g).css({backgroundImage:"url("+n+")",backgroundSize:""+my_w+"px "+my_h+"px",visibility:"hidden",display:""});
            w(p).width(my_w);
            w([p,I,d]).height(my_h);    
        }
        else { /* default behaviour  NORMAL before hackeing*/
            w(g).css({backgroundImage:"url("+n+")",backgroundSize:"",visibility:"hidden",display:""});
            w(p).width(k.width);
            w([p,I,d]).height(k.height);            
        }       

*be kind, i'm an amateur developer on early stage ;)

Answer 2

I was trying to use Redscouse's solution but I think his used an older version of slimbox. Here is a solution based on v2.04 that will constrain the image to fit inside the current browser window.

Locate the animateBox() function. Near the top you should find lines that look like this:

$(image).css({backgroundImage: "url(" + activeURL + ")", visibility: "hidden", display: ""});
$(sizer).width(preload.width);
$([sizer, prevLink, nextLink]).height(preload.height);

Replace those lines with these:

/* make sure the image won't be bigger than the window */
var winWidth = $(window).width() - 20;
var winHeight = $(window).height() - 104;
var maxSize = (winWidth > winHeight) ? winHeight : winWidth; /* the smaller dimension determines max size */

/* determine proper w and h for img, based on original image'w dimensions and maxSize */
var my_w = preload.width; 
var my_h = preload.height;
if (my_w > my_h)
{
    my_h = maxSize * my_h / my_w;
    my_w = maxSize;
}
else
{
    my_w = maxSize * my_w / my_h;
    my_h = maxSize;
}

if (preload.width > my_w || preload.height > my_h){ /* constrain it */
    $(image).css({backgroundImage: "url(" + activeURL + ")", backgroundSize: my_w + "px " + my_h + "px", visibility: "hidden", display: ""});
    $(sizer).width(my_w);
    $([sizer, prevLink, nextLink]).height(my_h);
}
else { /* default behaviour */
    $(image).css({backgroundImage: "url(" + activeURL + ")", backgroundSize: "", visibility: "hidden", display: ""});
    $(sizer).width(preload.width);
    $([sizer, prevLink, nextLink]).height(preload.height);
}

The -20 and -104 adjustments are to take into account extra space that slimbox uses around the image. Feel free to tweak those as needed.

Answer 3

I had a similar problem where the image was expanding beyond the size of the window. I know I could of solved this by restricting the size of the image on upload, but I didn't want to do that, I would rather be able to set the size of slimbox window so I set about the task, here's what I came up with and it works perfectly! :)

To make it easier to adjust in the future you want to add the userDefinedWidth and userDefinedHeight lines to your call to slimbox in the options:

Example:

$(function($) {
    $("a[rel^='lightbox']").slimbox({
    /* Put custom options here */
    userDefinedWidth:640, /* set max width here */
    userDefinedHeight:480, /* set max height here */
    initialWidth: 250,
    initialHeight: 250,
    imageFadeDuration: 400
});

Next, Open slimbox.js (or slimbox2.js) and look for the options again, this time add the userDefinedWidth and userDefinedHeight with no values like so:

w.slimbox=function(O,N,M){
    u=w.extend({
    userDefinedWidth:'',
    userDefinedHeight:'',
    loop:false,
    ...etc.
    ...etc.

Next find the function called i. In the i function replace the following lines:

w(g).css({backgroundImage:"url("+n+")",visibility:"hidden",display:""});
w(p).width(k.width); 
w([p,I,d]).height(k.height); 

with these lines:

var my_w = u.userDefinedWidth; 
var my_h = u.userDefinedHeight;
w(g).css({backgroundImage:"url("+n+")",backgroundSize:""+my_w+"px "+my_h+"px",visibility:"hidden",display:""});
w(p).width(my_w);
w([p,I,d]).height(my_h);

Once you have done that, you're good to go and should be able to resize the slimbox to a setting of your choice.

Pete.

PS: I'm a php guy getting to grips with jquery/javascript so if anyone can make this better/quicker/easier please feel free. Oh, and please feel free to use this code anywhere you like. ;)

Answer 4

While Avinash's response works, this is much more simple:

.pp_overlay {max-width:100%; max-height:100%;}

The percent in the above fields takes it as a percent of the user's browser size.

The class .pp_overlay is what it is called in PrettyPhoto. You will need to find the equivalent for slimbox.

Answer 5

capture the users window resolution and set the overlay's width and height according to captured info...

$('#overlay').width($(window).width()).height($(window).height());