我需要显示视频弹出窗口的标题/标题.在图像类型中,有这样的选项,但是对于视频/ iframe来说是不可取的.
在文档(http://dimsemenov.com/plugins/magnific-popup/documentation.html#iframe_type)中,我发现了模板标记的例子,但我不明白如何使标题可见.
<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'
});
谢谢.
解决方法
有点迟了,但有可能有助于其他任何人寻找答案.
“titleSrc”属性仅适用于type：image,它不适用于iframe.
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
});
.mfp-title {
position:absolute;
/* other formatting */
}
这是做什么的
>标记是将一个带有mfp-title类的新div添加到框架包装器中,用于显示标题.
> markupParse回调从链接获取标题属性,如果有一个,并将其添加到新的div.
>这个标题添加到视频底部的标题,无论它包含哪个.mfp-title div,因为它使用绝对定位.您需要使用CSS将其定位在顶部,例如顶部：-20px;左：0; (您需要使用负值将顶部移动到iframe上方)
.
开发人员在这里提供了一系列示例,可以帮助任何人寻找如何处理文档中未涉及的内容.
http://codepen.io/collection/nLcqo/
