Question

我正在尝试设置这样的混合内容类型库， http://codepen.io/dimsemenov/pen/vKrqs

但我想从元素标记中动态读取类型，而不是在js中编写链接和类型。

<a class="lightbox" data-type="image" href="imagethumb" >
    <img src="fullimage">
</a>
<a class="lightbox" data-type="iframe" href="iframelink">
    Iframe link
</a>

有没有办法通过读取元素数据属性

来设置弹出窗口类型

类似

$(".lightbox").magnificPopup({
    type: $(this).attr('data-type'),
    mainClass: 'mfp-with-zoom',


    zoom: {
        enabled: true,
        duration: 300,
        easing: 'ease-in-out',
        opener: function (openerElement) {
            return openerElement.is('img') ? openerElement : openerElement.find('img');
        }
    },
    gallery: {
        enabled: true
    }
});

任何帮助表示赞赏。

Answer 1

这是通过

解决的

mfp-type

css课程 http://dimsemenov.com/plugins/magnific-popup/documentation.html#content-types

或这个组合 https://github.com/dimsemenov/Magnific-Popup/issues/146#issuecomment-20729036

来自数据属性的Magnific弹出集类型

1 个答案: