给wordpress文章图片添加Auto-highslide灯箱预览效果-轻语博客

一直都在用Auto-highslide插件，最近准备发主题了，顺便集成到主题里面，免去再安装插件的麻烦，如果你也想使用该插件，可以根据微饭的提示进行Wordpress插件集成哦~

操作步骤：

1、下载auto-highslide集成包包：highslide

文件下载	文件名称：highslide.zip	文件大小：64KB
	下载声明：本站文件大多收集于互联网，如有版权问题，请联系博主及时删除！
	下载地址：点击下载

2、把下载的压缩包解压后的highslide文件夹通过FTP上传到 wp-content/themes/当前使用主题名称/ 目录；

3、编辑当前主题的Footer.php文件，在合适的位置添加引用代码：

<?php if(is_single()):?>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/highslide/highslide.css" type="text/css" />
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/highslide/highslide.js"></script>
<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>
<?php endif;?>

4、编辑当前主题的functions.php文件，在<?php下面添加以下代码：

//集成auto-highslide灯箱插件  by www.qyblog.cn
add_filter('the_content', 'addhighslideclass_replace');
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;
}

5、上传图片的时，“附件显示设置”中的“链接到”选择“媒体文件”再插入文章，然后文章中的图片点击就会有灯箱效果。