分享各种网络资源
是我乃至整个互联网的精髓所在
 您目前所在位置: 站点首页 » WordPress » 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图片灯箱(按需加载&amp;无需 <svg class="icon" aria-hidden="true"><use xlink:href="#icon-youhuibiaoqian"></use></svg> <a href="http://www.banyuner.com/%e6%8f%92%e4%bb%b6" title="点击查看其余 84 篇关于 插件 的文章" target="_blank">插件</a> )
    * 文章地址:http://www.weeiy.com/wordpress-auto-highslide-code.html
    */
    add_filter('the_content', 'addhighslideclass_replace');
    function addhighslideclass_replace ($content)
    {   global $post;
     $pattern = "/&lt;a(.*?)href=('|\")([^&gt;]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)&gt;(.*?)&lt;\/a&gt;/i";
        $replacement = '&lt;ahref=. class="highslide-image" onclick="return hs.expand(this);"&gt;&lt;/a&gt;';
        $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代码实现Auto-highslide插件功能
    6 + 2 =