响应式弹出层和对话框插件Magnific Popup

 2015年05月02日    1267     声明


最早用到Magnific Popup还是在前几年做.net开发的时候,在一个叫nopCommerce的项目中。Magnific Popup是一款非常优秀的相应式插件,不仅在pc上表现优秀,在移动设备上也有良好的兼容性。其适用范围包括:lightbox式图片浏览、 iframe对话框、 css文本对话框、ajax异步加载等。

本文主要介绍Magnific Popup的图片展示,即像册功能。效果展示如下:


Magnific Popup用法简介

1.引用css样式文件

<link href="/magnific-popup/magnific-popup.css" type="text/css" rel="stylesheet"/>


2.引用jQuery文件及Magnific Popup的js文件

<script type="text/javascript" src="/js/jquery.1.11.min.js"></script>
<script type="text/javascript" src="/magnific-popup/jquery.magnific-popup.min.js"></script>

Magnific Popup兼容Zepto.js,也可用Zepto.js库代替jQuery库。


3.添加图片相关的html代码

<div>                
    <a class="thumb-popup-link" href="/upload/2015/4/13/14288871450439949.jpg" title="维多利亚">
        <img src="/upload/2015/4/13/14288871450439949.jpg!127-92" alt="维多利亚" title="维多利亚" />
     </a>
     <a class="thumb-popup-link" href="/upload/2015/4/13/14288871525167590.jpg" title="维多利亚">
        <img src="/upload/2015/4/13/14288871525167590.jpg!127-92" alt="维多利亚" title="维多利亚">
     </a>
     <a class="thumb-popup-link" href="/upload/2015/4/13/14288871622952325.jpg" title="维多利亚">
        <img src="/upload/2015/4/13/14288871622952325.jpg!127-92" alt="维多利亚" title="维多利亚">
    </a>
</div> 

html代码中img元素中的src属性为图片的缩略图地址,a元素中的herf属性对应该为图片的源文件地址。


4.添加js启动脚本

<script type="text/javascript">
$(document).ready(function () {
    $('.thumb-popup-link').magnificPopup(
    {
        type: 'image',
        removalDelay: 300,
        gallery: {
            enabled: true       //默认为单张图片,添加gallery参数可开启画册模式
        }
    });
});
</script>

以上js可放在html最下面body以内,或是在head之间。