image maxheight & maxwidth

[JC]

How can I set a max height & max width for an image to display in the
slimbox?

I want the slimbox to open the image and limit the height/width if
they exceed a set maximum height and width but retain the aspect
ratio.

I am using version 1.64 with mootools and could not locate the best
way to do this.
May be an option setting that could be set when calling the script.

Thank for any help.

[Chris]

Currently, Slimbox does not resize images.

[JC]

Sorry I wasn't clear.

I don't want slimbox to resize the image,
I just want to limit the size of the slimbox the image is displayed in
if the image is too high or wide for the browser window it is
displaying over.

The <div> lbImage has a set height/width from the image, but I could
locate where to limit them in the code.
I just wanted to check the height/width of the image when loading it.
If the image height or width is greater than a set size the image
would show using the set max width/height.

Will keep looking.

[Mike H]

Realizing it's been over five years since this thread was posted to, here's a solution that limits the image size based on browser window size for slimbox2 (based on http://stackoverflow.com/questions/3257059/limit-slimbox-lightbox-image-to-window-size/15259716#15259716).  You could simply set winWidth and winHeight to whatever values you want if you want to set strict limits.

In slimbox2.js, replace

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

with

var winWidth  = $(window).innerWidth()  - 20;
var winHeight = $(window).innerHeight() - 120;

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

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

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 behavior NORMAL before hacking */
    w(g).css({backgroundImage:"url("+n+")",backgroundSize:"",visibility:"hidden",display:""});
    w(p).width(k.width);
    w([p,I,d]).height(k.height);            
}

         --Mike / mhvirtual.com

[Mike H]

I should add that I was referring to version 2.05.

[Craig Langdon]

Hey JPL,

I've integrated the code you've shown above, and I almost have it working. I have an image gallery that pops up from just one thumbnail, and the first image sizes perfectly to the window, but any attempt to move to any of the following images, throws an error: TypeError: vpWidth is not a function. I've included the vpWidth and vpHeight functions, in my code but It doesn't seem to recognize them. I'm kind of at my wits end. If you can think of anything that i might try to fix the situation, I'd appreciate it.

Thanks,
Craig.


On Tuesday, September 9, 2014 12:46:57 PM UTC-4, JPL wrote:

That's interesting.  I have programmed it slightly differently in our version of Slimbox 2.0.5, which also has a timed slide show option.  It is in use in a couple of cricket club websites and works fine on both desktop and smartphone.  Image resizing has allowed us to use Slimbox to display scoresheet photos as well as the normal usage in photo galleries.

Change:

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

