幻灯片jQuery插件Orbit 介绍(附添加到WordPress教程)

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

Orbit 简介

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=”#”><img src="/1.jpg" /></a> <a href=”#”><img src="/2.jpg" /></a> <a href=”#”><img src="/3.jpg" /></a> <a href=”#”><img src="/4.jpg" /></a> </div> <?php } ?>

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

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

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏coding for love

浏览器加载解析渲染机制的全面解析

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

1111
来自专栏华仔的技术笔记

Xcode安装插件

36511
来自专栏向治洪

React Native调试心得

在做React Native开发时,少不了的需要对React Native程序进行调试。调试程序是每一位开发者的基本功,高效的调试不仅能提高开发效率,也能降低B...

2557
来自专栏mwangblog

git标签

1443
来自专栏一个会写诗的程序员的博客

功能强大的jQuery图片查看器插件

2981
来自专栏黑泽君的专栏

Win10系统怎样让图片的打开方式为照片查看器?

在Win10系统中有一个最不方便的地方就是图片的打开方式没有照片查看器,如果想恢复传统的照片查看器该怎么操作呢?

1042
来自专栏前端人人

React多页面应用5(webpack4 多页面自动化生成多入口文件)

本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React多页面应用1(webpack4 开发环境搭建...

1K3
来自专栏小樱的经验随笔

基于Windows下python3.4.1IDLE常用快捷键小结

安装IDLE后鼠标右键点击*.py 文件,可以看到Edit with IDLE 选择这个可以直接打开编辑器。 IDLE默认不能显示行号,使用ALT+G 跳到对应...

3966
来自专栏运维一切

kubernetes dashboard 纯docker部署

访问地址 https://192.168.70.206 私钥和自有签名 https://raw.githubusercontent.com/michaellia...

1143
来自专栏lgp20151222

Eclipse 一直不停 building workspace完美解决总结

一、产生这个问题的原因多种 1、自动升级 2、未正确关闭  3、maven下载lib挂起 等..

1K1

扫码关注云+社区

领取腾讯云代金券