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 数组的 uniq 方法
Jan 23 Javascript
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
Aug 09 Javascript
网络图片延迟加载实现代码 超越jquery控件
Mar 27 Javascript
修改jQuery Validation里默认的验证方法
Feb 14 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
Mar 04 Javascript
js如何判断用户是否是用微信浏览器
Jun 05 Javascript
Juery解决tablesorter中文排序和字符范围的方法
May 06 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
Sep 12 Javascript
移动端触摸滑动插件swiper使用方法详解
Aug 11 Javascript
npm 常用命令详解(小结)
Jan 17 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
Apr 23 Javascript
Vue如何实现验证码输入交互
Dec 07 Vue.js
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
加强版phplib的DB类
2008/03/31 PHP
CI框架源码阅读,系统常量文件constants.php的配置
2013/02/28 PHP
返回页面顶部top按钮通过锚点实现(自写)
2013/08/30 Javascript
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
javascript实现延时显示提示框特效代码
2016/04/27 Javascript
如何利用JSHint减少JavaScript的错误
2016/08/23 Javascript
Jquery遍历select option和添加移除option的实现方法
2016/08/26 Javascript
微信小程序 Flex布局详解
2016/10/09 Javascript
JavaScript 实现的checkbox经典实例分享
2016/10/16 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
微信小程序如何获取用户信息
2018/01/26 Javascript
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
对mac下nodejs 更新到最新版本的最新方法(推荐)
2018/05/17 NodeJs
基于Three.js实现360度全景图片
2018/12/30 Javascript
Vuex mutitons和actions初使用详解
2019/03/04 Javascript
js实现跟随鼠标移动的小球
2019/08/26 Javascript
vue移动端模态框(可传参)的实现
2019/11/20 Javascript
通过C++学习Python
2015/01/20 Python
Python Socket使用实例
2017/12/18 Python
django 2.0更新的10条注意事项总结
2018/01/05 Python
对Python3.6 IDLE常用快捷键介绍
2018/07/16 Python
Django Rest framework频率原理与限制
2019/07/26 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
TensorFlow实现打印每一层的输出
2020/01/21 Python
如何在Python 游戏中模拟引力
2020/03/27 Python
Python collections.defaultdict模块用法详解
2020/06/18 Python
python实现文件+参数发送request的实例代码
2021/01/05 Python
python 将Excel转Word的示例
2021/03/02 Python
HTML5单选框、复选框、下拉菜单、文本域的实现代码
2020/12/01 HTML / CSS
软件测试有哪些?什么是配置项?
2012/02/12 面试题
党的群众路线教育实践活动对照检查材料思想汇报(党员篇)
2014/09/25 职场文书
新教师2015年度工作总结
2015/07/22 职场文书
学校隐患排查制度
2015/08/05 职场文书
为什么node.js不适合大型项目
2021/04/28 Javascript
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android