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 相关文章推荐
Javascript延迟执行实现方法(setTimeout)
Dec 30 Javascript
js实时监听文本框状态的方法
Apr 26 Javascript
Javascript的表单验证长度
Mar 16 Javascript
详解微信第三方小程序代开发
Jun 23 Javascript
vue实现简单的星级评分组件源码
Nov 16 Javascript
如何检查一个对象是否为空
Apr 11 Javascript
Vue项目中使用jquery的简单方法
May 16 jQuery
Vue项目实现简单的权限控制管理功能
Jul 17 Javascript
node.js事件轮询机制原理知识点
Dec 22 Javascript
小程序实现多个选项卡切换
Jun 19 Javascript
eslint+prettier统一代码风格的实现方法
Jul 22 Javascript
浅谈vue中$bus的使用和涉及到的问题
Jul 28 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程序61条面向对象分析设计的经验小结
2008/11/12 PHP
PHP编码规范的深入探讨
2013/06/06 PHP
php中数字、字符与对象判断函数用法实例
2014/11/26 PHP
PHP 实现类似js中alert() 提示框
2015/03/18 PHP
PHP实现随机生成水印图片功能
2017/03/22 PHP
php mysql数据库操作类(实例讲解)
2017/08/06 PHP
thinkphp5框架前后端分离项目实现分页功能的方法分析
2019/10/08 PHP
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
超简单JS二级、多级联动的简单实例
2014/02/18 Javascript
让IE8浏览器支持function.bind()方法
2014/10/16 Javascript
JavaScript分析、压缩工具JavaScript Analyser
2014/12/31 Javascript
JavaScript错误处理
2015/02/03 Javascript
了解Javascript的模块化开发
2015/03/02 Javascript
jquery实现简单的二级导航下拉菜单效果
2015/09/07 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
jquery事件的ready()方法使用详解
2015/11/11 Javascript
js+html5实现canvas绘制椭圆形图案的方法
2016/05/21 Javascript
Vue.js -- 过滤器使用总结
2017/02/18 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
浅谈vuex 闲置状态重置方案
2018/01/04 Javascript
js实现上传并压缩图片效果
2018/01/10 Javascript
uploadify插件实现多个图片上传并预览
2019/09/30 Javascript
[11:12]2018DOTA2国际邀请赛寻真——绿色长城OpTic
2018/08/10 DOTA
[04:03][TI9趣味短片] 小鸽子茶话会
2019/08/20 DOTA
python网络编程学习笔记(四):域名系统
2014/06/09 Python
Python网络编程中urllib2模块的用法总结
2016/07/12 Python
Python随机读取文件实现实例
2017/05/25 Python
Python实现分数序列求和
2020/02/25 Python
Python中的None与 NULL(即空字符)的区别详解
2020/09/24 Python
DVF官方网站:美国时装界尊尚品牌
2017/08/29 全球购物
Veronica Beard官网:在酷、经典和别致之间找到了平衡
2018/01/11 全球购物
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
英国医生在线预约:Top Doctors
2019/10/30 全球购物
英文版餐饮业求职信
2013/10/18 职场文书
2015年幼儿园新年寄语
2014/12/08 职场文书
介绍长城的导游词
2015/01/30 职场文书