javascript - 数据属性中的放大弹出设置类型

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