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 tips提示效果
Apr 03 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
May 05 Javascript
常用的JavaScript模板引擎介绍
Feb 28 Javascript
jQuery实现弹出窗口中切换登录与注册表单
Jun 05 Javascript
简介JavaScript中的getSeconds()方法的使用
Jun 10 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
Aug 21 Javascript
hovertree插件实现二级树形菜单(简单实用)
Dec 28 Javascript
es6学习笔记之Async函数的使用示例
May 11 Javascript
p5.js入门教程和基本形状绘制
Mar 15 Javascript
JS中实现一个下载进度条及播放进度条的代码
Jun 10 Javascript
vue双向绑定数据限制长度的方法
Nov 04 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
Aug 30 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
在PHP中使用XML
2006/10/09 PHP
PHP聊天室技术
2006/10/09 PHP
PHP数组无限分级数据的层级化处理代码
2012/12/29 PHP
PHP超牛逼无限极分类生成树方法
2015/05/11 PHP
thinkPHP数据查询常用方法总结【select,find,getField,query】
2017/03/15 PHP
php进程daemon化的正确实现方法
2018/09/06 PHP
JQuery validate 验证一个单独的表单元素实例
2017/02/17 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
JS实现的找零张数最小问题示例
2017/11/28 Javascript
Nodejs中crypto模块的安全知识讲解
2018/01/03 NodeJs
Vuex入门到上手教程
2018/06/20 Javascript
基于AngularJs select绑定数字类型的问题
2018/10/08 Javascript
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
Javascript三种字符串连接方式及性能比较
2019/05/28 Javascript
jquery制作的移动端购物车效果完整示例
2020/02/24 jQuery
Python简单实现安全开关文件的两种方式
2016/09/19 Python
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
pycharm编写spark程序,导入pyspark包的3中实现方法
2019/08/02 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
python正则表达式 匹配反斜杠的操作方法
2020/08/07 Python
澳大利亚儿童和婴儿产品在线商店:Lime Tree Kids
2017/10/05 全球购物
迷你分体式空调:SoGoodToBuy
2018/08/07 全球购物
拥有超过850家商店的美国在线派对商店:Party City
2018/10/21 全球购物
美国室内盆栽植物购买网站:Plants.com
2020/04/24 全球购物
夜大自我鉴定
2013/10/31 职场文书
高中自我评价范文
2014/01/27 职场文书
超市活动计划书
2014/04/24 职场文书
巴西世界杯32强口号
2014/06/05 职场文书
投标承诺函格式
2015/01/21 职场文书
公务员年度考核个人总结
2015/02/12 职场文书
医院病假条范文
2015/08/17 职场文书
三好学生主要事迹材料
2015/11/03 职场文书
Oracle 区块链表创建过程详解
2021/05/15 Oracle
配置nginx 重定向到系统维护页面
2021/06/08 Servers
mysql 生成连续日期及变量赋值
2022/03/20 MySQL