wordpress中使用jQuery来预览图片的插件很多,特别是lightbox,相信很多人都用过.
这儿介绍下怎样在Habari中使用这项功能.这儿以ThickBox和ShadowBox这两个通用插件为例.并且只实现最简单的图片预览功能.
先介绍ThickBox的使用方法:
1)下载ThickBox,点击进入官网.我们这主要使用(thickbox-compressed.js , thickbox.css ,jQuery.js)这三个文件.
2)在网页模板的目录下建立thickbox文件夹,上传这三个文件和附带一些图片文件进此文件夹.
3)修改模板的文件header.php,一般此文件头部<head>和</head>间都会有<link rel="stylesheet" ...> 这样的代码,我们要加入的代码和这类似,所以也写在这地方,内容是:
- <script type="text/javascript" src="<?php echo $this->theme_url;
- ?>/thickbox/jquery.js"></script>
- <script type="text/javascript" src="<?php echo $this->theme_url;
- ?>/thickbox/thickbox-compressed.js"></script>
- <link rel="stylesheet" href="<?php echo $this->theme_url;
- ?>/thickbox/thickbox.css" type="text/css" media="screen" />
4)完成工作了,以后只要在图片的链接代码里加上class="thickbox"就可以了.比如:
<a title="图片的标题" class="thickbox" href="链接的图片地址" >< img src="显示的图片地址" /></a>
ShadowBox与ThickBox类似
1)下载shadowbox,点击进入官网.我们这主要使用(shadowbox.css , shadowbox.js)两个文件.
2)在网页模板的目录下建立shadowbox文件夹,上传这两个文件和附带一些图片文件进此文件夹.
3)修改模板的文件header.php,一般此文件头部<head>和</head>间都会有<link rel="stylesheet" ...> 这样的代码,我们要加入的代码和这类似,所以也写在这地方,内容是:
- <link rel="stylesheet" type="text/css"
- href="<?php echo $this->theme_url; ?>/shadowbox/shadowbox.css">
- <script type="text/javascript"
- src="<?php echo $this->theme_url; ?>/shadowbox/shadowbox.js"></script>
- <script type="text/javascript">
- Shadowbox.init();
- </script>
4)完成工作了,以后只要在图片的链接代码里加上rel="shadowbox"就可以了.比如:
<a title="图片的标题" rel="shadowbox" href="链接的图片地址" >< img src="显示的图片地址" /></a>
我这现在使用的是shadowbox,放张图示范下,就是这样的效果:
Tag Cloud