WordPress中Markdown编辑器，增加点击图片放大的功能风小博

风 2018-11-2711:23:33来源：phower 评论 2,627 views

在魔改主题过程中遇到一个问题：插入的图片由于过大无法完整展示，WordPress自带处理方法一是采用原图的小尺寸图片（这样会创建多个小尺寸图片副本，占用主机空间），二是将全尺寸图片直接压缩，但是往往压缩后很不清晰，严重影响美观！！！美观！！！。

有不少插件能够实现这种功能，例如FancyBox，FancyZoom，比较新的Cleaner Gallery。但是本着wp能不用插件就尽量不用的原则，我们选择从一个实现该效果的插件中提取其功能，然后用代码实现。我们选择使用FancyBox。

原理说明

However，博主习惯用Markdown，在MD中插入图片写法是：

![tag](url)

其通过MD解释器转换为html为：

<img title="name" alt="name" src="url">

日常使用这种语法没有问题，但是如果要使用这种点击放大效果的插件我们发现他们都是要求图片格式如：

<a href=""><img src="url"></a>

原地爆炸（╯‵□′）╯︵┴─┴）所以针对Markdown语法我们需要做一点预处理。

插件安装

首先我们需要获取FancyBox的程序，请在文章的下方下载。

解压至WP主题所在文件夹，/wp-content/themes/主题名/fancybox, 如果为了精简使用可以先将压缩包中的demo文件夹删掉再上传。

修改文件所属组www:root及访问权限755

cd /home/wwwroot/phower.me/wp-content/themes/主题名
chown -R www:root fancybox
chmod -R 755 fancybox

在主题的header.php中添加以下代码，放在之前:

<link href="<?php bloginfo('template_url'); ?>/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" media="all" />

在主题的footer.php中添加以下代码，放在之前:

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/fancybox/lib/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<script>
    // 给图片添加链接
    $(document).ready(function() {
        $("p img").each(function() {
        var strA = "<a id='yourid' href='" + this.src + "'></a>";
        $(this).wrapAll(strA);
        });
    });
    // fancybox
    $("#yourid").fancybox({
        openEffect    : 'elastic',
        closeEffect   : 'elastic',
    });
</script>

效果演示

点击上图片，就会出现如下的效果了。
除去屏幕中心位置的对话框，其他的区域都以淡出的效果逐渐变为银灰色以增加对比度，效果满分，欢迎尝试。

完善

单击图片空白区域，即可关闭图片：
在上面提到的footer.php中增加的代码增加如下注释对应的部分:

    $(document).ready(function() {
        $("p img").each(function() {
        var strA = "<a id='yourid' href='" + this.src + "'></a>";
        $(this).wrapAll(strA);
        });
    });
    // fancybox
    $("#yourid").fancybox({
        openEffect    : 'elastic',
        closeEffect   : 'elastic',

        //--增加开始--
        helpers : {
            css : {
                    'background' : 'rgba(238,238,238,0.85)'
            }
        }
        //--增加结束--
    });
</script>

不想要放大图片右上角的图标，有很多种方法：
我采取的方法是，修改： fancybox\source\jquery.fancybox.css

.fancybox-close {   
    position: absolute;
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    z-index: 8040;

    /*增加下面一行： 这样直接给隐藏掉了 ^_^*/
    background: transparent;
}

如果想要右上角的图标，但是不想要后面的背景色，可以这样修改：

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
    background-image: url('fancybox_sprite.png');

    /*增加下面一行： 这样直接给隐藏掉了 ^_^*/
    background: transparent;
}