WordPress自动为附件图像添加灯箱弹窗效果[无插件版]

发布时间:2018-07-26 8:50:32

目前,大多数Wordpress主题没有集成常用的附件图像灯箱Lightbox效果。往往我们需要下载相应的插件来实现弹窗显示大图像。但各类插件功能多,使用过多插件会导致网页加载速度慢。这个时候我们就需要自己动手修改一下,来实现简单的弹窗Lightbox效果。下面分享几种常用jQuery灯箱 – 弹出脚本的集成方法,希望梦满足您的需求。

Magnific popup

1. 从 Github: github.com/dimsemenov/Magnific-Popup下载最新版的magnific-popup.js;

2. 解压并保存在本地,打开文件夹,复制或是上传jquery.magnific-popup.min.js和magnific-popup.css两个文件到你的主题目录下,一般在asset文件夹下面的js和css文件夹内;

3.创建一个新的js文件并将其命名为jquery.magnific-popup-init.js。 它是用户初始化灯箱效果。将文件保存到主题文件夹中asset中的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,
                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
        }
    });
});

4.打开在主题文件夹中 functions.php文件。 添加以下代码:

/* Magnific popup - https://dimsemenov.com/plugins/magnific-popup/ */
add_action('wp_enqueue_scripts', 'enqueue_magnificpopup_styles');
function enqueue_magnificpopup_styles() {
       wp_enqueue_style('magnific_popup_style', get_stylesheet_directory_uri().'/asset/css/magnific-popup.css', array());
}
 
add_action('wp_enqueue_scripts', 'enqueue_magnificpopup_scripts');
function enqueue_magnificpopup_scripts() {
      wp_enqueue_script('magnific_popup_script', get_stylesheet_directory_uri().'/asset/js/jquery.magnific-popup.min.js', array('jquery'));
 
       wp_enqueue_script('magnific_init_script', get_stylesheet_directory_uri().'/asset/js/jquery.magnific-popup-init.js', array('jquery'));
}

5.如果您有一些高于垂直视点的图像。 为了能够在看到高图像时滚动,我们必须在magnific-popup.css文件中添加一些额外的CSS。 滚动到您看到img.mfp-img css类的位置。 添加max-height:100%!对所有图像都很重要,以显示其原始大小。下面是最基本的CSS代码。强烈建议您新增下面的代码。

/* Main image in popup */
img.mfp-img {
 width: auto;
 max-width: 100%;
 height: auto;
 max-height: 100% !important; /* ADDED */
 display: block;
 line-height: 0;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 padding: 40px 0 40px;
 margin: 0 auto; 
}

Colorbox

1.转到Colorbox网站并下载colorbox master zip文件。

2.查看各种示例并找到要修改的示例。

3.在主题文件夹的根目录中添加一个新文件夹并将其命名为colorbox。

4.将images文件夹与内容以及colorbox.css从主颜色框示例复制到新的colorbox文件夹中。

5.从本地colorbox文件夹中,还将jquery.colorbox-min.js复制到主题colorbox文件夹。

6.创建一个新的js文件并将其命名为colorbox-init.js。 将其保存在colorbox文件夹中。 然后,该文件将初始化colorbox,告诉它如何使用它。 添加以下代码:

/* Initialize jQuery Colorbox*/
jQuery(function( $ ){
 $('a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"]').colorbox({
    transition:'none',
    rel: 'gallery',
    opacity:.85,
 
    title: function() {
    return $(this).find('img').attr('alt');
    } 
    });
});

7.打开在主题文件夹中 functions.php文件。 添加以下代码:

/* Enqueue Colorbox */
add_action( 'wp_enqueue_scripts', 'enqueue_colorbox' );
function enqueue_colorbox() {
 wp_enqueue_style( 'colorbox-css', get_template_directory_uri(). '/colorbox/colorbox.css' );
 wp_enqueue_script( 'colorbox',get_template_directory_uri() . '/colorbox/jquery.colorbox-min.js', array( 'jquery' ), '', true );
 wp_enqueue_script( 'colorbox-init', get_template_directory_uri() . '/colorbox/colorbox-init.js', array( 'colorbox' ), '', true ); 
}
小兽wordpress凭借多年的wordpress企业主题制作经验,坚持以“为用户而生的wordpress主题”为宗旨,累计为2000多家客户提供品质wordpress建站服务,得到了客户的一致好评。我们一直用心对待每一个客户,我们坚信:“善待客户,将会成为终身客户”。小兽wordpress能坚持多年,是因为我们一直诚信。我们明码标价(wordpress做网站需要多少钱),从不忽悠任何客户,我们的报价宗旨:“拒绝暴利,只保留合理的利润”。如果您有网站建设、网站改版、网站维护等方面的需求,请立即咨询右侧在线客服或拨打咨询热线:18907337671,我们会详细为你一一解答你心中的疑难。

相关文章

写给所有做网站的朋友的一封信

写给所有做网站的朋友的一封信

现在就开始执行“1+N”营销推广和没有开始执行的人,一两天看不出任何区别; 一两个月看来差异也是微乎其微的;但在2-5年的长远时间来看的时候,你的高质 量询盘不断增加,你的互联网资产已经建立完成,对手已经很难匹敌,现在你看到这段文字的时候就是最好的开始,现在就是最好的时候,马上开始“1+N”体系的整体营销推广吧,我们和你一起,开创互联网营销大未来!

点击查看详情

准备开启WordPress网站建设推广?

我们相信高端漂亮的网站不应该是昂贵的,这就是wordpress对每个人都是免费的原因
wordpress建站免费入门,并提供价格合理的wordpress建站套餐。