Magnific popup插件配置

1. 从 Github: github.com/dimsemenov/Magnific-Popup下载。将jquery.magnific-popup.min.js和magnific-popup.css两个文件放到主题目录下。

2.创建一个新的js文件并将其命名为jquery.magnific-popup-init.js。 它是用户初始化灯箱效果。将文件保存到主题文件夹中js文件夹内，保持和jquery.magnific-popup.min.js在同一文件夹内。打开jquery.magnific-popup-init.js文件，把下面的代码复制粘贴进行，并保存。

jQuery(document).ready(function($) {
    $('a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"]').each(function() {
        if ($(this).parents('.gallery').length == 0) {
            $(this).magnificPopup({
                type: 'image',
                closeOnContentClick: true,
                closeBtnInside: false,
                fixedContentPos: false,
                mainClass: 'mfp-with-zoom', 
                // this class is for CSS animation below
                image: {
                    markup: '<div class="mfp-figure">' + '<div class="mfp-close"></div>' + '<div class="mfp-img"></div>' + '<div class="mfp-bottom-bar">' + '<div class="mfp-title"></div>' + '<div class="mfp-description" style="text-align: left;font-size: 12px;line-height: 16px;color: #f3f3f3;word-break: break-word;padding-right: 36px;"></div>' + '<div class="mfp-counter"></div>' + '</div>' + '</div>',
                    titleSrc: function(item) {
                        return '<strong>' + item.el.find('img').attr('alt') + '</strong>';
                    }
                },
                zoom: {
                    enabled: true,
                    duration: 300,
                    easing: 'ease-in-out',
                    // By default it looks for an image tag:
                    opener: function(openerElement) {
                        return openerElement.is('img') ? openerElement: openerElement.find('img');
                    }
                }
            });
        }
    });
    // initialize magnific popup galleries with titles and descriptions
    $('.gallery').magnificPopup({
        callbacks: {
            open: function() {
                $('.mfp-description').append(this.currItem.el.attr('title'));
            },
            afterChange: function() {
                $('.mfp-description').empty().append(this.currItem.el.attr('title'));
            }
        },
        delegate: 'a',
        type: 'image',
        image: {
            markup: '<div class="mfp-figure">' + '<div class="mfp-close"></div>' + '<div class="mfp-img"></div>' + '<div class="mfp-bottom-bar">' + '<div class="mfp-title"></div>' + '<div class="mfp-description" style="text-align: left;font-size: 12px;line-height: 16px;color: #f3f3f3;word-break: break-word;padding-right: 36px;"></div>' + '<div class="mfp-counter"></div>' + '</div>' + '</div>',
            titleSrc: function(item) {
                return '<strong>' + item.el.find('img').attr('alt') + '</strong>';
            }
        },
        gallery: {
            enabled: true,
            navigateByImgClick: true
        }
    });
});

3.在主题文件夹中 header.php文件。 添加以下代码,加载js及css：

<script type="text/javascript" src="?php bloginfo('template_url'); ?/js/jquery.magnific-popup.min.js"/script>
<script type="text/javascript" src="?php bloginfo('template_url'); ?/js/jquery.magnific-popup-init.js"/script>
<link rel="stylesheet" type="text/css" media="screen" href="? bloginfo('template_url'); ?/magnific-popup.css" />

4.在magnific-popup.css文件中加入以下代码：

/*修改样式从站点dimsemenov.com/plugins/magnific-popup/ 20190809*/

/* padding-bottom and top for image */
.mfp-no-margins img.mfp-img {
  padding: 0;
}
/* position of shadow behind the image */
.mfp-no-margins .mfp-figure:after {
  top: 0;
  bottom: 0;
}
/* padding for main container */
.mfp-no-margins .mfp-container {
  padding: 0;
}
/*
for zoom animation
uncomment this part if you haven't added this code anywhere else
*/
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
  opacity: 0;
  -webkit-backface-visibility: hidden;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
  opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
  opacity: 0.7;
}

.mfp-with-zoom.mfp-removing .mfp-container,
  .mfp-with-zoom.mfp-removing.mfp-bg {
  opacity: 0;
}

that’s all..

最终效果：