13Aug

利用Lightbox2实现图片缩放功能(非插件)

时间: 2013-8-13 分类: WordPress教程 作者: 鱼小委 3032 次浏览

TAGS:

要实现这个功能的图片插件有很多,虽然使用插件非常方便,但是有时满足不了一些特定需求,对于不是很懂代码的人来说,修改起来也是比较麻烦的。

Lightbox2是一个简单小巧的javascript库,用它就能轻松实现图片的基本缩放功能,满足一些基本的需求,如果你的图片比较多,那建议你还是用插件,布置起来不会很繁琐。

下面以本主题为例来阐述如何运用Lightbox2

首先下载所需文件:
LightBox V2.6 点击下载
下载后解压文件,继续以下步骤:

step1:加载jS文件

1.将js文件中的jquery-1.10.2.min.jslightbox-2.6.min.js文件上传到你的主题目录中的js文件夹下。(一般主题中都会有js整个文件夹)
2.打开主题中的header.php文件,添加以下代码:(具体加载的位置,自己找你的header.php文件下肯定有类似这样的语句,加载在下面即可。)

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/lightbox-2.6.min.js"></script>
step2:加载CSS文件

1.将CSS文件夹连同其中的文件整个上传到你的主题目录中,或者你在你的主题目录中新建一个CSS文件夹,上传里面的两个文件即可。
2.同样往主题中的header.php文件中,添加以下代码:

<link href="<?php bloginfo('template_url'); ?>/css/lightbox.css" rel="stylesheet" />
<link href="<?php bloginfo('template_url'); ?>/css/screen.css" rel="stylesheet" />

本文作者:

热衷于学习基于WordPress平台的网站设计与开发,狂热的IT工作者,热爱生活。我要投稿

喜欢我们的文章请您与朋友分享:

更多

相关文章:

Comments

目前没有评论. 你将成为第一个吃沙螃蟹的人!

Comments
发表评论

电子邮件地址不会被公开。*标记为必填选项

  • 正确格式为: http://www.huangjianwei.com.cn

按 [ Ctrl+Enter ] 键直接提交

返回顶部