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 相关文章推荐
获取dom元素那些讨厌的位置封装代码
Jun 23 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
Jan 04 Javascript
javascript中interval与setTimeOut的区别示例介绍
Mar 14 Javascript
js面向对象之静态方法和静态属性实例分析
Jan 10 Javascript
jQuery中(function($){})(jQuery)详解
Jul 15 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
Aug 02 Javascript
详解vue渲染从后台获取的json数据
Jul 06 Javascript
vue项目中axios使用详解
Feb 07 Javascript
微信小程序实现人脸检测功能
May 25 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
Jun 26 Javascript
教你如何编写Vue.js的单元测试的方法
Oct 17 Javascript
layui 对table中的数据进行转义的实例
Sep 12 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
WordPress的主题编写中获取头部模板和底部模板
2015/12/28 PHP
PHP实现获取第一个中文首字母并进行排序的方法
2017/05/09 PHP
详解如何在云服务器上部署Laravel
2017/06/30 PHP
JQUBar 基于JQUERY的柱状图插件
2010/11/23 Javascript
window.open不被拦截的实现代码
2012/08/22 Javascript
nodejs中使用monk访问mongodb
2014/07/06 NodeJs
js计算任意值之间随机数的方法
2015/01/16 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
一波JavaScript日期判断脚本分享
2016/03/06 Javascript
基于javascript实现最简单的选项卡切换效果
2016/05/16 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
2016/08/08 Javascript
jQuery表单事件实例代码分享
2016/08/18 Javascript
详细总结Javascript中的焦点管理
2016/09/17 Javascript
JavaScript正则表达式实例详解
2016/10/16 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
详解在vue-cli项目中安装node-sass
2017/06/21 Javascript
JavaScript定义函数的三种实现方法
2017/09/23 Javascript
微信小程序自定义toast实现方法详解【附demo源码下载】
2017/11/28 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
Vue2.x通用编辑组件的封装及应用详解
2019/05/28 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
2019/06/10 jQuery
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
2019/12/19 Javascript
Python新手实现2048小游戏
2015/03/31 Python
django模板语法学习之include示例详解
2017/12/17 Python
python实现音乐下载的统计
2018/06/20 Python
Flask框架单例模式实现方法详解
2019/07/31 Python
基于pandas中expand的作用详解
2019/12/17 Python
css3 position fixed固定居中问题解决方案
2014/08/19 HTML / CSS
网站域名和主机:Domain.com
2019/04/01 全球购物
问卷调查计划书
2014/01/10 职场文书
教堂婚礼主持词
2014/03/14 职场文书
借款协议书
2014/04/12 职场文书
复兴之路展览观后感
2015/06/02 职场文书
2019幼儿教师求职信(3篇)
2019/09/20 职场文书
分析MySQL优化 index merge 后引起的死锁
2022/04/19 MySQL