Неправильное расположение изображения в jQuery colorbox (не по центру)

Question

Я использую плагин jQuery Colorbox для некоторых изображений на Эта страница .

Если вы посмотрите на изображение основного продукта в центре, прямо под ним находятся маленькие миниатюрные миниатюрные картинки. Если вы нажмете на одну из них, появится изображение, используя Colorbox

Если вы установите окно браузера шириной около 800 пикселей (ширина содержимого страницы), всплывающее окно будет отцентрировано. Однако, когда вы расширяете окно браузера, всплывающее окно все больше смещается вправо (не в центре).

Кто-нибудь знает, как я могу это исправить?

Answer 1

Если для тега body установлено значение position :lative ColorBox не будет точно рассчитывать центр страницы.

Answer 2

colorbox.css

#cboxLoadingOverlay{background:#fff url(images/loading.gif) no-repeat 5px 5px;}

заменить на

#cboxLoadingOverlay{background:#fff url(images/loading.gif) no-repeat center center;}

Answer 3

Ну, я смог исправить это, изменив эту строку:

posLeft = Math.max(document.documentElement.clientWidth - settings.w - loadedWidth - interfaceWidth,0)/2 + $window.scrollLeft();

на

posLeft = Math.max(800 - settings.w - loadedWidth - interfaceWidth,0)/2 + $window.scrollLeft();

в jquery.colorbox.js

Однако решение, которое не 't измените источник плагина и сделайте его менее dynamic было бы идеально.

Answer 4

У меня была та же проблема, и мое тело не было установлено в «положение: родственник».

Возможно, это не лучшее решение, но вы можете исправить его, не изменяя код плагина, просто используя событие onComplete:

$('img.colorbox').colorbox({onComplete: function() {
     $('#colorbox').css('left', ((window.innerWidth - $('#colorbox').width()) / 2) + 'px');
} });

Colorbox будет загружен и появится не по центру, а затем будет немедленно переставлен. Пользователь увидит переход, но поле будет в центре.

Это все еще не идеально, но не включает в себя изменения в плагине

Answer 5

У меня была проблема с неправильным выравниванием по вертикали, и я выяснил, что решение состоит в том, чтобы использовать функции jheu.height () и .width () вместо document.documentElement.clientHeight и .clientWidth.Поэтому переменные posTop и posLeft должны быть установлены следующим образом:

posTop = Math.max($window.height() - settings.h - loadedHeight - interfaceHeight, 0) / 2 + $window.scrollTop(),

posLeft = Math.max($window.width() - settings.w - loadedWidth - interfaceWidth, 0) / 2 + $window.scrollLeft();