Auto-highslide：WordPress图片灯箱代码方法

使用代码给 WordPress 添加图片弹窗灯箱效果，多种效果，多种方法

前言

前几天在一个网站制作图片弹窗特效的时候，本来是使用的fancybox的，结果确实失效的，好吧，然后换个方法，用 Auto-highslide 接管了，好吧，这个插件貌似好点，但是略肥，好了，下面直接开说。

文件部署

下载文章底部的文件，解压出来得到highslide文件夹，把文件夹放到主题的根目录，里面只有一个 css 文件和 javascript 文件和几个图片文件，很小的说。

代码部署

将以下代码添加到主题函数文件functions.php文件

//Auto-highslide 图片灯箱
function addhighslideclass_replace ($content)
{   global $post;
	$pattern = "/<a(.*?)href=('|")([^>]*).(bmp|gif|jpeg|jpg|png)('|")(.*?)>(.*?)</a>/i";
    $replacement = '<a$1href=$2$3.$4$5 class="highslide-image" onclick="return hs.expand(this);"$6>$7</a>';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}
add_filter('the_content', 'addhighslideclass_replace');

然后将以下代码添加到主题footer.php文件

<script type="text/javascript">
jQuery(document).ready(function($) {
    hs.graphicsDir = "<?php bloginfo('template_url'); ?>/highslide/graphics/";
    hs.outlineType = "rounded-white";
    hs.dimmingOpacity = 0.8;
    hs.outlineWhileAnimating = true;
    hs.showCredits = false;
    hs.captionEval = "this.thumb.alt";
    hs.numberPosition = "caption";
    hs.align = "center";
    hs.transitions = ["expand", "crossfade"];
    hs.addSlideshow({
        interval: 5000,
        repeat: true,
        useControls: true,
        fixedControls: "fit",
        overlayOptions: {
            opacity: 0.75,
            position: "bottom center",
            hideOnMouseOut: true

        }

    });
});
</script>

还没结束，我还需要调用样式和脚本文件，在footer.php文件里面添加这段代码

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/highslide/highslide.js"></script>

然后再主题header.php文件中head之前添加这段代码

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/highslide/highslide.css" type="text/css">

后语

好了，目前 fancybox 代码版，插件有了，Auto-highslide 插件有了，Auto-highslide 代码也有了

文件下载

扫码订阅，第一时间获得更新

微信扫码二维码，订阅我们网站的动态，另外不定时发送 WordPress 小技巧，你可以随时退订，欢迎订阅哦~