WordPress 非插件实现图片lightbox效果

  • 时间:
  • 浏览:0
  • 来源:大发时时彩官网平台_大发时时彩网投平台_大发时时彩投注平台_大发时时彩娱乐平台
作者:匿名 hihi 来源:博客吧 浏览: 2011-7-29 11:00:53 字号:大 中 小

[摘要]WordPress 有什么都现成的lightbox特效插件,但今天介绍的是不会插件的土办法实现 WordPress 图片的lightbox特效,之后 通过非插件土办法来实现!

   用 wordpress 做图片展示站时,给图片加点lightbox图片特效,那无疑是给博客增色不少,之后也需要提高用户体验,试想每点一张图片就换另另一有有一个窗口,那也有件想要高兴的事!WordPress 有什么都现成的lightbox特效插件,但今天介绍的是不会插件的土办法实现 WordPress 图片的lightbox特效,之后 通过非插件土办法来实现!

非插件实现 WordPress 图片lightbox特效的土办法:

1.第一步是加载JQuery库,这是需要的,在主题header.php模板的</head>前打上去以下代码:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 

 之后主题已加载可跳过你什儿 步

2.下载js文件slimbox2.zip,用文本工具对其中的slimbox2.js文件进行编辑,找到代码:

$(".post a:has(img)").slimbox(); 

 将其中的.post改成single.php文件中包围<?php the_content();?>代码的CSS样式,如:

<div class="entry"><?php the_content();?></div> 

 这么 .post就修改为.entry

3.把修改好的js文件上传至当前主题的js目录(之后这么 就创建另另一有有一个),之后在JQuery库代码顶端打上去JS调用代码:

<?php if (is_singular()) { ?>

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/slimbox2.js"></script>

<?php } ?>

 该代码表示,当访问的页面是single.php页面时,图片就使用lightbox特效

4.把下载的压缩包里的图片上传至当前主题目录的images目录中(这么 就创建另另一有有一个),之后在style.css文件末端打上去以下CSS样式代码:

/*lightbox*/

#lbOverlay{position:fixed;z-index:9999;left:0;top:0;width:100%;height:100%;background-color:#000;cursor:pointer;}

#lbCenter, #lbBottomContainer{position:absolute;z-index: 9999;overflow: hidden;background-color:#fff;}

.lbLoading{background:#fff url(images/loading.gif) no-repeat center;}

#lbImage {position:absolute;left:0;top:0;border:6px solid #fff;background-repeat:no-repeat;}

#lbPrevLink,#lbNextLink{display: block;position: absolute;top:0;width:100%;outline:none;}

#lbPrevLink{left:0;}

#lbPrevLink:hover{background:transparent url(images/prevlabel.gif) no-repeat 0 15%;}

#lbNextLink{right:0;}

#lbNextLink:hover{background:transparent url(images/nextlabel.gif) no-repeat 100% 15%;}

#lbCloseLink {display: block;float: right;width: 66px;height: 22px;background: transparent url(images/closelabel.gif) no-repeat center; margin: 5px 0;outline: none;}

#lbCaption,#lbNumber,#lbBottom{display:none;}

5.至此WordPress博客图片也有了lightbox特效。

WordPress下载:

本文转自:博客吧

sssss
Tags: WordPress   WordPress使用   lightbox   博客系统  
责任编辑:cc120