Как я могу получить текстовое содержимое для правильного изменения размера при использовании Fancybox 2?

Я создаю одностраничный веб-сайт в HTML5, используя Unsemantic framework, ссылаясь на скрытые divs, которые отображаются в Fancybox 2 и у меня возникли проблемы с правильной настройкой всех типов контента.

Существует три div - один из которых содержит текст внутри div, который завернут внутри скрытого div, поэтому я могу манипулировать соответствующим содержимым, содержащим галерею изображений, и один, содержащий ссылку на видео YouTube. Я создал скрытый класс, который я вызываю через CSS:

HTML для текстовой части:

<a class="fancybox" href="#bio">...blah blah blah...
...then later on...<article class="hidden" id="bio">

HTML для части видео:

<a class="fancybox fancybox.iframe" href="#" onclick="location.href='https://www.youtube.com/video'; return false;">Videos</a>

CSS

.hidden {
    overflow:hidden;
    display:none;
}

Fancybox вызывается внутри тегов <head>:

<script type="text/javascript">
$(document).ready(function() {
  $("#fancybox-gallery").click(function() {
    $.fancybox.open([
      {
        href : "image_1.jpg",
      }, {
        href : "image_2.jpg",
      }, {
        href : "image_3.jpg"
      }
    ], {
      helpers : {
        thumbs : {
          width: 75,
          height: 50
        }
      }
    });
  });
});
</script>

С настройками Fancybox 2 по умолчанию (autoSize:true, autoWidth:false и autoHeight:false) размер изображений изменяется соответственно, соответственно изменяется размер видео, но текстовая ссылка по умолчанию имеет минимальную высоту и максимальную ширину:

Если я установил autoSize и autoWidth в значение False, то установите autoHeight на значение True, изображения все равно изменяются таким же образом, текстовые поля изменяются до 50% окна браузера, а видео отображается с часть белого цвета с правой стороны:

Честно говоря, мне нравится размер текстовых полей в этом примере, и они действуют оперативно, но видео-бокс не так, так что это немного раздражает.

До сих пор я не пробовал следующее:

Удаление class="hidden" и замена его встроенным "display:none" script, а затем display:inline-block в CSS, по совету друга, но я понял, что это не сработает;
Предоставление скрытого текста div для настройки сетки в соответствии с остальной частью HTML, но это просто вызвало изменение размера div, а не Fancybox.
Я могу установить статическую ширину, но она должна быть отзывчивой, поэтому это неприемлемо для моих нужд;

Итак, где я иду не так? Может ли ответ заключаться в установке autoSize:true и добавлении em или % width в нужные ему div?

Я также думаю о вызове script при открытии, что влияет только на те div, которые мне нужны, но я не уверен, что это возможно. Я не являюсь пользователем JavaScript каждый день, поэтому мои знания плохие.

Ответ 1

Не можете ли вы установить его max-width?

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

width: 100%;
max-width: 500px; /* or whatever you like */
margin: 0 auto;
left: 0;
right: 0;

в белый внешний (или внешний) контейнер на скриншоте.

Если fancybox переопределяет его, используйте !important.

Действительно, в этом случае вам нужно только fancybox, чтобы загрузить или отобразить его, а затем поместить его по вертикали. Вы должны иметь возможность центрировать его по горизонтали самостоятельно несколькими строками CSS. Конечно, у нас нет рабочей демонстрации, так что может быть что-то, что мне не хватает (например, как она оценивает содержимое или переполняет). Но я был бы рад изменить свой ответ, если вы сможете опубликовать демо.

Ответ 2

Вы пытались использовать Flexbox? Моя ссылка на этот набор свойств CSS: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Кроме того, вы можете установить статические значения с помощью javascript и изменить их по мере изменения размера окна, чтобы обеспечить отзывчивость. Тайм-аут и интервал могут потребоваться для предотвращения стресса браузера при изменении размера.

Ответ 3

Я бы порекомендовал вам взглянуть на использование единиц Viewport для вашего размера шрифта (vh, vw, vmax, vmin, rem):

http://caniuse.com/#feat=viewport-units

http://www.sitepoint.com/new-css3-relative-font-size/

Ответ 4

Вот как я использую fanybox. Существует обратный вызов "afterShow", который вы можете использовать для управления отображаемым полем. Я не уверен, что использую его с видео. Может быть, есть еще один селектор контейнера, чем $('img.fancybox-image')? Просто попробуйте...

    jQuery(".fancybox").fancybox({
        openEffect  : 'none',
        closeEffect : 'none',
        padding    : 0,
        margin     : 5,
        fitToView : true,
        autoScale : true,
        nextEffect : 'fade',
        prevEffect : 'none',
        afterShow : function() {
            var img = $('img.fancybox-image');
            var screen = {
                w : $(window).width(),
                h : $(window).height(),
                r : $(window).width() / $(window).height()
            };
            var imgDims = {
                w : img.width(),
                h : img.height(),
                r : img.width() / img.height()
            };
            if(imgDims.r > screen.r) {
                img.width(screen.w - 40);
                img.height(Math.round((screen.w - 40) / imgDims.r));
            } else {
                img.height(screen.h - 40);
                img.width(Math.round((screen.h - 40) * imgDims.r));
            }
            this.autoHeight = true;
            this.autoWidth = true;
        }
    });

Ответ 5

Я исправил аналогичную проблему (w/fancybox v2. +), В которой элемент div.fancybox-wrap был правильно изменен, чтобы иметь высоту "auto", но ширина не изменилась с его первоначальным фиксированным значением пикселя. Это привело к тому, что правая граница была закрыта более широким элементом fancybox-wrap.

Эта проблема возникла после увеличения ширины и высоты элемента div.fancybox-inner.

Это было исправлено путем добавления следующих "новых" строк в скрипт установки fancybox.

$(".fancybox").fancybox({
    closeClick: false,
    autoScale: true,            //New
    autoDimensions: true,       //New
    autoSize: true,             //New
    autoResize: false,          //New
    autoCenter: true,           //New
    width: 'auto',
    height: 'auto',
    openEffect: 'elastic',
    closeEffect: 'elastic',
    openSpeed: 600,
    closeSpeed: 200
});

Следующая строка была также добавлена в сценарий события click, который обрабатывал изменение размера.

$("div.fancybox-wrap").css('width', 'auto');    //Adjust wrapper width after resize