分享各种网络资源
是我乃至整个互联网的精髓所在
 您目前所在位置: 站点首页 » 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;无需<a href="http://www.banyuner.com/%e6%8f%92%e4%bb%b6" title="查看所有关于 插件 的文章" 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;a$1href=$2$3.$4$5 class="highslide-image" onclick="return hs.expand(this);"$6&gt;$7&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评论开启lazy load模式

    WordPress评论开启lazy load模式

    前段时间将站点几乎所有的图片都起用了lazyload模式,目的就是有效的节省带宽,降低服务器负荷,同时也可以增加用户体验。

    点击查看
  • WordPress文章段落间插入广告

    WordPress文章段落间插入广告

    很久之前就已经在留意这个功能了,但是一直没有找到相关的解决办法,今天我算是找到了这个相关代码。使用这个功能对于我们宣 ...

    点击查看
  • WordPress如何一键克隆文章或者页面

    WordPress如何一键克隆文章或者页面

    有些时候,我们需要重复发布一样模板的文章的时候,我们需要重复输入一样的内容,那么这必然降低了工作效率,想要提高工作效 ...

    点击查看
  • WordPress检查站点死链以及重定向

    WordPress检查站点死链以及重定向

    现在做站点的站长基本都知道站点一旦有死链的话,那么第一反应就是及时向百度提交死链,防止SEO方面受到影响,但是很多时候 ...

    点击查看
  • WordPress前台显示站点有多少注册用户

    WordPress前台显示站点有多少注册用户

    虽然我的站点目前已经关闭了注册,所有已经注册过的用户已经清理完毕了,这里说声抱歉。那么今天这个文章就是给大家一个方法 ...

    点击查看
  • WordPress避免手残导致文章意外发布

    WordPress避免手残导致文章意外发布

    有些时候,我们编辑好了文章,但是我们可能并不想发布,但是很多时候,我们就是手残,也就是误发布了,这种事情可能对于博客 ...

    点击查看
  • AddThis,一个神奇的分享插件站点

    AddThis,一个神奇的分享插件站点

    现在看到好的文章,多半都是想要跟别人分享或者记录下来,那么分享的时候我们可能会想到很多分享的方法,就像我的站点,目前 ...

    点击查看
  • WordPress前端用户中心插件推荐-userpro

    WordPress前端用户中心插件推荐-userpro

    今天一个群友说想要定制一个用户中心的功能,我个人方面也是想要一个自己设计的,但是能力有限,并且不是很喜欢DUX的用户中 ...

    点击查看
  • WordPress投票系统插件-WP-Polls

    WordPress投票系统插件-WP-Polls

    关于投票插件我很早就想使用了,但是说实话,插件这个东西,有必要使用就是用,如果没有必要使用,那么就完全没有必要使用了。

    点击查看
  • 给WordPress站点内注册的所有用户群发邮件

    给WordPress站点内注册的所有用户群发邮件

    有些时候,我们需要批量告知用户一些规则或者最近更新的事项,但是我们不可能一个个的去告知,也不方便直接发一个通告,那么 ...

    点击查看
  • WordPress后台登陆添加安全问题

    WordPress后台登陆添加安全问题

    现在WordPress的安全是大家比较关注的问题了,有些时候我们后台总是会被机器扫描,这些我们并不担心,只要我们的密码够强硬 ...

    点击查看
  • 如何导出WordPress中所有的文章链接

    如何导出WordPress中所有的文章链接

    前段时间在贴吧看到有人在寻找这个方法,但是我当时的回复是可能不会存在这个方法,但是今天就被打脸了,因为确实是有这样的 ...

    点击查看

  目前有 0 条评论 其中:访客: 0 条, 博主: 0 条

WordPress代码实现Auto-highslide插件功能
评分: 7 + 0 =
  • 昵称 (必填)  
  • 邮箱 (必填)
  • 网址 (选填)