Заголовок для iframe/видео во всплывающем окне Magnific

Мне нужно показать заголовок/подпись для всплывающего окна. В типе изображения для этого есть опция, но нет для видео/iframe.

В документах (http://dimsemenov.com/plugins/magnific-popup/documentation.html#iframe_type) Я нашел пример шаблонной разметки, но я не понимаю, как сделать заголовок видимым.

Не могли бы вы помочь мне настроить разметку iframe для отображения заголовка во всплывающем окне по ссылке, например

<a class="popup" title="This is caption" href="http://vimeo.com/41128754"></a>

JS-код

    $('a.popup').magnificPopup({
        disableOn: 700,
        type: 'iframe',
        mainClass: 'mfp-fade',
        removalDelay: 160,
        preloader: false,
        fixedContentPos: true,
        titleSrc: 'title'

    });

Спасибо.


magnific-popup
person Arkady    schedule 12.07.2013    source источник
comment
Вот обсуждение id, которое отвечает на ваш вопрос stackoverflow.com/questions/20986219/   -  person Dmitry Semenov    schedule 08.01.2014

Ответы (2)


arrow_upward
18
arrow_downward

Немного поздно, но это может быть полезно для всех, кто ищет ответ.

Атрибут titleSrc применяется только к типу: изображение, он не работает для фреймов. У разработчика Magnific Popup есть пример того, как добавить заголовок во всплывающее окно iframe: http://codepen.io/dimsemenov/pen/zjtbr

Это JS:

$('.popup').magnificPopup({
  type: 'iframe',
  iframe: {
     markup: '<div class="mfp-iframe-scaler">'+
                '<div class="mfp-close"></div>'+
                '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
                '<div class="mfp-title">Some caption</div>'+
              '</div>'
  },
  callbacks: {
    markupParse: function(template, values, item) {
     values.title = item.el.attr('title');
    }
  },
  // your other settings
});

Чтобы заголовок отображался, вы должны включить этот CSS:

.mfp-title {
  position:absolute;
  /* other formatting */
}

Что это делает:

  • markup добавляет новый div с классом mfp-title в оболочку фрейма, который будет использоваться для отображения заголовка.
  • Обратный вызов markupParse получает атрибут title из ссылки, если он есть, и добавляет его в новый div.
  • Что это добавляет заголовок к нижней части видео, независимо от того, где находится элемент div .mfp-title, поскольку он использует абсолютное позиционирование. Вам нужно использовать CSS, чтобы расположить его вверху, например. top: -20px; left:0; (вам понадобится отрицательное значение для верхней части, чтобы переместить ее над iframe)

.

У разработчика есть коллекция примеров, которые могут помочь любому, кто ищет, как делать то, что не описано в документации. http://codepen.io/collection/nLcqo/

person FluffyKitten    schedule 25.02.2014

arrow_upward
0
arrow_downward

Для iFrame вы должны использовать код для вставки vimeo. В моем проекте я использовал следующий. Может быть, это будет полезно для вас. Если у вас есть какие-либо вопросы по этому поводу, пожалуйста, дайте мне знать.

<iframe height="100" width="100" title="Vimeo Video" class="vimeo" src="http://player.vimeo.com/video/41128754" ></iframe>
person Rigel Networks    schedule 12.07.2013
comment
Спасибо за ответ. Не могли бы вы дать свой код JS для этой разметки iframe? - person Arkady; 12.07.2013
comment
У меня нет кода js, я использовал эту штуку в своем приложении iOs в качестве кода для встраивания. Если вам нужен этот код, дайте мне знать. - person Rigel Networks; 12.07.2013