当前位置:
首页 > wordpress插件 > WordPress非插件实现Orbit幻灯片效果

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

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

Orbit 简介
WordPress非插件实现Orbit幻灯片效果
orbit-jquery-image-slider

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" alt="WordPress非插件实现Orbit幻灯片效果" /></a>
<a href=”#” data-caption="#htmlCaption2"><img src="/2.jpg" alt="WordPress非插件实现Orbit幻灯片效果" /></a>
<a href=”#” data-caption="#htmlCaption3"><img src="/3.jpg" alt="WordPress非插件实现Orbit幻灯片效果" /></a>
<a href=”#” data-caption="#htmlCaption4"><img src="/4.jpg" alt="WordPress非插件实现Orbit幻灯片效果" /></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 插件就是方便,不一定要你看懂代码,会用就行。

原文:http://www.timle.cn/orbit-jquery-image-slider.html


WordPress非插件实现Orbit幻灯片效果:等您坐沙发呢!

发表评论

表情
还能输入210个字
切换注册

登录

忘记密码 ?

切换登录

注册