WordPress 照片lightbox效果的运用几点

如果你的网站上已经使用了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的运用了，希望对各位有所帮助啦。

赞 (0)

相关推荐

  • WordPress在window2003 IIS ISAPI ReWrite下的URL规则

    为了便于搜索引擎抓取(换句话就是假静态),下面是URL ReWrite的规则,效果看我的chinadigger的链接地址.我目前的Rewrite规则:  复制代码 代码如下: [ISAPI_Rewrite] # 3600 = 1 hour  CacheClockRate 3600 RepeatLimit 32 # Protect httpd.ini and httpd.parse.errors files  # from accessing through HTTP  # WordPress r

  • Wordpress php 分页代码

    Wordpress php 分页代码

    效果: 将下面的函数放到你的主题的 functions.php 文件中: 复制代码 代码如下: function theme_echo_pagenavi(){ global $request, $posts_per_page, $wpdb, $paged; $maxButtonCount = 9; //显示的最多链接数目 if (!is_single()) { if(!is_category()) { preg_match('#FROM\s(.*)\sORDER BY#siU', $reques

  • Wordpress 相册插件 NextGEN-Gallery 添加目录将中文转为拼音的解决办法

    NextGEN Gallery是Wordpress中著名的相册插件,遗憾的是不支持中文等unicode字符,本文将介绍如何将目录转换为拼音(添加图集时). 以NextGEN 1.6.2为例: "新增图集/图片"的路径是:admin.php?page=nggallery-add-gallery,我们在nextgen-gallery/admin/admin.php中查找"nggallery-add-gallery", 复制代码 代码如下: switch ($_GET['

  • 8个出色的WordPress SEO插件收集

    8个出色的WordPress SEO插件收集

    wordpress是当前网终上最的行的内容发布工具之一.它拥有成千上万的免费主题和插件,帮助新手方便快捷地将内容发布到网络上.但是很多时候仅仅将内容发存到网终上是不够的,吸引用户来你的网站是一门科学也是一门艺术,当然wordpress也有许多插件帮我们改善这一点.以下是几个一流的SEO插件列表,它们可以帮助我们提高WordPress站点在搜索引擎中的排名. 1. SEO Rank Reporter 它可以跟踪站点内特定的关键词,并每3天生成一个很美观的图形化的报表.当某个关键词在搜索引擎排名有大

  • WordPress判断用户是否登录的代码

    is_user_logged_in() 说明 根据当前访问者是否登录返回布尔值true或false. 参数 该函数不接受任何参数. 用法 复制代码 代码如下: <?php if ( is_user_logged_in() ) { ... } ?> 示例 根据当前访问者的登录情况,使用is_user_logged_in()函数在主题文件中展示不同输出结果. 复制代码 代码如下: <?php if ( is_user_logged_in() ) { echo 'Welcome, regist

  • wordpress之wp-settings.php

    接上面开始wp-config.php,wp-settings.php这两个文件,wp-config.php故名恩意配置文件所以没什么可解释的. wp-settings.php最上在的函数wp_unregister_GLOBALS用来当register_globals设置为on时注销自动产生的全局变量,register_globals现在是强烈建议为off的,因为有安全问题. 从28行起到49行都是为了处理不同运行环境可能产生的问题,wp的兼容性问题处理的很周道.如果 是做开源软件这样是很有必要的

  • Wordpress ThickBox 点击图片显示下一张图的修改方法

    Wordpress ThickBox 点击图片显示下一张图的修改方法

    以wordpress 3.0.2为例,打开 wp-includes/js/thickbox/thickbox.js,找到以下代码行: 复制代码 代码如下: jQuery("#TB_window").append("<a href='' id='TB_ImageOff' title='"+thickboxL10n.close+"'><img id='TB_Image' src='"+url+"' width='"

  • 通过Ajax手动解决WordPress WP-PostViews不计数的问题

    通过Ajax手动解决WordPress WP-PostViews不计数的问题

    某个网站开启了Memcached,并安装了WP-PostViews,但是不知道咋滴文章的浏览计数不起作用了. 在经过一番摸索之后,发现WP-PostViews是通过ajax发送请求来计数的.再一看出问题的那个网站,根本就发送这个请求. 在经过一番wordpress后台设置和插件摸索后,还是没找到原因. 无奈,使出最终杀手锏,自己手动添加这个请求的script,添加到页面底部,代码如下: <?php if (is_singular()) : ?> <!-- ajax post view -

  • WordPress 照片lightbox效果的运用几点

    如果你的网站上已经使用了lightbox这类效果,或者下面的几点运用经验你也会觉合适(前提是使用JQuery实现). 1. 指定哪些条件下运用Lightbox效果 在网站的js文件中添加如下语句: 复制代码 代码如下: $(function() { $('a[@rel*=lightbox]').lightBox(); $('.gallery a').lightBox(); }); 这样就决定只有在链接中添加"rel=lightbox"后,该链接才会出现lightbox效果:第二行中的'

  • 30个最佳jQuery Lightbox效果插件分享

    30个最佳jQuery Lightbox效果插件分享

    Web开发者们模仿 Lightbox 开发了各种各样的图片浏览插件,有基于 jQuery 的,有基于 Prototype 的,也有使用原生 JavaScript 写的.今天,本文要与大家分享的是30个最佳 jQuery Lightbox 效果插件. 1.jQuery LightBox 在线示例 2.Lightbox2 在线示例 3.FancyBox 在线示例 4.LightWindow v2.0 在线示例 5.Colorbox Lightbox Plugin 在线示例 6.FaceBox 在线示

  • jQuery照片伸缩效果不影响其他元素的布局

    jQuery照片伸缩效果不影响其他元素的布局

    之前在网上看到这种特效,无奈当时没有收藏网址,导致后来一度不知道这个特效是怎么实现的.今天特意在网上搜罗了一下,果然功夫不负有心人,被我找到了. 我也努力过自己尝试着写: 但只是单纯的图片放大,而且还影响了图片周围的元素的布局(因为图片放大占据了更大的空间). 后来发现要灵活巧妙的运用overflow和position这两个属性,就能达到目的.其实我觉得CSS(CSS3)中的overflow和position(顺带的top,bottom,left,right)简直是做网页特效无解的组合,当然还是

  • lightbox 效果 lbs窗口在本地打开

    最近在 LBS 交流论坛找到一个很 cool 的页面特效.就是Lightbox.用该方法处理过的图片,预览效果很 cool 呀.大家可以点击下面的图试用一下.具体方法在后面首先请将所提供的压缩包内所有图片文件上传到你的空间上,比如:images. 然后修改压缩包内的 lightbox.js 文件,把 38,39 两行的图片地址修改为你刚刚上传至的图片地址,比如:images/close.gif 和images/loading.gif .并把修改后的 lightbox.js 文件上传到你的博客根目

  • JavaCV实现照片马赛克效果

    JavaCV实现照片马赛克效果

    目录 前言 准备工作 代码实现 完整代码 前言 青空最近在逛一些社区的时候发现了有很多图片是像素图,感觉挺好玩的.正巧最近自己在学习JavaCV,所以在这里给大家演示一下如何使用JavaCV来处理像素图. 像素图其实有点类似于类似于打马赛克的功能.通过像素的变化,演示一个像素画的功能.像素画在 NFT 中特别的流行. 准备工作 我们先引入 JavaCV 的依赖库 <dependency> <groupId>org.bytedeco</groupId> <artif

  • 非jQuery实现照片散落桌子上，单击放大的LightBox效果

    非jQuery实现照片散落桌子上，单击放大的LightBox效果

    效果图如下 Demo地址http://xueduany.github.io/KitJs/KitJs/demo/Lightbox-Gallery/demo.html 实现原理很简单,基本的html如下 复制代码 代码如下: <div id="gallery">             <div class="item">                 <a class="kitLightBox" href="

  • Android实现QQ图片说说照片选择效果

    Android实现QQ图片说说照片选择效果

    本文实例为大家分享了Android实现QQ图片说说照片选择的具体代码,供大家参考,具体内容如下 效果展示 布局文件 布局是很简单的,一个GridView,直接上布局: layout/activity_add_photo.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/andr

  • 用js代码和插件实现wordpress雪花飘落效果的四种方法

    用js代码和插件实现wordpress雪花飘落效果的四种方法

    冬天到了,很多的博客空间都加了雪花的效果,于是去看了看他们的效果实现.有好几个效果代码,就拿过来了,有需要的朋友可以拿过去试试看. 雪花大图片: 效果代码一 <script type="text/javascript" language="javascript"> (function() { function k(a, b, c) { if (a.addEventListener) a.addEventListener(b, c, false); els

  • sina的lightbox效果。

    使用时,只需要在A标签处加上rel="lightbox"即可.e.g: <A href=http://image2.sina.com.cn/dy/other/74/U1571P1T74D1184F1625DT20060618123137.jpg rel=lightbox><IMG src=http://image2.sina.com.cn/dy/other/74/U1571P1T74D1184F1625DT20060618123137.jpg height="

  • Canvas实现微信红包照片效果

    本篇文章来源慕课网课程<canvas玩转红包照片>,用canvas及css3结合,实现红包照片的效果,并不做支付过程,代替的是使用2个按钮,显示清晰图片和重置圆圈可见区域.未做移动的屏幕适应 微信红包照片效果图一张模糊图片,只有鱼哥小圆圈的区域是清晰可见 原理分析: 1.先在页面放置一张原图片image,用css3的filter做模糊处理 2.在图片区域上方放置一个与图片image大小一样的canvas,放置整张清晰图片 3.通过canvas的图片剪辑方法,剪辑出一个圆圈区域,就达到了只显示一

随机推荐