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 input 数字验证代码
Jul 30 Javascript
javascript 词法作用域和闭包分析说明
Aug 12 Javascript
JavaScript跨平台的开源框架NativeScript
Mar 24 Javascript
详解JavaScript的变量和数据类型
Nov 27 Javascript
js中利用cookie实现记住密码功能
Aug 20 Javascript
js中的闭包实例展示
Nov 01 Javascript
javascript实现小型区块链功能
Apr 03 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
May 29 Javascript
JavaScript命名空间模式实例详解
Jun 20 Javascript
Vue中rem与postcss-pxtorem的应用详解
Nov 20 Javascript
Vue使用预渲染代替SSR的方法
Jul 02 Javascript
Nest.js参数校验和自定义返回数据格式详解
Mar 29 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
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
6种php上传图片重命名的方法实例
2013/11/04 PHP
PHP微框架Dispatch简介
2014/06/12 PHP
php正则表达式获取内容所有链接
2015/07/24 PHP
ThinkPHP 框架实现的读取excel导入数据库操作示例
2020/04/14 PHP
JavaScript 克隆数组最简单的方法
2009/02/12 Javascript
JS实现日期加减的方法
2013/11/29 Javascript
javascritp添加url参数将参数加入到url中
2014/09/25 Javascript
js简单的点击返回顶部效果实现方法
2015/04/10 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
2016/06/01 Javascript
Node.js的基本知识简单汇总
2016/09/19 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
2016/12/14 Javascript
深入理解JS继承和原型链的问题
2016/12/17 Javascript
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
Vue2.X 通过AJAX动态更新数据
2018/07/17 Javascript
解决Vue调用springboot接口403跨域问题
2019/09/02 Javascript
jQuery操作元素追加内容示例
2020/01/10 jQuery
如何在 Vue 中使用 JSX
2021/02/14 Vue.js
解决python多行注释引发缩进错误的问题
2019/08/23 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
Python绘制热力图示例
2019/09/27 Python
Python object类中的特殊方法代码讲解
2020/03/06 Python
python全栈开发语法总结
2020/11/22 Python
连锁经营管理专业大学生求职信
2013/10/30 职场文书
《小儿垂钓》教学反思
2014/02/23 职场文书
小学评语大全
2014/04/22 职场文书
维稳工作承诺书
2015/01/20 职场文书
工会工作个人总结
2015/03/03 职场文书
团委工作总结2015
2015/04/02 职场文书
golang 比较浮点数的大小方式
2021/05/02 Golang
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server
Java 在生活中的 10 大应用
2021/11/02 Java/Android
PostGIS的安装与入门使用指南
2022/01/18 PostgreSQL
spring 项目实现限流方法示例
2022/07/15 Java/Android