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 相关文章推荐
jWiard 基于JQuery的强大的向导控件介绍
Oct 28 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
Jan 15 Javascript
动态加载jquery库的方法
Feb 12 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
Sep 01 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
Oct 10 Javascript
jquery实现的仿天猫侧导航tab切换效果
Aug 24 Javascript
基于bootstrap风格的弹框插件
Dec 28 Javascript
angular-cli修改端口号【angular2】
Apr 19 Javascript
angular4实现tab栏切换的方法示例
Oct 21 Javascript
微信小程序如何获取用户手机号
Jan 26 Javascript
灵活使用console让js调试更简单的方法步骤
Apr 23 Javascript
js 实现Material UI点击涟漪效果示例
Sep 23 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
初学者入门:细述PHP4的核心Zend
2006/09/05 PHP
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
PHP根据传入参数合并多个JS和CSS文件的简单实现
2014/06/13 PHP
Linux安装配置php环境的方法
2016/01/14 PHP
PHP+Redis开发的书签案例实战详解
2019/07/09 PHP
javascript打开新窗口同时关闭旧窗口
2009/01/16 Javascript
JavaScript中OnLoad几种使用方法
2012/12/15 Javascript
PHP abstract与interface之间的区别
2013/11/11 Javascript
javascript Event对象详解及使用示例
2013/11/22 Javascript
jQuery实现的图片分组切换焦点图插件
2015/01/06 Javascript
Bootstrap页面布局基础知识全面解析
2016/06/13 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
2016/08/15 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
2017/06/15 Javascript
利用jQuery异步上传文件的插件用法详解
2017/07/19 jQuery
基于JavaScript中字符串的match与replace方法(详解)
2017/12/04 Javascript
了解ESlint和其相关操作小结
2018/05/21 Javascript
详解vue后台系统登录态管理
2019/04/02 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
uniapp实现可以左右滑动导航栏
2020/10/21 Javascript
JavaScript用document.write()输出换行的示例代码
2020/11/26 Javascript
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
Python中的localtime()方法使用详解
2015/05/22 Python
Python 模板引擎的注入问题分析
2017/01/01 Python
Python get获取页面cookie代码实例
2018/09/12 Python
python实现代码统计程序
2019/09/19 Python
pytorch梯度剪裁方式
2020/02/04 Python
使用HTML5 Geolocation实现一个距离追踪器
2018/04/09 HTML / CSS
生物化工工艺专业应届生求职信
2013/10/08 职场文书
高中数学教学反思
2014/01/30 职场文书
高中生操行评语大全
2014/04/25 职场文书
建筑管理专业求职信
2014/07/28 职场文书
学习礼仪心得体会
2014/09/01 职场文书
2014年图书馆个人工作总结
2014/12/18 职场文书
大学生安全教育心得体会
2016/01/15 职场文书
苹果的回收机器人可以通过拆解iPhone获取大量的金和铜并外公布了环境保护最新进展
2022/04/21 数码科技