WordPress 照片lightbox效果的运用几点


Posted in Javascript onJune 22, 2009

如果你的网站上已经使用了lightbox这类效果,或者下面的几点运用经验你也会觉合适(前提是使用JQuery实现)。
1. 指定哪些条件下运用Lightbox效果
在网站的js文件中添加如下语句:

$(function() { 
$('a[@rel*=lightbox]').lightBox(); 
$('.gallery a').lightBox(); 
});

这样就决定只有在链接中添加“rel=lightbox”后,该链接才会出现lightbox效果;第二行中的'.gallery a'则是针对WordPress中原生相册,添加该句后,相册中的图片也会出现lightbox的效果了。
2. 自动添加rel=lightbox属性
因为在上述定义中只有带“rel=lightbox”的链接才会有效果,一般我们是需要对每个上传图片都手动添加“rel=lightbox”这一句。但这样显得麻烦,我们可以让它自动针对带链接的图片自动添加。
首先为每一个带图片的p段落自动添加一个样式:
$("#content p:has(img)").addClass("imgbg");
比如上面一句就是指定在#content这个区域内,只要段落中带有img的话,则添加样式“imgbg”,使其原无样式的p段落变为<p class="imgbg">的带样式了;
然后对<p class="imgbg">这一段中的链接自动添加“rel=lightbox”属性:
$(".imgbg a").attr({ 
rel: "lightbox" 
});

经过上面两部步,所有在文中带链接的图片就会自动执行lightbox的效果了。
3. 选择性地加载lightbox
我们没有必要全站加载lightbox的效果。一般来说我们是在单独的文章页面中才用到这种效果。所以我们可以把lightbox的js代码单独出来,然后在WordPress中header.php中这样设置:
<?php if ( is_single() ) : ?> 
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/lightbox.js"></script> 
<?php endif ?>

更进一步,如果你想对只有照片的文章才执行该效果,则你可以准确地只为标有“照片”标签的文章才加载lightbox,设置改为:
<?php if ( is_single() && has_tag('照片') ) : ?> 
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/lightbox.js.php"></script> 
<?php endif ?>

上面几点就是我对lightbox的运用了,希望对各位有所帮助啦。
Javascript 相关文章推荐
js 去掉空格实例 Trim() LTrim() RTrim()
Jan 07 Javascript
Javascript玩转继承(二)
May 08 Javascript
JS实现控制表格行文本对齐的方法
Mar 30 Javascript
TypeScript具有的几个不同特质
Apr 07 Javascript
jQuery中dom元素上绑定的事件详解
Apr 24 Javascript
Javascript编程之继承实例汇总
Nov 28 Javascript
javascript实现瀑布流加载图片原理
Feb 02 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
May 24 Javascript
web 前端常用组件之Layer弹出层组件
Sep 22 Javascript
JavaScript学习教程之cookie与webstorage
Jun 23 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
详解TypeScript的基础类型
Feb 18 Javascript
WordPress JQuery处理沙发头像
Jun 22 #Javascript
JQuery 前台切换网站的样式实现
Jun 22 #Javascript
利用JQuery为搜索栏增加tag提示
Jun 22 #Javascript
web 页面分页打印的实现
Jun 22 #Javascript
利用WebBrowser彻底解决Web打印问题(包括后台打印)
Jun 22 #Javascript
实现超用户体验 table排序javascript实现代码
Jun 22 #Javascript
js 单引号 传递方法
Jun 22 #Javascript
You might like
用php过滤危险html代码的函数
2008/07/22 PHP
php做下载文件的实现代码及文件名中乱码解决方法
2011/02/03 PHP
PHP实现的英文名字全拼随机排号脚本
2014/07/04 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
thinkPHP5.0框架命名空间详解
2017/03/18 PHP
tp5 sum某个字段相加得到总数的例子
2019/10/18 PHP
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
2009/04/01 Javascript
javascript string字符串优化问题
2011/07/31 Javascript
ie6下png图片背景不透明的解决办法使用js实现
2013/01/11 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
2015/12/10 Javascript
基于Vue.js实现数字拼图游戏
2016/08/02 Javascript
最细致的vue.js基础语法 值得收藏!
2016/11/03 Javascript
微信小程序  wx.request合法域名配置详解
2016/11/23 Javascript
javascript判断回文数详解及实现代码
2017/02/03 Javascript
Angular2中如何使用ngx-translate进行国际化
2017/05/21 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
2018/04/01 Javascript
使用webpack打包后的vue项目如何正确运行(express)
2018/10/26 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
2020/03/31 Javascript
详解react组件通讯方式(多种)
2020/05/06 Javascript
JS实现手风琴特效
2020/11/08 Javascript
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
[43:43]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第三场 11.29
2020/12/02 DOTA
Python实现的一个找零钱的小程序代码分享
2014/08/25 Python
python多线程用法实例详解
2015/01/15 Python
10款最好的Web开发的 Python 框架
2015/03/18 Python
解密Python中的描述符(descriptor)
2015/06/03 Python
python批量制作雷达图的实现方法
2016/07/26 Python
python中的格式化输出用法总结
2016/07/28 Python
使用Python从零开始撸一个区块链
2018/03/14 Python
python 字符串只保留汉字的方法
2018/11/16 Python
python 比较字典value的最大值的几种方法
2020/04/17 Python
电厂职工自我鉴定
2014/02/20 职场文书
开学典礼决心书
2014/03/11 职场文书
创业计划书之川味火锅店
2019/09/02 职场文书
Golang实现AES对称加密的过程详解
2021/05/20 Golang