分享各种网络资源
是我乃至整个互联网的精髓所在
最新消息:站点开启被动注册模式,详情点击这里了解
 您目前所在位置: 站点首页 » WordPress » 代码 » WordPress代码实现Auto-highslide插件功能
+

WordPress代码实现Auto-highslide插件功能

Auto-highslide插件是每个博客基本都会用到的,其功能就是点击图片会缩放全屏,并且可以以幻灯片的形式显示你本页所有图片,效果可以看下图:

WordPress代码实现Auto-highslide插件功能-BanYuner

效果就是上面的图那样的,点击图片,图片本身会变大,全屏显示,图片底部会出现左右的按钮.
这个插件可以用到多图的站点,这样的话,用户想要看图片的话,就不用一直往下翻页,而是直接一张张的看就可以了.

说了这么多,下面开始说一下怎么实现:

首先我们需要用到的代码有两段下面:

第一段代码如下:

<?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;?>

此段代码我们要求是放在你的主题目录下的Footer.php文件中,最好是放在文件的最末尾部分

第二段代码如下:

/**
* WordPress集成Auto-highslide图片灯箱(按需加载&无需插件)
* 文章地址:http://www.weeiy.com/wordpress-auto-highslide-code.html
*/
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;
}

此段代码是要求放在主题目录下的function.php中的,放置的位置是最末尾处,如果放置在最末尾处没有效果的话,那么请将其放在最后一个?>之前尝试一下

接下来我们还需要最后一个步骤,就是下载一个文件将其通过FTP软件放置在你当前主题目录下即可,文件下载地址:

http://pan.baidu.com/s/1o60702e

注意:代码资源来自:http://www.weeiy.com/wordpress-auto-highslide-code.html ?如果在使用中存在什么问题,大家可以在此留言,我尽力帮助大家,另外,貌似这个插件对中文的图片支持不好,我上传了还有中文名字的图片之后,点击之后并不会出现这个插件该有的效果,这个大家自行酌情考虑
关注我们 打赏 分享此文
微信扫码,关注我们
扫码,支持我
WordPress代码实现Auto-highslide插件功能
支付宝(点击图片切换)
扫码,支持我
WordPress代码实现Auto-highslide插件功能
微信(点击图片切换)
扫码,手机看
WordPress代码实现Auto-highslide插件功能
匿名

个人评价:┃草根博主┃站点无技术含量┃文章内容不够吸引人┃转载内容随处可见┃资源均来自网络┃ 分享是我的宗旨,也是这个站点存在意义,分享的东西你现在可能不需要,但是我相信只要在某个时间你需要的时候能在这里找到,那么我就是成功的

相关推荐

  • WordPress文章内容主体后添加广告位

    WordPress文章内容主体后添加广告位

    现在做站全凭兴趣的已经很少了,一个站点到了最后肯定是希望盈利来维持服务器的发展,但是有些站长可能对于代码根本不熟悉,那么这里就提供一种非常简...

    点击查看
  • 如何显示WordPress中的评论总数

    如何显示WordPress中的评论总数

    这个方面应该是站点的小功能了,但是我相信很多人还是可以使用到的,所以这里还是简单的分享一下吧,希望对于那些小白或者又需要的用户有帮助。 站点...

    点击查看
  • WordPress如何调用APlayer音乐播放器

    WordPress如何调用APlayer音乐播放器

    HTML结构 相关设置 调用功能 昨天无意中看到了这个播放器,我个人觉得这个播放器非常符合自己的需求,那么我就毫不犹豫的使用起来了,功能实现...

    点击查看
WordPress代码实现Auto-highslide插件功能
5 + 0 =
  • 昵称 (必填)  
  • 邮箱 (必填)
  • 网址 (选填)