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 日期转换成中文格式的函数
Jul 07 Javascript
基于JQuery的抓取博客园首页RSS的代码
Dec 01 Javascript
js中有关IE版本检测
Jan 04 Javascript
JS原型对象通俗&quot;唱法&quot;
Dec 27 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
Jun 19 Javascript
jQuery列表拖动排列具体实现
Nov 04 Javascript
在JavaScript中处理字符串之link()方法的使用
Jun 08 Javascript
AngularJS 单元测试(一)详解
Sep 21 Javascript
基于BootStrap的前端分页带省略号和上下页效果
May 18 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
如何以Angular的姿势打开Font-Awesome详解
Apr 22 Javascript
JavaScript命名空间模式实例详解
Jun 20 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 strcmp使用说明
2010/04/22 PHP
PHP中实现中文字符进制转换原理分析
2011/12/06 PHP
jQuery右键菜单contextMenu使用实例
2011/09/28 Javascript
浅析js中的浮点型运算问题
2014/01/06 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
Window.Open打开窗体和if嵌套代码
2016/04/15 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
2016/05/20 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
Angular Module声明和获取重载实例代码
2016/09/14 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
2017/03/22 Javascript
javaScript 逻辑运算符使用技巧整理
2017/05/03 Javascript
关于javascript sort()排序你可能忽略的一点理解
2017/07/18 Javascript
Angular4学习之Angular CLI的安装与使用教程
2018/01/04 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
2018/08/10 Javascript
Vue2.0点击切换类名改变样式的方法
2018/08/22 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
2020/07/13 Javascript
分析python服务器拒绝服务攻击代码
2014/01/16 Python
Python中使用tarfile压缩、解压tar归档文件示例
2015/04/05 Python
Python调用ctypes使用C函数printf的方法
2017/08/23 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
numpy.transpose()实现数组的转置例子
2019/12/02 Python
使用python3 实现插入数据到mysql
2020/03/02 Python
CSS3 实现图形下落动画效果
2020/11/13 HTML / CSS
LTD Commodities:礼品,独特发现,家居装饰,家用器皿
2017/08/11 全球购物
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
新加坡网上美容店:Hermo新加坡
2019/06/19 全球购物
ECCO俄罗斯官网:北欧丹麦鞋履及皮具品牌
2020/06/26 全球购物
农民入党思想汇报
2014/01/03 职场文书
电气工程自动化求职信
2014/03/14 职场文书
物联网工程专业推荐信
2014/09/08 职场文书
搬迁通知
2015/04/20 职场文书
联欢会开场白
2015/06/01 职场文书
小马王观后感
2015/06/11 职场文书
丧事酒宴答谢词
2015/09/30 职场文书
企业文化学习心得体会
2016/01/21 职场文书