Magnific Popup-使用详解

效果图：

 

第一步： 添加脚本支持

<!-- 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