所谓的暗箱,就是点击小图片弹出窗口并显示大图片,类似的Wordpress插件众多,比如:wp-slimbox2、jQuery Lightbox、jQuery Colorbox、、Gameplorer`s WPColorBox、shadowbox-js,加上我之前用的Auto Highslide等等,功能效果都相似。其实不用插件简单几步就可将这一特效集成到Wordpress主题中,而且加载的文件也比插件小的多。喜欢折腾的童鞋可以参照下面的方法操作:
首先,下载所需文件,解压后将pirobox文件夹内的所有文件放到你所使用主题的目录中。
其次,打开主题header模版文件,在</head>前面,分别添加:
所需样式:
- <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/img/style.css" />
必须的jquery.min.js及特效pirobox.min.js文件:
- <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.min.js" ></script>
- <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/pirobox.min.js"></script>
- <script type="text/javascript">
- $(document).ready(function() {
- $().piroBox({
- my_speed: 400, //animation speed
- bg_alpha: 0.3, //background opacity
- slideShow : true, // true == slideshow on, false == slideshow off
- slideSpeed : 4, //slideshow duration in seconds(3 to 6 Recommended)
- close_all : '.piro_close,.piro_overlay'// add class .piro_overlay(with comma)if you want overlay click close piroBox
- });
- });
- </script>
如果你所使用的主题已加载了jquery.js,可以免去jquery.min.js文件加载代码。
最后,集成该特效除了加载必须的JS和样式文件,关键是为日志中的图片链接自动添加JS特效所需的固定标签属性(class="pirobox_gall")。将下面代码扔到主题functions.php中:
- //自动添加标签属性
- add_filter('the_content', 'pirobox_gall_replace');
- function pirobox_gall_replace ($content)
- { global $post;
- $pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)<\/a>/i";
- $replacement = '<a$1href=$2$3.$4$5 class="pirobox_gall"$6>$7</a>';
- $content = preg_replace($pattern, $replacement, $content);
- return $content;
- }
完成暗箱特效集成,简单吧。之后,点击日志中的图片,就会华丽地弹出窗口展示该日志中所有插入的图片,可手动播放也可以自动播放。下面是演示或者查看:https://zmingcx.com/gallery/enjoy
另外,集成该插件后,如果日志中有多张图片,只需正常插入一张就可以了,其它只需插入图片链接,可以加快页面打开速度。
举一反三,你也可以尝试将http://www.pirolab.it/pirobox/中的特效集成到主题中,这个JS特效弹出窗口,可适应屏幕的大小,并可移动,关键就是为图片链接添加不同的标签属性。
本站文章大部分为原创,用于个人学习记录,可能对您有所帮助,仅供参考!
上海市长宁区 1F
支持鸟哥,你博客又更新了。
我也用的这个主题,但还有几个地方不明白,
1.导航下拉框没对齐
2.最近留言不显示
3.首页CMS图片布局中的图片,要怎么调出?
很喜欢这个主题,麻烦鸟哥,帮忙完善一下,谢谢
中国 B1
@ Talk团 导航自己改出的问题,帮不上
侧边不显示博主留言
主题无图片布局
浙江省台州市临海市 B2
@ 知更鸟 鸟,无图链接怎么搞的,我搞不成功啊,求教~
中国 B3
@ Kael.Z 随后打个字比如图片1然后链接到图片地址
这样不用插入图片,可以提高页面速度
浙江省台州市临海市 B4
@ 知更鸟 懂了,还有我插入图片,最终都会比原先多一张,插入4张图,都会显示5of5,怎么回事?会有一张重复的
浙江省台州市临海市 B4
@ 知更鸟 找到问题所在了,代码血错误
湖北省武汉市 2F
我是用的插件:Auto Highslide,我刚刚照上面的修改了,貌似不行哦!不知道鸟哥你是怎么改过来的呢?
中国 B1
@ 阿星 估计还是添加有误
上面的方法我在默认主题上试过,一点问题也没有
湖北省武汉市 B2
@ 知更鸟 我确实是照的上面做的,步骤应该是没问题的。我到是觉得问题是不是出在class上呢?
中国 B3
@ 阿星 写完教程,我直接从页面上复制的代码,作的试验,成功
湖北省武汉市 B4
@ 知更鸟 再次报告鸟哥,我神马都没改过,照着步骤没那里一点出错,结果还是不行哦!T_T
鸟哥,我才开的博客,能不能申请友情链接啊 什么都可以说,就别说我厚脸皮啊! ^_^
河南省郑州市 B4
@ 知更鸟 实验成功!多谢鸟提供这么好用的东西
台湾省台中市 B4
@ 知更鸟 刚装完时,不知为什么没作用,等了一阵子再刷新,就ok了
江苏省泰州市 B1
@ 阿星 我也不行
湖北省武汉市 B2
@ 追梦 呵呵,我这又折腾了一天,结果还是一样没成功,郁闷!我改用jQuery Colorbox,非常好用,比Auto Highslide强多了
广东省深圳市 B1
@ 阿星 很强悍 已经安装要求改了 测试下可以用。
湖南省怀化市 3F
~>_<~+ 教程出的好快~~
台湾省台中市 4F
有沒有辦法在點擊圖片之後再次點擊的話自動關閉呢 >.<
站上的大圖挺多的, 那個"X"按鈕又有點遠呢…
之前highslide都是再次點擊就會自己縮回去了呢
中国 B1
@ 鳥の詩 不能
四川省成都市 5F
留着备用
云南省大理州大理市 6F
这个特效现在很流行啊。鸟哥你真是高手 谢谢
中国 B1
@ 电脑天空 这只是简单的网页特效应用
湖南省怀化市 7F
鸟哥你的那个相册的修改方法还没出吧~
中国 B1
@ 看得见风的人 估计做完后,只能再次升级主题了
湖南省怀化市 B2
@ 知更鸟 那就升吧哈~~这相册模块很拉风哦~~
要是再有个视频模块,这主题就极致了……
中国 B3
@ 看得见风的人 视频其实早就试验成功了,不过加载的JS稍大有点得不偿失
广东省深圳市 8F
鸟哥为下一版Hotnewpro做准备啦
北京市 9F
我发现你研究的越来越深入了,我已经完全看不懂了 呵呵
中国 B1
@ 服务器数据恢复 现成的代码,我只是拿过来用一下
河南省新乡市 10F
很好用,已经装上,提醒下,如果要修改pirobox.min.js里面的tittle提示的画,记得转换为“UTF-8无BOM编码格式”
中国 B1
@ Jin Qiang 是的,不然会乱码
山东省青岛市 11F
我一直用jQuery Colorbox插件,感觉效果就很不错!
上海市 12F
老哥,我写了一篇哈利波特的文章,文章不能出现“专制”两个词,一出现必乱码,我可以反种族主义反精英,就是不能反专制,怎么会啊是,链接http://24g.cn/ysyx/harrypotter/249.html,是你设置的吗?
上海市 B1
@ i@24g.cn 你这里很好啊,我现在在我的文章回复中加一个“专制”就惨不忍睹,到处是乱码,怎么回事呢呵呵,加一个共产党就是****,连写一个赞美共产党都屏蔽掉。。。怎么我们会有这个区别呢?
上海市 B1
@ i@24g.cn 帮帮忙我不要这样啊。。。help!
湖南省怀化市 B2
@ i@24g.cn 你上海的服务器是吧~~这些关键词你就别想显示了~
中国 B2
@ i@24g.cn 我哪有那么大的法力,估计真是空间的限制,悲催….
湖南省怀化市 13F
针对2.6主题进行修改,那个文件夹里的东西直接覆盖上传到主题根目录吗?jquery.min.js直接覆盖以前的?
在前面添加,具体添加在什么位置,俺怕加错!
中国 B1
@ 看得见风的人 教程中写的很明白
广东省中山市 14F
按照上面的方法,发现没有自动添加那个样式!所以失败了!
广东省中山市 15F
这个图片的在编辑文章的是好Link URL 是不是要求选file URL,才能实现在当页面有这特效。而选择NONE则没有,选择Post URL则是打开到 文章地址+图片title 页面,然后点击图片才有这特效!
中国 B1
@ kay 选择链接到图像就可以了
浙江省台州市 B2
@ 知更鸟 不支持外链的图片吧?鸟
中国 B3
@ Kael.Z 演示中的图片全是外链
浙江省台州市临海市 B4
@ 知更鸟 那这个我要了,嘎嘎~
广东省深圳市 16F
请问美图欣赏是怎么弄的 ?
山东省青岛市 B1
@ 网友 鸟哥,同求啊,是不是可以考虑为图片博客做一个页面模板啊,谢谢!
河北省石家庄市 17F
请问如何才能让弹出的照片不显示下边的标题栏- –
河南省信阳市固始县 18F
鸟哥,如流!!嘿嘿!!我来了~~
河南省郑州市 19F
为什么我加上后,首页的横向滚动按钮失灵了
中国 B1
@ clairelume 不要把代码加到header_h中
河南省郑州市 B2
@ 知更鸟 真是太感谢了,搞定
黑龙江省大庆市 20F
谢谢分享 去试试去!!!
河南省郑州市 21F
为什么我的导航IE9下有点阴影,IE7,IE8都正常
中国 B1
@ clairelume 嘛阴影,截个图
河南省郑州市 B2
@ 知更鸟 请看图
中国 B1
@ clairelume 设置中关闭IE浮雕.
河南省郑州市 B2
@ 知更鸟 恍然大悟!~
河南省郑州市 22F
看你的都正常,不知道和哪里冲突了
浙江省杭州市 23F
经典, 正好需要个图片展示 博客站点, 这下就更好的解决了
江西省新余市 24F
已经加上了。
美国 25F
直接用了一个jQuery Colorbox
中国 B1
@ Bob 嗯,那个插件不错,后台还是中文的
不过加载文件较大,用这个方法,排除必须的图片,只有15K
北京市 B2
@ 知更鸟 鸟哥,请教下,如果这个问题能解决,我就打算换这个了,
问题是:如何点击背景关闭幻灯效果……
中国 B3
@ Bob 你试过点图片外面的背景不能关闭图片?
芬兰 B4
@ 知更鸟 sorry, 搞错了,是另外一个问题:
能否点击图片的任何地方就能让他自动转到下一张图片!
我的意思是,现在的方案是点击那个>按钮才能跳到下一张图片,这样有一个很大的弊端:当一张图片太大(超出屏幕)的时候,就很难找到那个按钮!很麻烦!
能解决吗?
好比点击左半部返回上一张,点击右半部跳到上一张!
中国 B5
@ Bob 找个四眼齐的,基本不可能
你还是用那个插件吧,方便
芬兰 B5
@ 知更鸟 好的,OK,其实已经够用了,我换成你的这个了……
对了,你的支付宝貌似有问题,打不进钱,晕,
中国 B5
@ Bob 试过没问题,前两天刚有两位朋友捐助我
北京市 B5
@ 知更鸟 可能是网络的问题,我回家了再试试。
安徽省合肥市 26F
效果很不错,不过可支持自适应窗口大小?
中国 B1
@ 皇家元林 不支持
教程最后的举一反三,支持自适应
安徽省合肥市 27F
哦 还有一个问题想请教下,一个幻灯片,在未加载完数据前,只显示加载图片(一直在转那种),加载完就显示幻灯片。。。这种效果怎么做?比如w7c.info这个幻灯片。。
谢谢!
中国 B1
@ 皇家元林 我也是个JS盲,不过这种幻灯网上现在的代码有很多
安徽省合肥市 B2
@ 知更鸟 嗯,这个幻灯片我可以拿来用,但是我想把这效果加在别的幻灯片上,就不知道怎么弄了,郁闷。。
安徽省合肥市 28F
Perfect,前几天 ,我还问过,没想到 现在就发布了 教程。真够有效率的。
建议下一次升级,直接 集成到 主题里面,在后台 搞一个控制面板 。
安徽省合肥市 B1
@ 强哥 @强哥 : 添加个自由设置,是否在图片上面显示链接,这个貌似有必要。还发现个问题,就是插入的如果是相册的话,貌似不支持效果。不知道是不是我搞错了。
中国 B2
@ 强哥 什么相册?
安徽省合肥市 B3
@ 知更鸟 就是后台编辑的时候 插入的时候不插入图片,而是相册 截个图。…
中国 B4
@ 强哥 未听说WP还有相册功能
安徽省合肥市 B5
@ 知更鸟 有的,后台,写文章,系统默认第一个插入图片的按钮,一定要本地批量选择几个图片比如5个,然后保存,就出现了相册,然后最下面就有个插入为相册的按钮。在截个图。
中国 B5
@ 强哥 基本从不本地上传图片,有时间试试再说
江苏省 29F
非常感谢鸟哥~一切顺利~效果非常棒~
江苏省苏州市 30F
暗箱效果原来没集成到主题中啊 我说装了2.6怎么没有的 原来要手动
河南省新乡市 31F
提醒大家,发图片的时候,选择链接到图像,否则没有效果!
北京市 32F
发图片的时候,选择链接到图像,才有效果!求鸟哥,新方法,全站的都图片能使用。
中国 B1
@ woween 不链接到图像让他打开什么?
貌似通过JS可以实现,不会写
北京市 33F
$pattern = “/]*).(bmp|gif|jpeg|jpg|png)(‘|”)(.*?)>(.*?)/i”;
这句语句改成
$pattern = “/]*).(bmp|gif|jpeg|jpg|png)(‘|”)(.*?)>(.*?)/i”;
实现?
北京市 34F
要满足href=才能显示,src=才有效
广东省广州市 35F
我仿照鸟哥写的进行了设置,网站右上角的热点3个tab插件出问题了,而且图片的效果并没有出来,偶尔出来后点击关闭页面整个类似被选取,无法再点击页面上任何东西,修改的文件是header.php和funcations.php吧,js和img都按照代码里写的传到对应目录了,一度导致网站首页整个一篇混乱,现在恢复回去才好了。不知道我具体哪里设置错了
安徽省蚌埠市 36F
WP本来就慢,现弄那么多图片,还玩什么玩?
广东省广州市白云区 37F
能不能再加一个放开的时候,设置图片的大小的设置呢?
上海市长宁区 38F
话说我纠结了,用你2.7的主题 加 <script type="text/javascript" src="/js/jquery.min.js” > 这个顶部菜单下拉的不能收缩回去,文章内图片效果有,不加的话菜单下拉正常,文章内图片暗箱效果无图片…
上海市长宁区 B1
@ 好色者 已经解决。2.7文件包含了暗箱文件,但没有在functions.php添加 //自动添加标签属性
浙江省杭州市 39F
这效果,杠杠的~~用来改其他模板很舒适
安徽省合肥市 40F
看来我要学代码了
安徽省合肥市 41F
我现在的效果很拽,哈哈
浙江省杭州市 42F
请问鸟哥,怎么去掉此功能呀?
上海市青浦区 43F
鸟哥你的主题已经是2.7了,也说明了如何添加暗箱,但我实在不会能,能详细说明下么,值里面的图片地址是什么呢
四川省成都市 44F
为什么我添加的图片 点击后说找不到页面呢?请赐教!
浙江省杭州市 45F
安装后的相框效果和你的演示效果不一样啊
教程里的样式切换图片有点不方便,能不能直接鼠标点击切换图片
湖南省永州市 46F
呵呵,OK,照着做很容易!
浙江省嘉兴市 47F
鸟哥,我按照你的方法成功了,就是点击图片出来了,图片窜到下面去了不知道是什么原因。
湖北省武汉市 48F
先收下了 谢谢了 博主
安徽省合肥市 49F
百度的关键字,有个网站跟鸟哥的文章一样,那个很明显是转载没留名的
浙江省杭州市 50F
鸟哥,你的这个展示效果是哪里来的啊
标签属性是 class=”cboxElement” 和讲解的案例不一样,还是你现在这个美观多了
中国 B1
@ it自由 大同小异
河南省南阳市 51F
pirobox与jquery冲突导致边栏、下拉菜单、评论框的效果不可用了,请问如何解决呢?
湖南省长沙市 52F
博主,这个特效显示图片下面的标题是图片位置,怎么改成显示图片说明呢?是改JS文件还是CSS文件?
山东省淄博市 53F
不错,灰常感谢鸟哥的文章,你的主题我也用了,非常不错!
我纳闷一个事就是我的分页http://www.phpsharer.com/category/php
前几天总是不能输出文章,我查看了一下是程序中少了includes/functions/paged.php这个文件,不知道为什么总是缺少这个文件.
我在怀疑是不是你的程序中有写道这个文件,还有一个可能就是我的justhost空间备份服务器少备份了这个,我不知道为什么?请问你的程序中有没有删除这个文件的地方?
如果没有,我得问空间商哪里是怎么了!
再次感谢您的theme!
中国 B1
@ lianke 解决办法
http://zmingcx.com/not-run-on-the-the-hotnews-topic-paging-code.html
山西省忻州市 54F
鸟哥,能帮我看看我的网站图片暗箱为什么图片不出来吗?http://blog.acshow.net郁闷死了!
江苏省南京市 55F
大佬,下载链接呢?
四川省宜宾市 56F
鸟哥,你现在还是用的这个灯箱吗?怎么我弄不出来,麻烦指点下。
中国 B1
@ 门软 ■ 图片暗箱特效
使用主题集成的图片暗箱放大特效,插入图片时需注意:本地上传“链接 URL”应选择链接到“文件URL”,外链需将图像链接到图像,否则不会启用暗箱特效,不喜欢用这个特效,可以到主题设置中关闭。
广东省广州市 57F
请教一下博主:
为什么在每个打开的图片下面的描述文字都是undefined,我插入图片的时候已经填写了说明,但打开的图片却不显示,这是怎么回事。
广东省广州市 58F
哦,我乱搞一通,居然实现了,顺便跟大家分享一下,在插入图片的时候填写“说明”是无法显示的,必须插入图像后,再点击编辑图像,这时候会多出一个高级选项,在链接高级选项下面有个标题,填入你想填的东西就可以实现了!
广东省广州市 59F
很郁闷,效果还用不到两天就失效了,点击图片后什么效果都没了,黑框,叉号,播放,箭头,什么都没了。
北京市朝阳区 60F
我的博客开始暗箱放大了,怎么点击图片没有反应呢?跟图床有关系吗?
中国 B1
@ taikong007 请详细主题使用说明■ 图片暗箱特效
北京市朝阳区 B2
@ 知更鸟 好的,找了很久没找到,再找找~~
浙江省杭州市 61F
网站加载后成功了。有一个小问题,就是效果跟你现在使用的不一样,你现在的可以点击图片自动显示下一张,这个是怎么实现的?而这个效果只能点击按钮进行下一张,而且会显示文件的地址。另外你的图片后面显示的是一片黑色的阴影,这个是怎么回事啊?静候回复,谢谢
河北省保定市 62F
鸟哥,我用大前端主题添加后无效果,大前端主题里JS文件夹里已经有了jquery.min.js,我把两个jquery.min.js合并后无效果,将你的这个改名后加载也无效果,用你这个覆盖源文件后也无效果,只加载源文件也无效果,加载新浪jQuery库也无效果。查看网页源代码发现前已加载
图片也加了 class=”pirobox_gall属性,实在没办法了,来问问你,麻烦教教我吧
中国 B1
@ 孙宇博客 折腾这个难度较高…
最简单的方法安装个类似的插件,比如这篇中介绍的
http://zmingcx.com/both-picture-special-effects-plug-ins-recommended.html
上海市奉贤区 63F
请问下方的图片描述显示为undefined怎么办……alt已经写了描述了…
上海市奉贤区 B1
@ saya 给链接加上title就好了( ̄▽ ̄”)
广东省深圳市 64F
http://~.domain~/?image/%E9%AB%98%E6%B8%85%E5%A3%81%E7%BA%B8/uk-wp6.jpg
这种格式好像不能开启暗箱,是WP2PCS插件调用百度的图片。
江西省景德镇市 65F
http://zmingcx.com/?dl_id=52 要这样、
来自外部的引用