效果图:
第一步: 添加脚本支持
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="magnific-popup/magnific-popup.css">
<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Magnific Popup core JS file -->
<script src="magnific-popup/jquery.magnific-popup.js"></script>
第二步: 添加html标签
<div class="popup-gallery">
<a href="path-to-image-1.jpg">
<img src="path-to-image-1.jpg"/>
</a>
<a href="path-to-image-2.jpg">
<img src="path-to-image-2.jpg"/>
</a>
<a href="path-to-image-3.jpg">
<img src="path-to-image-3.jpg"/>
</a>
</div>
第三步: 初始化弹出来的层和a标签的点击事件
<script>
$(function(){
$('.popup-gallery').magnificPopup({
delegate: 'a',
type: 'image',
removalDelay: 300,
mainClass: 'mfp-with-zoom',
titleSrc: 'title',
gallery:{
enabled:true
},
zoom: {
enabled: true, // By default it's false, so don't forget to enable it
duration: 300, // duration of the effect, in milliseconds
easing: 'ease-in-out', // CSS transition easing function
// The "opener" function should return the element from which popup will be zoomed in
// and to which popup will be scaled down
// By defailt it looks for an image tag:
opener: function(openerElement) {
// openerElement is the element on which popup was initialized, in this case its <a> tag
// you don't need to add "opener" option if this code matches your needs, it's defailt one.
return openerElement.is('img') ? openerElement : openerElement.find('img');
}
}
});
});
</script>
相关学习链接:
官网地址: http://dimsemenov.com/plugins/magnific-popup/
Magnific弹出文档:https://dimsemenov.com/plugins/magnific-popup/documentation.html