Wordpress ThickBox 添加“查看原图”效果代码


Posted in Javascript onDecember 11, 2010

在 wp-includes/js/thickbox/thickbox.js 大概39行的function tb_show(caption, url, imageGroup)中,添加如下行(粗体红色字代表新添加的代码)

function tb_show(caption, url, imageGroup) {//function called when the user clicks on a thickbox link try { 
/// 代码省略。。。 
TB_NextHTML = ""; 
TB_imageCount = ""; 
TB_FoundURL = false; 
////// 打开新窗口显示原图 
TB_OpenNewHTML = ""; 
if(imageGroup){ 
/// 代码省略。。。 
if (TB_FoundURL) { 
TB_NextCaption = TB_TempArray[TB_Counter].title; 
TB_NextURL = TB_TempArray[TB_Counter].href; 
TB_NextHTML = "<span id='TB_next'>  <a href='#'>"+thickboxL10n.next+"</a></span>"; 
} else { 
TB_PrevCaption = TB_TempArray[TB_Counter].title; 
TB_PrevURL = TB_TempArray[TB_Counter].href; 
TB_PrevHTML = "<span id='TB_prev'>  <a href='#'>"+thickboxL10n.prev+"</a></span>"; 
} 
////// 打开新窗口显示原图 
TB_OpenNewHTML = "<span style='font-size: 11pt'>  <a href='"+url+"' target='_blank' style='color:red'>查看原图</a></span>"; 
} else { 









 TB_FoundURL = true; 

TB_imageCount = thickboxL10n.image + ' ' + (TB_Counter + 1) + ' ' + thickboxL10n.of + ' ' + (TB_TempArray.length); 
////// 打开新窗口显示原图 
TB_OpenNewHTML = "<span style='font-size: 11pt'>  <a href='"+url+"' target='_blank' style='color:red'>查看原图</a></span>"; 
} 
} 
} 
} 
/// 代码省略。。。 
// Resizing large images - orginal by Christian Montoya edited by me. 
/// 代码省略。。。 
// End Resizing 
TB_WIDTH = imageWidth + 30; 
TB_HEIGHT = imageHeight + 60; 
//jQuery("#TB_window").append("<a href='' id='TB_ImageOff' title='"+thickboxL10n.close+"'><img id='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"' alt='"+caption+"'/></a>" + "<div id='TB_caption'>"+caption+"<div id='TB_secondLine'>" + TB_imageCount + TB_PrevHTML + TB_NextHTML + "</div></div><div id='TB_closeWindow'><a href='#' id='TB_closeWindowButton' title='"+thickboxL10n.close+"'><img src='" + tb_closeImage + "' /></a></div>"); 
/////// 显示下一张图 + 新窗口查看原图(添加TB_OpenNewHTML) 
jQuery("#TB_window").append("<a href='' id='TB_nextImage' title='"+thickboxL10n.next+"'><img id='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"' alt='"+caption+"'/></a>" + "<div id='TB_caption'>"+caption+"<div id='TB_secondLine'>" + TB_imageCount + TB_PrevHTML + TB_NextHTML + TB_OpenNewHTML + "</div></div><div id='TB_closeWindow'><a href='#' id='TB_closeWindowButton' title='"+thickboxL10n.close+"'><img src='" + tb_closeImage + "' /></a></div>"); 

jQuery("#TB_closeWindowButton").click(tb_remove); 
if (!(TB_PrevHTML === "")) { 
/// 代码省略。。。

效果:

Wordpress ThickBox 添加“查看原图”效果代码

点击“查看原图”后,将在浏览器新窗口(Tab)显示原图。
作者:Elf Sundae (小糊涂)
Javascript 相关文章推荐
基于jquery的inputlimiter 实现字数限制功能
May 30 Javascript
jquery ajax例子返回值详解
Sep 11 Javascript
javascript中数组的sort()方法的使用介绍
Dec 18 Javascript
浅谈Javascript Base64 加密解密
Dec 28 Javascript
js中的内部属性与delete操作符介绍
Aug 10 Javascript
JavaScript实现搜索框的自动完成功能(一)
Feb 25 Javascript
Angular使用ng-messages与PHP进行表单数据验证
Dec 28 Javascript
Node.js中看JavaScript的引用
Apr 22 Javascript
小程序获取周围IBeacon设备的方法
Oct 31 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
Jul 19 Javascript
VUE写一个简单的表格实例
Aug 06 Javascript
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
Wordpress ThickBox 点击图片显示下一张图的修改方法
Dec 11 #Javascript
基于jQuery的history历史记录插件
Dec 11 #Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
Dec 11 #Javascript
DIY jquery plugin - tabs标签切换实现代码
Dec 11 #Javascript
为超链接加上disabled后的故事
Dec 10 #Javascript
input按钮的事件处理大全
Dec 10 #Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
Dec 10 #Javascript
You might like
PHP实现获取域名的方法小结
2014/11/05 PHP
php实现对两个数组进行减法操作的方法
2015/04/17 PHP
Yii框架分页实现方法详解
2017/05/20 PHP
一个简单的js动画效果代码
2010/07/20 Javascript
JavaScript 原型学习总结
2010/10/29 Javascript
Jquery submit()无法提交问题
2013/04/21 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
概述javascript在Google IE中的调试技巧
2016/11/24 Javascript
详解Angular2组件之间如何通信
2017/06/22 Javascript
浅谈Vue.js中的v-on(事件处理)
2017/09/05 Javascript
gulp教程_从入门到项目中快速上手使用方法
2017/09/14 Javascript
解决Layui 表单提交数据为空的问题
2018/08/15 Javascript
vue中的适配px2rem示例代码
2018/11/19 Javascript
Node.js 在本地生成日志文件的方法
2020/02/07 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
javascript局部自定义鼠标右键菜单
2020/12/08 Javascript
python读取csv文件示例(python操作csv)
2014/03/11 Python
python正则表达式re模块详解
2014/06/25 Python
Python解析网页源代码中的115网盘链接实例
2014/09/30 Python
简单实现python爬虫功能
2015/12/31 Python
Python三级目录展示的实现方法
2016/09/28 Python
分享一个可以生成各种进制格式IP的小工具实例代码
2017/07/28 Python
Python Tkinter实现简易计算器功能
2018/01/30 Python
使用 Python 实现简单的 switch/case 语句的方法
2018/09/17 Python
python提取具有某种特定字符串的行数据方法
2018/12/11 Python
Ubuntu下Anaconda和Pycharm配置方法详解
2019/06/14 Python
python爬虫刷访问量 2019 7月
2019/08/01 Python
python飞机大战 pygame游戏创建快速入门详解
2019/12/17 Python
Html5游戏开发之乒乓Ping Pong游戏示例(一)
2013/01/21 HTML / CSS
Mountain Warehouse澳大利亚官网:欧洲家庭户外品牌倡导者
2016/11/20 全球购物
moosejaw旗下的户外商品促销网站:Mountain Steals
2017/02/27 全球购物
英国布鲁姆精品店:Bloom Boutique
2018/03/01 全球购物
世界汽车零件:World Car Parts
2019/09/04 全球购物
博士生入学考试推荐信
2013/11/17 职场文书
2015年五一劳动节演讲稿
2015/03/18 职场文书
你真的会用Mysql的explain吗
2022/03/31 MySQL