how load image in center of page - slimbox

Question

I've a problem with the Slimbox plugin. When I click over an image, image load in bottom page and need scroll page for see image .

but in demo image load in center of page

Answer 1

css style

#lbImage {
        position: absolute;
        left: 0;
        top: 0;
        border: 10px solid #fff;
        background-repeat: no-repeat;
    }

#lbOverlay {
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    cursor: pointer;
}

#lbCenter, #lbBottomContainer {
   z-index: 9999999999;
   position: fixed;
   left: 50%;
   background-color: #fff;
   top: 30px !important; 
}

that worked for me

Answer 2

Open the minified slimbox2.js and find the code:

y=E.scrollTop()+(E.height()/2);

(it should be located around column 1100) and replace it with

y=E.scrollTop()+(window.innerHeight()/2);

Note: variable names could be different (they are chosen randomly by minifier). You may want to search for ".height()/2" for a start.

The code calculates vertical center position of the window. The error occurs because jQuery $(window).height property returns wrong value in some cases in latter versions of jQuery, and this causes the box to appear near the bottom of the window, or even under the bottom.

Some solutions for this jQuery bug I found on the web include specifying in the beginning of the HTML file, but this didn't work for me.

Plain JavaScript solution via window.innerHeight solves the problem for most modern browsers, but doesn't work for IE version 8 and earlier.