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 相关文章推荐
一段实时更新的时间代码
Jul 07 Javascript
浏览器的JavaScript引擎的识别方法
Oct 20 Javascript
Javascript中的String对象详谈
Mar 03 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
Jun 24 Javascript
基于jquery实现二级联动效果
Mar 30 jQuery
React+react-dropzone+node.js实现图片上传的示例代码
Aug 23 Javascript
get  post jsonp三种数据交互形式实例详解
Aug 25 Javascript
详解javascript中的babel到底是什么
Jun 21 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
Oct 11 Javascript
vue+webpack中配置ESLint
Nov 07 Javascript
Javascript 关于基本类型和引用类型的个人理解
Nov 01 Javascript
解决vue字符串换行问题(绝对管用)
Aug 06 Javascript
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
Laravel框架中实现使用阿里云ACE缓存服务
2015/02/10 PHP
详解WordPress中调用评论模板和循环输出评论的PHP函数
2016/01/05 PHP
浅谈php调用python文件
2019/03/29 PHP
原生js写的放大镜效果
2012/08/22 Javascript
javascript中数组的冒泡排序使用示例
2013/12/18 Javascript
JS删除字符串中重复字符方法
2014/03/09 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
2016/05/15 Javascript
JavaScript动态检验密码强度的实现方法
2016/11/09 Javascript
vue项目总结之文件夹结构配置详解
2017/12/13 Javascript
详解JavaScript中的数组合并方法和对象合并方法
2018/05/11 Javascript
node版本管理工具n包使用教程详解
2018/11/09 Javascript
JS使用栈判断给定字符串是否是回文算法示例
2019/03/04 Javascript
vue中的面包屑导航组件实例代码
2019/07/01 Javascript
[53:52]OG vs EG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
python调用新浪微博API项目实践
2014/07/28 Python
Python写的Socks5协议代理服务器
2014/08/06 Python
零基础写python爬虫之抓取糗事百科代码分享
2014/11/06 Python
python简单猜数游戏实例
2015/07/09 Python
简单了解Python中的几种函数
2017/11/03 Python
Python中字符串String的基本内置函数与过滤字符模块函数的基本用法
2019/05/27 Python
python 整数越界问题详解
2019/06/27 Python
通过实例解析python描述符原理作用
2020/01/22 Python
Python实现在Windows平台修改文件属性
2020/03/05 Python
Python命令行参数argv和argparse该如何使用
2021/02/08 Python
使paramiko库执行命令时在给定的时间强制退出功能的实现
2021/03/03 Python
TripAdvisor德国:全球领先的旅游网站
2017/12/07 全球购物
英国珠宝钟表和家居礼品精品店:David Shuttle
2018/02/24 全球购物
澳大利亚最好的厨具店:Kitchen Warehouse
2018/03/13 全球购物
腾讯公司的一个sql题
2013/01/22 面试题
就业推荐表自我鉴定范文
2014/03/21 职场文书
自主招生推荐信范文
2014/05/10 职场文书
2014年民主评议党员个人总结
2014/09/24 职场文书
安全生产标语口号
2015/12/26 职场文书
2019年最新证婚词精选集!
2019/06/28 职场文书
Node实现搜索框进行模糊查询
2021/06/28 Javascript
深入解读Java三大集合之map list set的用法
2021/11/11 Java/Android