黄聪:wordpress博客用Slimbox2实现lightbox效果(免插件)(转)
wordpress博客(免插件)用Slimbox2实现lightbox效果。图片比较多的wordpress博客如果来点lightbox图片特效,那无疑为你的博客增色不少。只是,很多lightbox效果插件比较臃肿,虽然lightbox效果非常漂亮,但是影响博客速度还是有点不值得,那在wordpress上有没有免插件实现lightbox效果的办法呢?下面就给大家分享免插件实现lightbox效果。
首先是JQuery(你必须先加载JQuery)请确定你的博客加载了JQ库,没有加载JQ库的话,请把下面代码加入header.php相关位置。如果加载过就无需重复加载了。
1、<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
2、然后是js的调用:
<?php if (is_singular()) { ?> <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/slimbox2.js"></script> <?php } ?>
这样是只要在内容页中调用就行 不在首页调用可以提高打开速度
3、Box Css:
/*slimbox2*/ #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/prev.gif') no-repeat 0 15%;} #lbNextLink{right:0;} #lbNextLink:hover{background:transparent url('images/next.gif') no-repeat 100% 15%;} #lbCloseLink {display: block;float: right;width: 66px;height: 22px;background: transparent url('images/close.gif') no-repeat center; margin: 5px 0;outline: none;}
以上样式添加到你的CSS里面即可
4、修改JS文件中的 $(".post-content a:has(img)").slimbox(); 把post-content 改为你的主题控制内容CSS
打开single.php,找到<?php the_content(); ?>,夹着它的div的class既是这里要控制的属性。如果没有可以自定义一个~
文章提及的相关文件下载(请选择IE下载)
slimbox2.js文件放在你主题的JS文件夹下,那些图片文件放在你主题images文件夹下。需要修改范围控制也请修改其中的slimbox2.js文件。
下载: slimbox2.rar
转载于:https://www.cnblogs.com/huangcong/archive/2012/05/10/2493811.html
黄聪:wordpress博客用Slimbox2实现lightbox效果(免插件)(转)相关推荐
- php ucwords,WordPress博客程序中Platinum SEO Pack SEO插件设置图解介绍
Automatically do 301 redirects for permalink changes: 301转向:当日志固定链接结构改变后会因为找不到页面而显示404错误,启用此选项后,旧URL ...
- 使用WordPress博客快速创建QQ小程序
前言 前段时间QQ小程序全量开发,感谢分享已经体验并且成功的发布了基于本博客的QQ小程序.感谢艾玛汇的开源精神,本次教程使用的小程序插件和源码包均来自于艾玛汇.我们需要到github上面搜索下载&qu ...
- linux宝塔搭建网站,宝塔Linux面板搭建网站入门教程五(宝塔Linux面板安装WordPress博客程序)...
本文于 2021-04-01 00:04 更新,本文內容具有時效性,如有失效,請在博客站內搜相關商家名稱,即可查看到關於此商家的最新優惠活動! 國外商家建議使用"谷歌瀏覽器"訪問, ...
- 搭建WordPress博客平台,云计算技术与应用实验报告
实验环境:阿里云云产品资源ECS服务器 题目:基于ECS部署LAMP环境 实验内容和要求: LAMP 是 Linux.Apache.MySQL和PHP的缩写,是搭建网站系统依赖的基础运行环境.本实验使 ...
- 2012 iis php mysql_Win2012 R2 IIS8.5+PHP(FastCGI)+MySQL运行环境搭建wordpress博客教程
Win2012 R2 IIS8.5+PHP(FastCGI)+MySQL运行环境搭建教程 一.环境说明: 操作系统:Windows Server2012 R2 PHP版本:php 5.5.8 MySQ ...
- AWS之EC2搭建WordPress博客
AWS之搭建WordPress博客 注意:请确定您已经成功完成LAMP架构的搭建; 1.下载并解压WordPress安装包: ①使用wget命令在WordPress官网获取最新安装包: [ec2-us ...
- 宝塔php安装那个合_通过宝塔面板一键搭建wordpress博客
上篇文章: 雪影IP工作室:linux服务器搭建宝塔最全教程zhuanlan.zhihu.com 一.前言 hello,欢迎大家观看本次教程,博主在这里教程大家怎么使用宝塔一键搭建wordpress ...
- ubutnu16.04搭建LAMP环境(搭建wordpress博客)
本次讲的是ubuntu的16.04版,通过搭建Lamp环境来建立wordpress博客网站.其他的linux版本也可以参考. 安装之前最好先更新一下系统软件库.命令:sudo apt-get upda ...
- wordpress博客留言自动填写
想起去年朋友,让我帮他写一个wordpress的自动留言程序.大概思路这样的,首先在百度搜索关键字Powered by WordPress,然后打开搜索结果,自动填写内容,提交. 功能也不复杂,就是为 ...
最新文章
- SharePoint API测试系列——Records.BypassLocks测试
- 数据解读“特殊”春运:“返乡过年”人数同比降五成,这些人成今年春运主力...
- 最近学的用javascript给datagrid排序
- sql 自动 清理 ldf 日志_阳泉自动转盘式喷砂机
- android xml png,android - 使用.png文件中的形状创建xml聊天气泡 - 堆栈内存溢出
- php 相加 机组数字,PHP-80型等压比例混合器
- 【HDU - 1025】Constructing Roads In JGShining's Kingdom(dp最长上升子序列模型 + 二分优化)
- 这就是数据分析之Pandas与数据清洗
- Spring(6)---自动装配Beans
- Spring : Factories这个是什么
- vue-element日期框点击不显示,不刷新
- 【转】你真的懂select Socket模型吗?
- Mac上如何修改itunes的默认备份地址
- 西电计算机科学与技术排名,西安电子科技大学王牌专业有哪些及专业排名
- python 欧姆龙plc通信_电脑与欧姆龙plc通过网络通信
- ArrayList集合学生管理系统,java笔试基础题
- 计算机专业的大一学生暑假6,一个计算机专业大三学生的一天 Day6
- HTML如何做一张李白的静夜思,李白《静夜思》配图赏析
- 基于单片机的电子时钟设计(keil+protues仿真,含代码及原理图)
- 转:基于Vue移动音乐web app跨域获取QQ音乐歌单接口教程
热门文章
- 06-10 Jenkins 配置 allure 报告
- 数据库-几个重要的数据库相关概念
- python反向代理服务器_主机、服务器,代理服务器,反向代理服务器理解(自用)...
- 前端开发工程师,找工作应该选择大公司还是小公司?
- web前端入门到实战:CSS3两大实用属性,以及网页制作技巧
- 认识Java中的异常、异常的基本用法
- c++ createtoolhelp32snapshot取进程路径_理解进程和线程
- 无人机rtmp推流直播解决方案
- mysql核心内幕_MySQL核心内幕
- oracle循环不是a就取b,oracle数据库试题的.doc