最新消息:数据恢复成功,博主又回来啦,和你们同在!

【WordPress】无插件为文章添加图片灯箱(暗箱?)效果~~!

wordpress ZmmFly 4922浏览 11评论

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>

图片测试~~

仙乐

仙乐

仙乐

 

 

 

喔,图片欣赏完了,你也应该安装完成了吧...

转载请注明:SH自留地 » 【WordPress】无插件为文章添加图片灯箱(暗箱?)效果~~!

打赏 赞(0)
微信
支付宝
微信二维码图片

微信扫描二维码打赏

支付宝二维码图片

支付宝扫描二维码打赏

发表我的评论
取消评论

Protected by WP Anti Spam

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (11)

  1. 效果非常地漂亮,还有上下个。
    免费资源部落评论于7年前 (2013-01-05)回复
    • 嘿嘿,要不部落也加一个? :mrgreen:
      神情话意评论于7年前 (2013-01-07)回复
  2. 我会说我是来看美女的吗
    小鸭网评论于7年前 (2013-01-06)回复
    • :arrow:
      神情话意评论于7年前 (2013-01-06)回复
    • 你的站貌似被黑了啊。。。
      神情话意评论于5年前 (2014-04-01)回复
  3. 目前D-Simple我还没找到能用的暗箱。。。
    空城旧梦评论于7年前 (2013-02-08)回复
    • 唔,我也是喔……
      神情话意评论于7年前 (2013-02-09)回复
  4. 考虑添加一个
    微而评论于6年前 (2014-02-02)回复
    • 嗯,如果不追求性能倒是可以考虑 Responsive Lightbox 这个插件,集成了几种灯箱效果,用着感觉不错
      惜颜评论于6年前 (2014-02-04)回复
  5. 非常不错啊,我也用D8,一直在寻找,图片可以改大点么
    ← ' husband    .评论于5年前 (2014-06-11)回复
    • 嗯,不过目前不建议用这种修改主题php代码的方式,有时可能会出现未知错误;可以使用 Responsive lightbox 插件或者是js代码方式实现无插件
      惜颜评论于5年前 (2014-06-11)回复