基于magnific-popup.js和animate.css的响应式lightbox特效_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一款基于magnific-popup.js和animate.css的响应式lightbox特效。该特效使用magnific-popup.js作为驱动，使用animate.css作为动画特效，制作出各种打开lightbox的炫酷效果。

magnific-popup.js是一款响应式的lightbox和对话框插件。它可以为各种设备的用户提供良好的性能和更好的用户体验。

animate.css是一款强大的CSS3动画库，它提供了75种不同的过渡动画效果。

使用方法

使用该特效需要在页面中引入jQuery、magnific-popup.js相关文件和animate.css文件。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/0.9.9/magnific-popup.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">
<script src='js/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/0.9.9/jquery.magnific-popup.min.js'></script>

HTML结构

可以通过一个超链接元素来打开lightbox，超链接中使用data-*属性来设置需要的CSS3动画效果。

<a href="http://placehold.it/600x600" 
    class="btn popup-link" 
    data-effect="fadeIn">fadeIn</a>

初始化插件

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该特效。

$(document).ready(function() {
  $('.popup-link').magnificPopup({ 
    removalDelay: 300,
    type: 'image',
    callbacks: {
    beforeOpen: function() {
       this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure animated ' + this.st.el.attr('data-effect'));
    }
  },
  });
});

关于magnific-popup.js的详细使用方法请参考：http://dimsemenov.com/plugins/magnific-popup/documentation.html