Go to comments ↓ Home » Blog

为博客图片添加 Shadowbox 效果

Wordpress很多朋友都给博客添加了图片缩放效果(幻灯片效果),感觉很酷。

这不仅仅是为了好看,很多上了尺寸的图片如果不是用缩放,会打乱排版,缩放后只是留下图片链接那会带来不方便。

虽然 A.shun 只是偶尔插点截图,但依然有必要加上这类效果(Lightbox、Highslide等)来提高体验。

昨天又对博客进行了一次折腾,把原先的 Highslide 效果替换为 Shadowbox

选用 Shadowbox 替代 Highslide

我原来使用的是 highslide 效果,也很不错。不过偶尔换换口味嘛。而且之前那个 js 还会导致 Opera 左键拖拽不正常,会给分享按钮带来不方便。

Lightbox 和 Shadowbox 有基于 jQuery 的插件,既然我已经加载 jQuery,那不妨一试。

Lightbox 和 Shadowbox 都是灯箱效果,可以平滑展开链接的图片,而同时页面的其余部分都变成透明的黑色背景。对比之后 发现 Lightbox 稍微小巧些,但 Shadowbox 的默认效果比较符合我的审美,对各种浏览器的兼容性也较好,支持图片、视频、网页、flash、FLV等媒体。于是先用着这个 。

暂时先用着默认样式,有空再给图片加上 Css。

点击以下图片查看 Shadowbox 效果,单击图片以外的区域可以返回。

shadowbox js

虽然很简单,但我还是折腾了不少时间,惭愧啊。现将方法贴出来和大家分享。

WordPress 插件 Shadowbox JS

如果不喜欢折腾的朋友推荐直接使用这个 Shadowbox 的 WordPress 插件。

这个插件异常强大,除了一般的图片、多媒体播放等效果,选项极多,也很容易看懂。

到 Wp 官方下载 Shadowbox JS 插件:Shadowbox JS For WordPress Plugins

上传到plugin目录,在线解压,并在 WordPress 控制面板激活该插件。激活后根据需要进行设置。

shadowbox js 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 效果》
» 本文链接地址:http://shun.im/21365

» 本文采用 BY-NC-SA 协议进行授权。
» 建议通过 Rss( Feedly | Feedburner | Feedsky )方式及时获取更新。
  1. function shadowbox($content){
    return preg_replace(‘/<a(.*?)href=(.*?).(jpg)”(.*?)>/i’, ‘<a$1href=$2.$3″ $4 rel=”shadowbox”>’, $content);
    }
    add_filter(‘the_content’, ‘shadowbox’, 2);

    再发一次、、

    Firefox 3.6.8 Firefox 3.6.8 Windows XP Windows XP
    #1
    @
    • @Kars 学习了 :sad:

      Opera 10.70 Opera 10.70 Windows XP Windows XP
    • @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);

      Firefox 3.6.8 Firefox 3.6.8 Windows XP Windows XP
    • @Kars 额,好在我刚刚在折腾别的先~ 😀

      Opera 10.70 Opera 10.70 Windows XP Windows XP
  2. 请问对于外链图片有效吗?

    TheWorld Browser TheWorld Browser Windows XP Windows XP
    #2
    @
  3. 我把圖片那個插件卸载了,准备换另外的..

    Google Chrome 6.0.496.0 Google Chrome 6.0.496.0 Windows XP Windows XP
    #3
    @
  4. 这个这个我装了怎么没有效果呢

    Google Chrome 6.0.483.0 Google Chrome 6.0.483.0 Windows XP Windows XP
    #4
    @
  5. 请问我可以把这里的Shadowbox全局替换为colorbox吗?

    TheWorld Browser TheWorld Browser Windows XP Windows XP
    #5
    @
    • @有点蓝 不同的js有不同的参数,直接替换应该是不行的,但那个也应该有给出使用方法才对。 :smile:

      Opera 10.70 Opera 10.70 Windows XP Windows XP
    • @A.shun 是这样的,有个主题也是集成了图片效果,就是colorbox,很小巧。我把那个主题里跟colorbox相关的代码、文件都拷到现有主题的对应位置了(确定没有遗漏),可是发现没有效果。问主题作者也没得到回复。我实在想不到还有什么原因会导致不起作用了。。。

      TheWorld Browser TheWorld Browser Windows XP Windows XP
    • @有点蓝 你直接看 colorbox 主页的介绍吧,挺详细~ :smile:
      http://colorpowered.com/colorbox/

      Opera 10.70 Opera 10.70 Windows XP Windows XP
    • @A.shun 呵呵,这个地址我有,当时看到E文和代码就放弃了,有时间再折腾吧~~~

      TheWorld Browser TheWorld Browser Windows XP Windows XP
    • @有点蓝 呵呵,我也是,一般看着翻译页面,然后本地测试。
      一般前面几段代码就可以了,下面的都是些参数。

      Opera 10.70 Opera 10.70 Windows XP Windows XP
  6. 请问留言头像的阴影效果咋整的啊

    Sogou Explorer Sogou Explorer Windows 7 Windows 7
    #6
    @
  7. 空境美爆了~

    Firefox 21.0 Firefox 21.0 GNU/Linux GNU/Linux
    #7
    @
Leave a Reply

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: