将图片暗箱特效集成到WordPress主题中

2011年08月16日22:24:52 140 已收录 16,847
摘要

  所谓的暗箱,就是点击小图片弹出窗口并显示大图片,类似的Wordpress插件众多,比如:wp-slimbox2、jQuery Lightbox、jQuery Colorbox、、Gameplorer`s WPColorBox、shadowbox-js,加上我之前用的Auto Highslide等等,功能效果都相似。其实不用插件简单几步就可将这一特效集成到Wordpress主题中,而且加载的文件也比插件小的多。喜欢折腾的童鞋可以参照下面的方法操作:   首先,下载所需文件,解压后将pirobox文件夹内的所有文件放到…

所谓的暗箱,就是点击小图片弹出窗口并显示大图片,类似的Wordpress插件众多,比如:wp-slimbox2、jQuery Lightbox、jQuery Colorbox、、Gameplorer`s WPColorBox、shadowbox-js,加上我之前用的Auto Highslide等等,功能效果都相似。其实不用插件简单几步就可将这一特效集成到Wordpress主题中,而且加载的文件也比插件小的多。喜欢折腾的童鞋可以参照下面的方法操作:

首先,下载所需文件,解压后将pirobox文件夹内的所有文件放到你所使用主题的目录中。


其次,打开主题header模版文件,在</head>前面,分别添加:

所需样式:

  1. <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/img/style.css" />  

必须的jquery.min.js及特效pirobox.min.js文件:

  1. <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.min.js" ></script>   
  2. <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/pirobox.min.js"></script>   
  3. <script type="text/javascript">   
  4. $(document).ready(function() {   
  5.     $().piroBox({   
  6.             my_speed: 400, //animation speed   
  7.             bg_alpha: 0.3, //background opacity   
  8.             slideShow : true, // true == slideshow on, false == slideshow off   
  9.             slideSpeed : 4, //slideshow duration in seconds(3 to 6 Recommended)   
  10.             close_all : '.piro_close,.piro_overlay'// add class .piro_overlay(with comma)if you want overlay click close piroBox   
  11.     });   
  12. });   
  13. </script>  

如果你所使用的主题已加载了jquery.js,可以免去jquery.min.js文件加载代码。

最后,集成该特效除了加载必须的JS和样式文件,关键是为日志中的图片链接自动添加JS特效所需的固定标签属性(class="pirobox_gall")。将下面代码扔到主题functions.php中:

  1. //自动添加标签属性
  2. add_filter('the_content', 'pirobox_gall_replace');   
  3. function pirobox_gall_replace ($content)   
  4. {   global $post;   
  5.     $pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)<\/a>/i";   
  6.     $replacement = '<a$1href=$2$3.$4$5 class="pirobox_gall"$6>$7</a>';   
  7.     $content = preg_replace($pattern$replacement$content);   
  8.     return $content;   
  9. }  

 

完成暗箱特效集成,简单吧。之后,点击日志中的图片,就会华丽地弹出窗口展示该日志中所有插入的图片,可手动播放也可以自动播放。下面是演示或者查看:http://zmingcx.com/gallery/enjoy

      

无图像只有图片链接一样会显示特效点(击链接查看效果)

另外,集成该插件后,如果日志中有多张图片,只需正常插入一张就可以了,其它只需插入图片链接,可以加快页面打开速度。

举一反三,你也可以尝试将http://www.pirolab.it/pirobox/中的特效集成到主题中,这个JS特效弹出窗口,可适应屏幕的大小,并可移动,关键就是为图片链接添加不同的标签属性。

weinxin
我的微信
分享交流WordPress经验与技巧,关注前端设计与网站制作。仅用于功能演示。
Begin主题购买
Begin主题购买

发表评论

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

目前评论:140   其中:访客  96   博主  32   引用   8

    • 舞城 0

      鸟哥,我按照你的方法成功了,就是点击图片出来了,图片窜到下面去了不知道是什么原因。

      • ThePoweroflove 3

        先收下了 谢谢了 博主

        • citier 3

          百度的关键字,有个网站跟鸟哥的文章一样,那个很明显是转载没留名的

          • it自由 3

            鸟哥,你的这个展示效果是哪里来的啊
            标签属性是 class=”cboxElement” 和讲解的案例不一样,还是你现在这个美观多了

            • 张自云(朋) 2

              pirobox与jquery冲突导致边栏、下拉菜单、评论框的效果不可用了,请问如何解决呢?

              • 法律人 0

                博主,这个特效显示图片下面的标题是图片位置,怎么改成显示图片说明呢?是改JS文件还是CSS文件?

                • lianke 1

                  不错,灰常感谢鸟哥的文章,你的主题我也用了,非常不错!
                  我纳闷一个事就是我的分页http://www.phpsharer.com/category/php
                  前几天总是不能输出文章,我查看了一下是程序中少了includes/functions/paged.php这个文件,不知道为什么总是缺少这个文件.
                  我在怀疑是不是你的程序中有写道这个文件,还有一个可能就是我的justhost空间备份服务器少备份了这个,我不知道为什么?请问你的程序中有没有删除这个文件的地方?
                  如果没有,我得问空间商哪里是怎么了!
                  再次感谢您的theme!

                    • 知更鸟 Admin

                      @lianke 解决办法
                      http://zmingcx.com/not-run-on-the-the-hotnews-topic-paging-code.html

                    • acking 4

                      鸟哥,能帮我看看我的网站图片暗箱为什么图片不出来吗?http://blog.acshow.net郁闷死了!

                      • 小楼 1

                        大佬,下载链接呢?

                        • 门软 5

                          鸟哥,你现在还是用的这个灯箱吗?怎么我弄不出来,麻烦指点下。

                            • 知更鸟 Admin

                              @门软 ■ 图片暗箱特效

                              使用主题集成的图片暗箱放大特效,插入图片时需注意:本地上传“链接 URL”应选择链接到“文件URL”,外链需将图像链接到图像,否则不会启用暗箱特效,不喜欢用这个特效,可以到主题设置中关闭。

                            • 3

                              请教一下博主:
                              为什么在每个打开的图片下面的描述文字都是undefined,我插入图片的时候已经填写了说明,但打开的图片却不显示,这是怎么回事。

                              • 3

                                哦,我乱搞一通,居然实现了,顺便跟大家分享一下,在插入图片的时候填写“说明”是无法显示的,必须插入图像后,再点击编辑图像,这时候会多出一个高级选项,在链接高级选项下面有个标题,填入你想填的东西就可以实现了!

                                • 3

                                  很郁闷,效果还用不到两天就失效了,点击图片后什么效果都没了,黑框,叉号,播放,箭头,什么都没了。

                                  • taikong007 3

                                    我的博客开始暗箱放大了,怎么点击图片没有反应呢?跟图床有关系吗?

                                    • 静候轮回 4

                                      网站加载后成功了。有一个小问题,就是效果跟你现在使用的不一样,你现在的可以点击图片自动显示下一张,这个是怎么实现的?而这个效果只能点击按钮进行下一张,而且会显示文件的地址。另外你的图片后面显示的是一片黑色的阴影,这个是怎么回事啊?静候回复,谢谢

                                      • 孙宇博客 1

                                        鸟哥,我用大前端主题添加后无效果,大前端主题里JS文件夹里已经有了jquery.min.js,我把两个jquery.min.js合并后无效果,将你的这个改名后加载也无效果,用你这个覆盖源文件后也无效果,只加载源文件也无效果,加载新浪jQuery库也无效果。查看网页源代码发现前已加载

                                        图片也加了 class=”pirobox_gall属性,实在没办法了,来问问你,麻烦教教我吧

                                          • 知更鸟 Admin

                                            @孙宇博客 折腾这个难度较高…
                                            最简单的方法安装个类似的插件,比如这篇中介绍的
                                            http://zmingcx.com/both-picture-special-effects-plug-ins-recommended.html

                                          • saya 1

                                            请问下方的图片描述显示为undefined怎么办……alt已经写了描述了…

                                              • saya 1

                                                @saya 给链接加上title就好了( ̄▽ ̄”)

                                              • 玛思阁 2

                                                http://~.domain~/?image/%E9%AB%98%E6%B8%85%E5%A3%81%E7%BA%B8/uk-wp6.jpg

                                                这种格式好像不能开启暗箱,是WP2PCS插件调用百度的图片。

                                                • 编谈 0

                                                  http://zmingcx.com/?dl_id=52 要这样、

                                                • 来自外部的引用: 8

                                                  • 让照片支持漂亮的暗箱特效-it自由
                                                  • 将图片暗箱特效集成到WordPress主题中 | 开溜网
                                                  • 将图片暗箱特效集成到WordPress主题中 | 开溜网
                                                  • 将图片暗箱特效集成到WordPress主题中 | 开溜网
                                                  • 将图片暗箱特效集成到WordPress主题中 | 木糖醇博客
                                                  • 【2012-05-05】WordPress集成pirobox图片暗箱效果 | Andy爱分享
                                                  • HotNews Pro图片模版制作完成 | 平凡中的幸福
                                                  • 将图片暗箱特效集成到WordPress主题中 | 压褶人生