• 国庆快乐,放假三天

  • 准备增加一个免登录支付功能

  • 微信扫码登录功能已经 ok 了

  • 主题更新一下,修复了头像挂掉的问题

  • 后羿更新网站文章可能不会那么闲了

  • 不得不说,美国贴吧的界面真是难看到死

  • 看到网上新闻美国的贴吧将成为中国公司

  • 推送试试

  • 睡觉之前测试一下

  • 发现了一个非常不错的插件

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

WordPress 云落 5年前 (2015-02-01) 903次浏览 4个评论
文章目录[隐藏]

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

Auto-highslide: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 代码也有了 :lol: :lol: :lol:

文件下载

文件下载
-- 完 --
Auto-highslide:WordPress图片灯箱代码方法
扫码订阅,第一时间获得更新
微信扫码二维码,订阅我们网站的动态,另外不定时发送 WordPress 小技巧,你可以随时退订,欢迎订阅哦~

极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:Auto-highslide:WordPress图片灯箱代码方法

极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:Auto-highslide:WordPress图片灯箱代码方法
喜欢 (9)
云落
关于作者:
无折腾,不生活,我是一个WordPress菜鸟,一个玩淘宝的卖家,欢迎你认识我,我是云落!
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(4)个小伙伴在吐槽
  1. 云落
    :oops: 测试下
    云落2015-02-27 13:45 回复 Windows 7 | Chrome 38.0.2125.122
  2. 看来我有必要强迫症一下,看看兼容性,如果好就把图片站的暗箱换掉
    幻杀博客2015-02-17 21:58 回复 Windows 10 | Firefox浏览器 35.0
    • 云落
      我正常的是使用fancybox,如果这个不行再用文章说的autohighslide
      云落2015-02-18 00:32 回复 Android 4.4.4 | WordPress客户端 android
  3. 其实JS冲突很好解决,fancybox单独加载了一份jquery,不让他加载就行了
    同盟源2015-02-01 16:58 回复 Windows 7 | Chrome 38.0.2125.122