"jquery"找到 1篇
- 2010/02/17 茶屋优化 jqSlideShow
X 先 生 的 夏 日 茶 屋
冂
把安装方法记录一下，留作以后的使用备份。
这个图片展示是使用jquery+xml进行调用展示，原来是在WP中使用的，不过貌似自己在TC也能调用成功。
首先下载下面的程序文件：
首先修改js/jqslideshow文件，将URI处修改为自己的网站地址，var slideConfigURL处修改为自己网站的slide.xml文件地址（这里使用相对路径）
latest.zip1. 如何安装
首先解压缩并且上传所有文件到你的网站空间上。
然后在你的页面的HTML代码的<head>段里导入以下文件：
style/style.css
js/jquery.js
js/jqslideshow.js
例如, 如果你在使用WordPress博客程序，并且你把刚才解压的文件上传到了‘wp-content/jqslideshow'目录下。
那么你可以在你的页面中加入如下的代码：
<link href="/wp-content/jqslideshow/style/style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="/wp-content/jqslideshow/js/jquery.js"></script>
<script type="text/javascript" src="/wp-content/jqslideshow/js/jqslideshow.js"></script>
最后在你的页面里添加标签'<div id="jqSlideShow"></div>'到任何你想要的地方，添加过标签的地方就会出现这个幻灯浏览器
2. 如何配置
有两个部分需要你进行配置
首先是配置文件的路径。在文件'js/jqslideshow.js'里面，你可以在前面几行找到如下代码：
var slideConfigURL = '/wp-content/jqslideshow/slide.xml';
你需要将他设置为slide.xml文件所在的路径。
然后, 所有的选项都保存在'slide.xml'文件ilmian。你可以通过这个文件配置如下选项：
在 'configuration' 段:
* Fading time 图像淡入淡出的时间
* Sliding time 图像切换的时间
* Number of thumbs 导航条上缩略图的数量
* Thumb change time 导航条上缩略图移动速度
在 'slideItems' 段
* Link 每个图像的链接
* Image path 每个图像的路径
* Thumb path 每个缩略图路径
* Description 每个图像的描述
1. How to install
First, unzip and upload the files to you web site space.
Second, import the files below into the <head> segement of your page's code
style/style.css
js/jquery.js
js/jqslideshow.js
For example, if you using a WordPress weblog application and you put all the files you just unzipped at
'wp-content/jqslideshow'. Then you should add these code into your page:
<link href="/wp-content/jqslideshow/style/style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="/wp-content/jqslideshow/js/jquery.js"></script>
<script type="text/javascript" src="/wp-content/jqslideshow/js/jqslideshow.js"></script>
Third, put the tag '<div id="jqSlideShow"></div>' at any place you want in your page. After that this tag
will become the amazing slide show!
2. How to config
There are two parts you need to focus on.
Fisrt, the path configuration file. Look in the file 'js/jqslideshow.js', you will found the code below at
the first servral lines:
var slideConfigURL = '/wp-content/jqslideshow/slide.xml';
What you need to do is just to make sure the path is validate for the 'slide.xml' file.
Second, the options of this slide show are all saved in file 'slide.xml'. You can use this file to config
these options below:
In 'configuration' segement:
* Fading time The time of fading in and out
* Sliding time The time of the auto sliding
* Number of thumbs The number of thumbs on the navigator
* Thumb change time The thumb moving speed
In 'slideItems' segement
* Link The link of each picture
* Image path The path of each image
* Thumb path The path of each thumb image
* Description The description of each image
No Trackback :
No Comment