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 相关文章推荐
云网广告中的代码,提示出错,大家找找
Nov 21 Javascript
msn上的tab功能Firefox对childNodes处理的一个BUG
Jan 21 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
Dec 04 Javascript
javascript中apply、call和bind的使用区别
Apr 05 Javascript
js基础之DOM中元素对象的属性方法详解
Oct 28 Javascript
Bootstrap CSS布局之表单
Dec 17 Javascript
Mac系统下Webstorm快捷键整理大全
May 28 Javascript
Node.js应用设置安全的沙箱环境
Apr 23 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
Oct 09 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
Sep 05 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
基于vue的video播放器的实现示例
Feb 19 Vue.js
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
通过ICQ网关发送手机短信的PHP源程序
2006/10/09 PHP
用PHP连接Oracle数据库
2006/10/09 PHP
py文件转exe时包含paramiko模块出错解决方法
2016/08/12 PHP
php对xml文件的增删改查操作实现方法分析
2017/05/19 PHP
PHP使用ActiveMQ实例
2018/02/05 PHP
PHP使用 Pear 进行安装和卸载包的方法详解
2019/07/08 PHP
详解阿里云视频直播PHP-SDK接入教程
2020/07/09 PHP
ImageZoom 图片放大镜效果(多功能扩展篇)
2010/04/14 Javascript
js获取当前页面路径示例讲解
2014/01/08 Javascript
jquery文本框中的事件应用以输入邮箱为例
2014/05/06 Javascript
js中定义一个变量并判断其是否为空的方法
2014/05/13 Javascript
jQuery使用之设置元素样式用法实例
2015/01/19 Javascript
JS操作HTML自定义属性的方法
2015/02/10 Javascript
jquery实现超简洁的TAB选项卡效果代码
2015/08/28 Javascript
基于javascript实现的购物商城商品倒计时实例
2016/12/11 Javascript
JS实现微信弹出搜索框 多条件查询功能
2016/12/13 Javascript
JS搜狐面试题分析
2016/12/16 Javascript
backbone简介_动力节点Java学院整理
2017/07/14 Javascript
完美解决axios跨域请求出错的问题
2018/02/05 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
2019/05/24 Javascript
运用js实现图层拖拽的功能
2019/05/24 Javascript
python使用xmlrpc实例讲解
2013/12/17 Python
在Python中处理字符串之isdigit()方法的使用
2015/05/18 Python
django ajax发送post请求的两种方法
2020/01/05 Python
Python实现AI换脸功能
2020/04/10 Python
TensorFlow的环境配置与安装教程详解(win10+GeForce GTX1060+CUDA 9.0+cuDNN7.3+tensorflow-gpu 1.12.0+python3.5.5)
2020/06/22 Python
python 基于wx实现音乐播放
2020/11/24 Python
css3 中的新特性加强记忆详解
2016/04/16 HTML / CSS
竞选班干部演讲稿
2014/04/24 职场文书
百日安全生产活动总结
2014/07/05 职场文书
单位委托书怎么写
2014/09/21 职场文书
入党个人总结范文
2015/03/02 职场文书
js Proxy的原理详解
2021/05/25 Javascript
厉害!这是Redis可视化工具最全的横向评测
2021/07/15 Redis
B站评分公认最好看的动漫,你的名字评分9.9,第六备受喜欢
2022/03/18 日漫