Как загрузить изображение в центре страницы - slimbox

Question

У меня проблема с плагином Slimbox. Когда я нажимаю на изображение, изображение загружается внизу страницы и нужно прокрутить страницу, чтобы увидеть изображение.

но в демонстрационном изображении загрузка в центре страницы

Answer 1

Откройте минимизированный slimbox2.js и найдите код:

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

(он должен быть расположен вокруг колонны 1100) и заменить его на

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

Примечание: имена переменных могут быть разными (они выбираются случайным образом минификатором). Вы можете поискать ".height()/2" для начала.

Код рассчитывает вертикальную центральную позицию окна. Ошибка возникает из-за того, что свойство jQuery $(window).height в некоторых случаях возвращает неправильное значение в более поздних версиях jQuery, и это приводит к тому, что поле появляется в нижней части окна или даже под нижней частью.

Некоторые решения для этой ошибки jQuery, которые я нашел в Интернете, включают указание в начале файла HTML, но это не сработало для меня.

Простое решение JavaScript через window.innerHeight решает проблему для большинства современных браузеров, но не работает для IE версии 8 и более ранних.

Answer 2

Стиль CSS

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

это сработало для меня