周梦康 发表于 2014-07-23 5013 次浏览 标签 : jquery

github 地址:https://github.com/dimsemenov/Magnific-Popup

官网地址:http://dimsemenov.com/plugins/magnific-popup/

自己整理的简单的代码演示,包括图片显示和视频显示,首先肯定是引入插件了。

<link rel="stylesheet" href="magnific-popup/magnific-popup.css"> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="magnific-popup/jquery.magnific-popup.js"></script> 
<a class="image-popup-no-margins" href="{$vo.thumb}"><img src="{$vo.thumb}" /></a>
<a class="video-popup-no-margins" href="{$vo.shipin_url}"><img src="{$vo.thumb}" /></a>

使用方法:

$(document).ready(function() {
    $('.image-popup-no-margins').magnificPopup({
        type: 'image',
        closeOnContentClick: true,
        closeBtnInside: false,
        fixedContentPos: true,
        mainClass: 'mfp-no-margins mfp-with-zoom',
        image: {
            verticalFit: true
        },
        zoom: {
            enabled: true,
            duration: 300
        }
    });
    $('.video-popup-no-margins').magnificPopup({
        type: 'iframe',
        iframe: {
            markup: '<div class="mfp-iframe-scaler">'+
                '<div class="mfp-close"></div>'+
                '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
                '</div>',
            srcAction: 'iframe_src'
        },
        zoom: {
            enabled: true,
            duration: 300
        }
    });
})

考虑到很多时候img外围并没有包裹着一个a链接,所以需要我们自己手动添加,这个时候就需要给这些后添加的a链接做委派啦,也很简单,以jquery.1.7.3为例子

$("#article img").each(function(){
    $(this).wrap('<a class="image-popup-no-margins" href="'+$(this).attr('src')+'"></a>');
})
$('.image-popup-no-margins').magnificPopup({
    type: 'image',
    closeOnContentClick: true,
    closeBtnInside: false,
    fixedContentPos: true,
    mainClass: 'mfp-no-margins mfp-with-zoom',
    image: {
        verticalFit: true
    },
    zoom: {
        enabled: true,
        duration: 300
    }
});
$('.image-popup-no-margins').live('magnificPopup');

👇 下面是我的公众号,高质量的博文我会第一时间同步到公众号,给个关注吧!

评论列表