Fancybox3 глюк?

Question

[MegaPuxapb]

верстаю сайт.
стоит задача, по клику на элемент в слайдере вызвать увеличенную картинку.
реализую через owlcarousel2/fancybox3

в разделе ВЫПОЛНЕННЫЕ РАБОТЫ, работает нормально.
а вот в разделе НАШИ СЕРТИФИКАТЫ, открывается коряво.

как решить?
q665588f.beget.tech/almaz/index.html

Comments

[Сергей delphinpro]

Имею такую же проблему. Решения не нашёл. Подпишусь, пожалуй.

[Dmitry Sokolov]

Сергей, попробуйте отключить zoom эффект.
PS: При смене слайда такого эффекта нет.

https://fancyapps.com/fancybox/3/docs/#options

// Open/close animation type
// Possible values:
// false - disable
// "zoom" - zoom images from/to thumbnail
// "fade"
// "zoom-in-out"
//
animationEffect : "zoom"

[apotheosis91]

Попробуйте обновить jquery до 3.2.1. Если нет возможности, можно воспользоваться таким хаком:

$(document).on('afterShow.fb', function() { $.fancybox.getInstance().update() })

[apotheosis91]

Также, так как owl carousel клонирует элементы для своих нужд, fancybox показывает неправильное количество слайдов (в 2 раза больше). Поэтому нужно инициализировать его вручную и передать селектор, чтобы исключить элементы-клоны. Что-то вроде:

$().fancybox({
  selector : '.owl-item:not(.cloned) a',
  // ...
  // другие опции
});

Подробнее смотрите на их гитхабе.

Answer 1

[noVe]

Попробуйте

.fancybox-image {
	width: initial;
	height: initial;
}