перенос fancybox 1 в fancybox 3

Question

У меня довольно массивный (для меня) веб-сайт, разработанный с использованием fancybox 1, и я пытаюсь перейти на Fancybox 3, но есть проблемы. Все содержимое моего iframe имеет высоту около 100 пикселей. Я потратил около 1 недели, пытаясь найти ответ, и мне нужно выкинуть вопрос экспертам.

Вот типичный пример

HTML код

<a href="syllabus/s04.1.htm" class="syl"><span class="def3" onMouseOver="this.className='def3_on'" onMouseOut="this.className='def3'">Syllabus 
      ref: 4.1</span></a>

На класс "syl" ссылаются во внешнем jquery javascript:

 $(".syl").fancybox({
        'width'         : '90%',
        'height'        : '90%',
        'autoScale'         : false,
        'overlayOpacity'    :  0.6,
        'overlayColor'      : '#944',
        'transitionIn'      : 'fade',
        'transitionOut'     : 'fade',
        'type'      : 'iframe'
     });

Это вызов внутри документа и прекрасно работает с fancybox 1, но теперь я связал fancybox 3 , iframe имеет полный размер fancybox, но связанный файл sr c, кажется, завершен, но имеет высоту только 100px (или около того), нормальная ширина.

Чего мне не хватает?

Answer 1

ОК, я нашел его, посмотрев исходный код некоторых примеров.

В HTML вы должны объявить тег data-fancybox с идентификатором. В приведенном ниже примере data-fancybox = 'swf'

<a href="#" data-src="Section00-bonding/swf/sigmapi.swf" class="swf" data-fancybox='swf' data-type="iframe">File Name</a>

, а затем во внешнем. js файле:

$("[data-fancybox='swf']").fancybox({
    iframe : {
        css : {
            width :  '70%',
            height : '90%'
        }
    }
});

Это означает, что теперь я могу выбрать формат fancybox в зависимости от типа файла, который я показываю.

Извините, если мне не удалось ответить на вопрос раньше.

Answer 2

Вы используете опции, которых нет в v3. Если вы хотите sh установить собственные размеры, используйте CSS или JS (например, iframe : {css : {width : '90%'}}), см. Документы https://fancyapps.com/fancybox/3/docs/#iframe для образцов.

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