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 相关文章推荐
JavaScript使用循环和分割来替换和删除元素实例
Oct 13 Javascript
JavaScript实现select添加option
Jul 03 Javascript
详解Angularjs filter过滤器
Feb 06 Javascript
js判断鼠标位置是否在某个div中的方法
Feb 26 Javascript
总结JavaScript设计模式编程中的享元模式使用
May 21 Javascript
js实现楼层效果的简单实例
Jul 15 Javascript
AngularJs ng-change事件/指令的用法小结
Nov 01 Javascript
微信小程序实现笑脸评分功能
Nov 03 Javascript
Node.js中package.json中库的版本号(~和^)
Apr 02 Javascript
vue之debounce属性被移除及处理详解
Nov 13 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
May 31 Javascript
react 项目中引入图片的几种方式
Jun 02 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
关于Zend Studio 配色方案插件的介绍
2013/06/24 PHP
PHP对象递归引用造成内存泄漏分析
2014/08/28 PHP
Laravel SQL语句记录方式(推荐)
2016/05/26 PHP
php微信公众平台开发(四)回复功能开发
2016/12/06 PHP
ThinkPHP实现附件上传功能
2017/04/27 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
Zero Clipboard js+swf实现的复制功能使用方法
2010/03/07 Javascript
最常用的12种设计模式小结
2011/08/09 Javascript
Javascript的各种节点操作实例演示代码
2012/06/27 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
2013/06/06 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
JavaScript 冒泡排序和选择排序的实现代码
2016/09/03 Javascript
Nodejs实现短信验证码功能
2017/02/09 NodeJs
微信小程序 仿猫眼实现实例代码
2017/03/14 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
2018/03/09 Javascript
原生JS实现简单的倒计时功能示例
2018/08/30 Javascript
js使用Promise实现简单的Ajax缓存
2018/11/14 Javascript
实例分析编写vue组件方法
2019/02/12 Javascript
JavaScript中layim之整合右键菜单的示例代码
2021/02/06 Javascript
[57:29]Alliance vs KG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/17 DOTA
python实现员工管理系统
2018/01/11 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
Python如何获得百度统计API的数据并发送邮件示例代码
2019/01/27 Python
Python3利用print输出带颜色的彩色字体示例代码
2019/04/08 Python
图文详解python安装Scrapy框架步骤
2019/05/20 Python
python添加菜单图文讲解
2019/06/04 Python
Django Rest framework三种分页方式详解
2019/07/26 Python
Django认证系统实现的web页面实现代码
2019/08/12 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
python 调整图片亮度的示例
2020/12/03 Python
幼儿园八一建军节活动方案
2014/08/27 职场文书
化工厂员工工作总结
2015/10/15 职场文书
Python如何识别银行卡卡号?
2021/06/10 Python
TypeScript中条件类型精读与实践记录
2021/10/05 Javascript