Lightbox官方网页:http://lokeshdhakar.com/projects/lightbox2/
补充(2013-02-02):由于本窝目前已更换主题,若想查看灯箱效果请到上述地址查看!
前几天换了主题,把以前的灯箱再复制过来就不管用了…
自己找了几个还是不能用的…插件也试过了…
晕,最终找到了一个兼容新不错的~~也就是本文所讲的Lightbox2.51~~
首先去拿到Lightbox2.51
然后解压,删除下列文件或者文件夹
cssscreen.css
index.html
README.markdown
imagesexample
images.DS_Store
imagesbox.png
imagesdonate.png
imagesfavicon.png
imagesspeech-bubbles.png
js.DS_Store
jsjquery.smooth-scroll.min.js
jsjquery-ui-1.8.18.custom.min.js
删除完了之后,如果您的主机支持在线解压请压缩后上传到当前锁使用的主题根目录,然后解压。
若不支持,请直接上传到主题根目录!
添加代码:
在主题的functions.php中的<?php与?>之间添加如下代码
//灯箱效果自动添加标签属性 add_filter('the_content', 'ATheme_pirobox_gall_replace'); function ATheme_pirobox_gall_replace ($content) { global $post; $pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)/is"; $replacement = '<a$1href=$2$3.$4$5 rel="lightbox[roadtrip]"$6>$7'; $content = preg_replace($pattern, $replacement, $content); return $content; }
在header.php里挨着style.css下面添加
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/lightbox.css" />
或者将其加入下面的代码里放入footer.php里的</body>上
<?php if ( is_single() ){ ?> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-1.7.2.min.js"></script> //在网页头重加载过jquery的不用了! <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/lightbox.js"></script> <?php } ?>
如果图片链接是些没有图片扩展名的链接,那么请在编辑文章时在html(wp3.5显示为“文本”)中在图片样式里加入rel=”lightbox[roadtrip]
示例:
<a href="图片链接" rel="lightbox[roadtrip]">图片1</a>
图片测试~~
喔,图片欣赏完了,你也应该安装完成了吧...
Responsive Lightbox
这个插件,集成了几种灯箱效果,用着感觉不错