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

Ответ 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