//    06.07.2014  JPL  Resize images (based on BeNoGa www.ISNO.ch 02.06.2013, but with revised scaling)
function animateBox() {
    var vpw, vph, plw, plh, rsw, rsh, rsz;
    center.className = "";
    vpw = vpWidth() - options.bdrw;     // size of current window less Slimbox border
    vph = vpHeight() - options.bdrh;
    plw = preload.width;                // image size
    plh = preload.height;
    //console.log("vpw x vph: " + vpw + "x" + vph + "\nplw x plh: " + plw + "x" + plh);
    if ((plw > vpw) || (plh > vph)) {
        rsw = vpw / plw;
        rsh = vph / plh;
        rsz = (rsw < rsh) ? rsw : rsh;
        plw = Math.floor(plw * rsz);
        plh = Math.floor(plh * rsz);
        //console.log("Resized: " + plw + "x" + plh + " [" + rsz + "]");
        $(image).css({
            backgroundImage: "url(" + activeURL + ")",
            backgroundSize: "" + plw + "px " + plh + "px",
            visibility: "hidden",
            display: "block"
        });
    } else {
        //console.log("Unchanged: " + plw + "x" + plh);
        $(image).css({
            backgroundImage: "url(" + activeURL + ")",
            visibility: "hidden",
            display: ""
        });
    }
    $(sizer).width(plw);
    $([sizer, prevLink, showLink, nextLink]).height(plh);
    $('#lbImage').css('background-size', 'contain');

New options items:

bdrw: 20,                        // border = 2x10px
bdrh: 60,                        // border = 2x10px + allowance for caption & counter

Functions used to get viewport size:

function vpWidth() {
    var objNode = document.createElement("div");
    objNode.style.position = 'fixed';
    objNode.style.width = '100%';
    objNode.style.height = '100%';
    document.body.appendChild(objNode);
    vpWidth = objNode.offsetWidth;
    document.body.removeChild(objNode);
    return vpWidth;
};
function vpHeight() {
    var objNode = document.createElement("div");
    objNode.style.position = 'fixed';
    objNode.style.width = '100%';
    objNode.style.height = '100%';
    document.body.appendChild(objNode);
    vpHeight = objNode.offsetHeight;
    document.body.removeChild(objNode);
    return vpHeight;
};
    
JPL

[JPL]

[This is an updated version of my September 9 post, created because it seemed too confusing to leave the old post as is and put corrections/clarifications in a new one. It includes usage details for the viewport height/width functions as requested in Craig's post of September 19, and also corrects typos made in the original post when preparing the code for posting.  JPL]

That's interesting, Mike.  I have programmed it slightly differently in our version of Slimbox 2.0.5, which also has a timed slide show option.  It is in use in a couple of cricket club websites, e.g. www.phenecricket.com, and works fine on both desktop and smartphone.  Image resizing has allowed us to use Slimbox to display scoresheet photos as well as the normal usage in photo galleries.

Change:

function animateBox() {

    center.className = "";

    $(image).css({backgroundImage: "url(" + activeURL + ")", visibility: "hidden", display: ""});

    $(sizer).width(preload.width);

    $([sizer, prevLink, nextLink]).height(preload.height);

        

to:

//    06.07.2014  JPL  Resize images (based on BeNoGa www.ISNO.ch 02.06.2013, but with revised scaling)

function animateBox() {

    var vpw, vph, plw, plh, rsw, rsh, rsz;

    center.className = "";

    vpw = LIB1.vpWidth() - options.bdrw;     // size of current window less Slimbox border

    vph = LIB1.vpHeight() - options.bdrh;

    plw = preload.width;                // image size

    plh = preload.height;

    //console.log("vpw x vph: " + vpw + "x" + vph + "\nplw x plh: " + plw + "x" + plh);

    if ((plw > vpw) || (plh > vph)) {

        rsw = vpw / plw;

        rsh = vph / plh;

        rsz = (rsw < rsh) ? rsw : rsh;

        plw = Math.floor(plw * rsz);

        plh = Math.floor(plh * rsz);

        //console.log("Resized: " + plw + "x" + plh + " [" + rsz + "]");

        $(image).css({

            backgroundImage: "url(" + activeURL + ")",

            backgroundSize: "" + plw + "px " + plh + "px",

            visibility: "hidden",

            display: "block"

        });

    } else {

        //console.log("Unchanged: " + plw + "x" + plh);

        $(image).css({

            backgroundImage: "url(" + activeURL + ")",

            visibility: "hidden",

            display: ""

        });

    }

    $(sizer).width(plw);

    $([sizer, prevLink, nextLink]).height(plh);

    $('#lbImage').css('background-size', 'contain');

New options items:

bdrw: 20,                        // border = 2x10px

bdrh: 60,                        // border = 2x10px + allowance for caption & counter

In my implementation, the functions used to get viewport size are already defined in another JS library (not the only way, but what I did in this case):

var LIB1 = LIB1 || {};

(function (document, LIB1) {

    "use strict";

function vpWidth() {

        var objNode, w1;

        objNode = document.createElement("div");

        objNode.style.position = 'fixed';

        objNode.style.width = '100%';

        objNode.style.height = '100%';

        document.body.appendChild(objNode);

        w1 = objNode.offsetWidth;

        document.body.removeChild(objNode);

        return w1;

    }

    LIB1.vpWidth = vpWidth;

    function vpHeight() {

        var objNode, h1;

        objNode = document.createElement("div");

        objNode.style.position = 'fixed';

        objNode.style.width = '100%';

        objNode.style.height = '100%';

        document.body.appendChild(objNode);

        h1 = objNode.offsetHeight;

        document.body.removeChild(objNode);

        return h1;

    }

    LIB1.vpHeight = vpHeight;

}(document, LIB1));

  

JPL

[Craig Langdon]

Excellent! Thanks JPL it worked like a charm.

Much appreciated.

[rethus]

Can somebody post the changed js-File?

I don't get it to work.

Does slimbox2 not suported anymore?