当前位置:首页 > 网站建设 > wordpress > 网站建设 > wordpress非插件实现图片lightbox效果

wordpress非插件实现图片lightbox效果

这两天技术宅更换了主题,本来在原来主题使用了一个叫做Images Lazyload and Slideshow的插件,能够同时实现图片的lazyload效果和lightbox效果。现在更换主题后,新的主题本身集成了lazyload的效果,我也不愿意在为了lightbox的效果安装一个插件,所以代码解决了这个问题。图片lightbox效果效果应该很多博客都会有,能很好的提高用户体验。

点击效果展示:wordpress非插件实现图片lightbox效果

实现方法:

1.加载jquery库文件了。一般来说,主题中都会有这个文件,版本的话,经过技术宅测试,1.4.4和1.4.2都可行。如果主题中没有,则把下面代码添加到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-content a:has(img)”).slimbox();

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

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

那么就将.post-content改成.entry

下载地址:百度网盘

3.把修改好的js文件上传至当前主题的目录下,然后在footer.php中添加JS调用代码:

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

<script type=”text/javascript” src=”<?php bloginfo(‘template_url’); ?>/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:50%;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.最后大功告成,点击刷新即可查看效果。

一般来说,按照这个设置步骤都能成功,如果没有的话,只可能是js冲突或者执行有误,可以自行探索多试几次即可。

相关推荐:非插件实现lazyload

友荐云推荐
  • «
  • »
  • 作者:
    除非注明,本文原创:技术宅,欢迎转载!转载请以链接形式注明本文地址,谢谢。
    原文链接:http://www.jishuzh.com/web/wordpress非插件实现图片lightbox效果.html

    10 thoughts on “wordpress非插件实现图片lightbox效果

    1. 水木年华

      主页文中的图片怎么实现?我的不可以…

      1. 技术宅 (Post author) 

        这是主题的功能 具体你可以搜索一下如何在wordpress首页显示文章中第一张图

    2. louis vuitton

      Hello, just wanted to mention, I liked this blog post. It was inspiring. Keep on posting!

    3. louis vuitton handbags

      Hi there, I read your new stuff daily. Your writing style is awesome, keep it up!

    4. ugg outlet

      Hello, just wanted to tell you, I enjoyed this blog post. It was practical. Keep on posting!

    5. ugg outlet

      Someone necessarily assist to make significantly articles I would state. That is the very first time I frequented your website page and to this point? I amazed with the research you made to create this actual post amazing. Magnificent task!

    6. ugg outlet

      Hi there, I check your blogs daily. Your humoristic style is witty, keep doing what you’re doing!

    7. louis vuitton

      Hello, just wanted to say, I loved this blog post. It was inspiring. Keep on posting!

    8. ugg boots cheap

      Hello, I check your blogs regularly. Your writing style is witty, keep it up!

    9. cheap uggs

      Hi, I read your blog regularly. Your humoristic style is witty, keep doing what you’re doing!

    评论已关闭.