Динамически установленный размер fancybox 3 iframe

Question

При работе с динамическим изменением размера iframe в fancybox я случайно обнаружил, что настройка data-width а также data-height на [data-fancybox] полезно после прочтения этого ответа.

Пример HTML-элемента:

<a data-fancybox data-width="<?= $banner_width; ?>" data-height="<?= $banner_height; ?>"  data-src="example.com" href="javascript:;">example.com</a>

и JS:

$("[data-fancybox]").fancybox({
    afterLoad: function ( instance, slide ) {
        $('body').find('.fancybox-content').css({"width": slide.opts.width + "px", "height": slide.opts.height + "px"});
    }
});

То, что я не мог понять, - то, что нет никакого объяснения data-width а также data-height использование элемента HTML из документации fancybox (исправьте меня, если я ошибаюсь).

ПРИМЕЧАНИЕ: эти два фрагмента кода выше работают для меня, но они должны работать вместе, не будет работать, если один из них будет снят.

Может кто-нибудь объяснить это немного для меня, пожалуйста?

Answer 1

Свойства - data-width а также data-height - используются, чтобы сообщить сценарию реальное измерение изображения. Затем скрипт может рассчитать положение и начать масштабирование, пока реальное изображение все еще загружается.

Смотрите документацию - http://fancyapps.com/fancybox/3/docs/

Эти свойства больше нигде не используются.

Ты можешь использовать { iframe : { css : { width: '', height : '' } } } установить ширину / высоту элемента iframe, но нет возможности изменить содержимое iframe.

Answer 2

Основываясь на документации fancybox 3, они предлагают способ установки наших собственных опций путем создания data-options приписывать. Вот пример из документации:

<a data-fancybox 
   data-options='{"caption" : "My caption", "src : "iframe.html"}' href="javascript:;">
   Open external page using iframe
</a>

Вы можете увидеть значение этих опций по console.info( slide.opts ) из функции обратного вызова, как onComplete (slide один аргумент в функции обратного вызова).

Не удивительно, что эти два фрагмента одинаковы:

<a data-fancybox data-width="<?= $banner_width; ?>" data-height="<?= $banner_height; ?>"  data-src="example.com" href="javascript:;">example.com</a>

<a data-fancybox data-options='{"width" : "<?= $banner_width; ?>", "height" : data-height="<?= $banner_height; ?>", "src" : "example.com" }' href="javascript:;">example.com</a>

Итак, в моем JavaScript, я использую slide.opts.width чтобы получить значение от data-width а также slide.opts.heightчтобы получить высоту от data-heightТаким образом, мои значения ширины и высоты передаются из бэкэнда во фронтэнд.

Поскольку эти два значения обрабатываются в afterLoad обратный вызов, поэтому каждый iframe будет инициирован с различной шириной и высотой.