• 欢迎访问奇跡の海网站,本站不上传任何资源,所有资源均来自于网络,欢迎加入奇跡の海~! QQ群
  • 本站下载资源为网络上收集整理而来,并且以计算机技术研究交流为目的,版权归原作者所有,仅供大家参考,学习,不存在任何商业目的与商业用途.
  • 本站系统镜像均来自于官方原版,ed2k可视为P2P下载链接。所有操作系统默认均为试用版,如有正版密钥可以有效激活,本站不提供任何激活和相关服务。

WordPress 非插件实现 “Orbit” 幻灯片效果

WP插件 奇跡の海 1年前 (2017-04-29) 159次浏览 已收录 0个评论 扫描二维码

WordPress 非插件实现
这年头,几乎常规的网站都有幻灯片;没有反而显得不高档了。今天介绍一个图片滑动幻灯片 jQuery 插件,名字叫 Orbit,自定义功能很强大却是轻量级(仅仅 4kb 左右)。接下来介绍一下并提供个添加到 WordPress 主题的教程。

Orbit 简介

WordPress 非插件实现

Orbit 是一个设计良好并且容易使用的 jQuery 图片滑动幻灯片插件,它除了支持图片滚动切换展示外,还支持针对内容的滚动。插件的定制性相当高,它提供了多个参数的设置,通过设置你可以将它打造成完全符合你要求的样式。 Orbit 支持 IE7+, FF3.5+, Chrome、Safari 等浏览器,整个插件十分轻巧,仅仅 4kb 左右,需要 jQuery 1.5.1 版本以上。

插件官方主页: 点击前往

幻灯片 jQuery 插件 Orbit 集成到 WordPress 主题教程

看官方,Orbit 最新的版本(1.3.0)貌似集成到某个框架去了,我们可以使用旧版本(1.2.3)。

下载所需要的文件:官方下载    百度网盘

下载解压后,将这个文件夹重命名为 orbit,放到 WordPress 主题目录下(当然,你可以自定义路径,以下以此为准)。

一、确保你的 WordPress 主题已经加载 jQuery 库,注意是要 1.5.1 版本以上的。

二、首先将下面的代码放到主题的 header.php(具体哪里知道吧),这是加载 CSS、js 文件的代码

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/orbit/orbit-1.2.3.css">
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/orbit/jquery.orbit-1.2.3.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#featured').orbit();
});
</script>

三、HTML 部分。幻灯片一般都是在首页加载的,对于 WordPress 主题,可以通过 if 语气判断是否在首页来写入 html。

<?php if ( is_home() ){ ?>
<div id="featured">
<a href=”#” data-caption="#htmlCaption1"><img src="/1.jpg" /></a>
<a href=”#” data-caption="#htmlCaption2"><img src="/2.jpg" /></a>
<a href=”#” data-caption="#htmlCaption3"><img src="/3.jpg" /></a>
<a href=”#” data-caption="#htmlCaption4"><img src="/4.jpg" /></a>
<span class="orbit-caption" id="htmlCaption1">title1</span>
<span class="orbit-caption" id="htmlCaption2">title2</span>
<span class="orbit-caption" id="htmlCaption3">title3</span>
<span class="orbit-caption" id="htmlCaption4">title4</span>
</div>
<?php } ?>

对于上面的代码,你需要做的很多。比如再添加一个幻灯片、比如链接的 url、图片的路径等等,这里仅仅算是一个演示。

为了适合于你的主题,你可以通过 orbit-1.2.3.css 修改相关代码自定义样式,比如宽高神马的。

而对于幻灯片的相关参数设置,你可以去查阅官方文档自行解决。

折腾这个需要你懂 html、CSS,javascript 或者 jquery 略懂一点就可以了,~jquery 插件就是方便,不一定要你看懂代码,会用就行。


版权声明:本站所有文章和资源使用BY-NC-SA协议授权发布 , 转载应当以相同方式注明文章来自“SeaOMC.COM->WordPress 非插件实现 “Orbit” 幻灯片效果!在下边可以分享本文哦!
喜欢 (0)
[]
分享 (0)
奇跡の海
关于作者:
一个WordPress菜鸟!
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址