jquery - loop - fancybox-infobar




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

Вот как я использую 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;
        }
    });

Я создаю одностраничный веб-сайт в HTML5 с использованием фреймворка Unsemantic , ссылаясь на скрытые элементы div, отображаемые в 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="https://www.youtube.com/video">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 ) размеры изображений соответственно autoHeight:false , размер видео соответственно изменяется, но текстовая ссылка по умолчанию имеет минимальную высоту и максимальную ширину:

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

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

Пока что я попробовал следующее безуспешно:

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

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

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


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

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

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

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

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

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






fancybox-2