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 相关文章推荐
常用js字符串判断方法整理
Oct 18 Javascript
AngularJS 中的指令实践开发指南(一)
Mar 20 Javascript
浅谈JavaScript中数组的增删改查
Jun 20 Javascript
jQuery的extend方法【三种】
Dec 14 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
Jan 05 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
Aug 28 Javascript
JS实现数组深拷贝的方法分析
Mar 06 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
May 05 Javascript
在小程序中推送模板消息的实现方法
Jul 22 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
Sep 20 Javascript
JS自定义对象创建与简单使用方法示例
Jan 15 Javascript
Vue包大小优化的实现(从1.72M到94K)
Feb 18 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
mysq GBKl乱码
2006/11/28 PHP
PHP实现把文本中的URL转换为链接的auolink()函数分享
2014/07/29 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
PHP PDOStatement::fetch讲解
2019/01/31 PHP
javascript打开新窗口同时关闭旧窗口
2009/01/16 Javascript
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
js实现背景图片感应鼠标变化的方法
2015/02/28 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
2016/04/11 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
2016/05/09 Javascript
jQuery实现字符串全部替换的方法
2016/12/12 Javascript
angular2倒计时组件使用详解
2017/01/12 Javascript
Vue.js开发环境快速搭建教程
2017/03/17 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
2018/09/19 Javascript
使用electron将vue-cli项目打包成exe的方法
2018/09/29 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
js最实用string(字符串)类型的使用及截取与拼接详解
2019/04/26 Javascript
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
laydate只显示时分 不显示秒的功能实现方法
2019/09/28 Javascript
记一次react前端项目打包优化的方法
2020/03/30 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
2020/07/28 Javascript
[02:40]2018年度DOTA2最佳新人-完美盛典
2018/12/16 DOTA
详解Python 模拟实现生产者消费者模式的实例
2017/08/10 Python
python 文件转成16进制数组的实例
2018/07/09 Python
python复制列表时[:]和[::]之间有什么区别
2018/10/16 Python
Django分组聚合查询实例分享
2020/04/29 Python
python实现图片素描效果
2020/09/26 Python
opencv python 对指针仪表读数识别的两种方式
2021/01/14 Python
美国花园雕像和家居装饰网上商店:Design Toscano
2019/03/09 全球购物
实习鉴定评语
2014/01/19 职场文书
运动会解说词100字
2014/01/31 职场文书
人事专员工作职责
2014/02/22 职场文书
小学三八妇女节活动方案
2014/03/16 职场文书
合作经营协议书范本
2014/09/16 职场文书
团队会宣传标语
2014/10/09 职场文书
求职导师推荐信范文
2015/03/27 职场文书
机关干部正风肃纪心得体会
2016/01/15 职场文书