给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、上传图片的时,“附件显示设置”中的“链接到”选择“媒体文件”再插入文章,然后文章中的图片点击就会有灯箱效果

阅读全文
 收藏 (3) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:轻语博客 » 给wordpress文章图片添加Auto-highslide灯箱预览效果
分享到: 生成海报
qux主题真好用,功能强大,界面美观,还一直在更新.....

热门推荐

评论 12

评论前必须登录!

立即登录   注册

  1. #10

    测试测试!!

    小明6年前 (2017-11-27)国内网友谷歌浏览器 Windows 7 登录以回复 举报评论
  2. #9

    测试评论

    小明6年前 (2017-11-27)国内网友谷歌浏览器 Windows 7 登录以回复 举报评论
  3. #8

    学习了

    爱家资讯网-服务号6年前 (2017-11-27)国内网友谷歌浏览器 Windows 7 登录以回复 举报评论
  4. #7

    阅读博客获得的进步不亚于阅读一本书。

    套图网7年前 (2017-10-18)国内网友搜狗浏览器 Windows 7 登录以回复 举报评论
  5. #6

    人生短暂,开心每一天!

    沃八达7年前 (2017-09-25)国内网友搜狗浏览器 Windows 7 登录以回复 举报评论
  6. #5

    能让人来访的乐此不疲,这里就是有那么大的魅力!

    三五营销软件7年前 (2017-09-21)国内网友搜狗浏览器 Windows 7 登录以回复 举报评论
  7. #4

    没事就来转一转,每天多吃两碗饭!

    沃八达7年前 (2017-09-15)国内网友搜狗浏览器 Windows 7 登录以回复 举报评论
  8. #3

    好久没来,最近一直忙,过来转转~~

    雨巷博客7年前 (2017-09-14)国内网友谷歌浏览器 Mac OS X 10_12_6 登录以回复 举报评论
  9. #2

    这个博客不简单,看了还想接着看。

    快乐赚7年前 (2017-09-12)国内网友搜狗浏览器 Windows 7 登录以回复 举报评论
  10. #1

    这里来不够,看不够,玩不够!

    三五游戏7年前 (2017-09-07)国内网友搜狗浏览器 Windows 7 登录以回复 举报评论
    • 你好

      A北京现代-任磊7年前 (2017-10-17)未探索到的地区登录以回复 举报评论

本站承接WordPress主题开发,主题定制,功能开发

QQ咨询轻语云
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活

微信扫一扫关注
如已关注,请回复“登录”二字获取验证码