为博客图片添加 Shadowbox 效果
很多朋友都给博客添加了图片缩放效果(幻灯片效果),感觉很酷。
这不仅仅是为了好看,很多上了尺寸的图片如果不是用缩放,会打乱排版,缩放后只是留下图片链接那会带来不方便。
虽然 A.shun 只是偶尔插点截图,但依然有必要加上这类效果(Lightbox、Highslide等)来提高体验。
昨天又对博客进行了一次折腾,把原先的 Highslide 效果替换为 Shadowbox 。
选用 Shadowbox 替代 Highslide
我原来使用的是 highslide 效果,也很不错。不过偶尔换换口味嘛。而且之前那个 js 还会导致 Opera 左键拖拽不正常,会给分享按钮带来不方便。
Lightbox 和 Shadowbox 有基于 jQuery 的插件,既然我已经加载 jQuery,那不妨一试。
Lightbox 和 Shadowbox 都是灯箱效果,可以平滑展开链接的图片,而同时页面的其余部分都变成透明的黑色背景。对比之后 发现 Lightbox 稍微小巧些,但 Shadowbox 的默认效果比较符合我的审美,对各种浏览器的兼容性也较好,支持图片、视频、网页、flash、FLV等媒体。于是先用着这个 。
暂时先用着默认样式,有空再给图片加上 Css。
点击以下图片查看 Shadowbox 效果,单击图片以外的区域可以返回。
虽然很简单,但我还是折腾了不少时间,惭愧啊。现将方法贴出来和大家分享。
WordPress 插件 Shadowbox JS
如果不喜欢折腾的朋友推荐直接使用这个 Shadowbox 的 WordPress 插件。
这个插件异常强大,除了一般的图片、多媒体播放等效果,选项极多,也很容易看懂。
到 Wp 官方下载 Shadowbox JS 插件:Shadowbox JS For WordPress Plugins。
上传到plugin目录,在线解压,并在 WordPress 控制面板激活该插件。激活后根据需要进行设置。
免插件实现 Shadowbox 效果
到shadowbox-js网站上,根据自己使用的 js 库,并选择用于何种对象、语言,下载相应文件。
先上传并解压到当前主题目录。
加载 jQuery,如果你博客已经使用了 jQuery,请跳过这一步。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
然后在主题中加载 Shadowbox:在你的文章页模板 single.php(或者底部模板 footer.php 加判断语句)中插入以下代码:
<link rel="stylesheet" type="text/css" href="/shadowbox.css"> <script type="text/javascript" src="/shadowbox.js"></script> <script type="text/javascript"> Shadowbox.init(); </script>
给需要使用该效果的图片设置好大小,链接到原图,并给链接加上 rel=”shadowbox” 的属性即可。还有其他多种用法,详见:http://www.shadowbox-js.com/usage
A.shun 这里用的是最基本的 rel=”shadowbox” 。
但是先前的图片链接没有带上这个属性。没关系,有很多简单的方法来给所有图片链接自动加上属性。
常用的有 jQuery选择器,但是我不会- -!这里用简单的 php 和 wp 函数来实现。
在 主题支持函数 functions.php 中插入以下代码
function shadowbox($content) { return preg_replace('/<a(.*?)href=(.*?).(jpg)"(.*?)>/i', '<a$1href=$2.$3" $4 rel="shadowbox">', $content); } add_filter('the_content', 'shadowbox', 2);
这是针对jpg图片的,其他格式自己动脑筋。该脚本还支持很多设置,网站上有详细说明。
不罗嗦了,NBA2009~2010赛季总决赛即将开始~
» 转载请以超链接形式注明来源:A.shun Blog » 《为博客图片添加 Shadowbox 效果》
» 本文链接地址:https://shun.im/21365
function shadowbox($content){
return preg_replace(‘/<a(.*?)href=(.*?).(jpg)”(.*?)>/i’, ‘<a$1href=$2.$3″ $4 rel=”shadowbox”>’, $content);
}
add_filter(‘the_content’, ‘shadowbox’, 2);
再发一次、、
@Kars 学习了 🙁
@A.shun
泪奔,居然 发错了、OMG
function shadowbox($content){
return preg_replace(‘/<a(.*?)href=(.*?).(bmp|gif|jpeg|jpg|png)”(.*?)>/i’, ‘<a$1href=$2.$3″ $4 rel=”shadowbox”>’, $content);
}
add_filter(‘the_content’, ‘shadowbox’, 2);
@Kars 额,好在我刚刚在折腾别的先~ 😀
请问对于外链图片有效吗?
@乔治 有效的
我把圖片那個插件卸载了,准备换另外的..
@BoKeam 偶尔换换更健康,不会腻
这个这个我装了怎么没有效果呢
@junjun 我现在用 Lightbox 了,换换口味嘛。
你可以用这个插件:wp-jquery-lightbox
直接启用即可 🙂
请问我可以把这里的Shadowbox全局替换为colorbox吗?
@有点蓝 不同的js有不同的参数,直接替换应该是不行的,但那个也应该有给出使用方法才对。 🙂
@A.shun 是这样的,有个主题也是集成了图片效果,就是colorbox,很小巧。我把那个主题里跟colorbox相关的代码、文件都拷到现有主题的对应位置了(确定没有遗漏),可是发现没有效果。问主题作者也没得到回复。我实在想不到还有什么原因会导致不起作用了。。。
@有点蓝 你直接看 colorbox 主页的介绍吧,挺详细~ 🙂
http://colorpowered.com/colorbox/
@A.shun 呵呵,这个地址我有,当时看到E文和代码就放弃了,有时间再折腾吧~~~
@有点蓝 呵呵,我也是,一般看着翻译页面,然后本地测试。
一般前面几段代码就可以了,下面的都是些参数。
请问留言头像的阴影效果咋整的啊
空境美爆了~