上一次修改了“点击图片动作” , 这次添加一个“查看原图”的链接,点击后将在一个新浏览器窗口(或Tab)打开该图片的原始链接地址。

在 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'>&nbsp;&nbsp;<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'>&nbsp;&nbsp;<a href='#'>"+thickboxL10n.prev+"</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'>&nbsp;&nbsp;<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 === "")) {
/// 代码省略。。。

效果:

点击“查看原图”后,将在浏览器新窗口(Tab)显示原图。

转载于:https://www.cnblogs.com/elfsundae/archive/2010/12/09/1901290.html

Wordpress ThickBox 特效修改:添加“查看原图”相关推荐

  1. 修改el-image 查看原图

    showViewer给布尔值控制显示隐藏.closeViewer执行关闭函数.url.fileUrl显示图片信息. <div><el-image class="img&qu ...

  2. 弹出查看图片_报表工具如何实现“点击查看原图”

    在各种涉及图片的 Web 网站上,无论是搜图类.社交类.保险服务类,以及 ERP 或档案管理等内部系统,其中对于图片通常会提供一种点击图片查看原图的操作,也就是一开始呈现小图,点击后放大查看.这种操作 ...

  3. HTML5 实现图片预览和查看原图

    html5从一开始就给开发者很多的期待,提供众多新的API,不用再想以前一样,为了实现某个功能写很多的代码.在以前,如果要实现图片预览会怎么做呢,因为为了安全的原因,web端的js是不能读取文件的本地 ...

  4. SQL Server触发器创建、删除、修改、查看

    http://blog.csdn.net/tianwailaibin/article/details/8111766 本教程为大家介绍SQL Server触发器创建.删除.修改.查看方法. 一.触发器 ...

  5. html5 预览图片原理,html5实现图片预览和查看原图

    html5提供了很多新的API,减轻了很多开发者的工作,比如这次要讲解的FileReader和naturalWidth,naturalHeight就能实现图片预览和查看原图功能 html5 从一开始就 ...

  6. html图片查看代码实现,如何用HTML5实现图片预览和查看原图的功能

    html5实现图片预览和查看原图 html5实现图片预览和查看原图相对以前容易多了,在以前,为了安全,web端的js是不能读取文件的本地真实路径的,只能将图片上传到服务器上,再取图片的链接,这样才能实 ...

  7. mysql字符集修改无效,Mysql字符集的修改及查看问题_MySQL

    bitsCN.com Mysql字符集的修改及查看问题 修改及查看mysql数据库的字符集 修改my.cnf vi /etc/my.cnf 在[client]下添加 default-character ...

  8. layui列表显示缩略图_layui 表格中实现照片预览,点击查看原图

    人员表格中实现照片预览,并且可点击放大.查看原图 js //定义列 var cols = [ [{ type: 'radio', width: 60 }, { type: 'numbers', wid ...

  9. html5实现图片预览和查看原图

    html5提供了很多新的API,减轻了很多开发者的工作,比如这次要讲解的FileReader和naturalWidth,naturalHeight就能实现图片预览和查看原图功能 html5 从一开始就 ...

最新文章

  1. 模板 - C++ STL
  2. SWT让耗时的操作后台运行
  3. 电量检测芯片BQ27510使用心得
  4. 【小题目】输入三个数字,获取三个数字中的最小值
  5. python 时间序列预测_使用Python进行动手时间序列预测
  6. M-SQL:超强的多任务表示学习方法
  7. 『C#基础』XML文件的读与写
  8. webpack2.7.0配置不同的打包环境
  9. python深度复制_Python直接赋值、浅拷贝和深度拷贝解析
  10. webpack教程(二)——webpack.config.js文件
  11. 628和822大K站:每个站长挥之不去的阴影
  12. el-table点击单元格自动聚焦可编辑,且失去焦点即修改成功的实现方法
  13. ZipOutputStream导出压缩文件
  14. 智能指针shared_ptr引用计数工作原理
  15. 产品设计 【网站转化率与漏斗模型】
  16. sandstone hypercube超融合一体机知识
  17. 2018最新精选的Go框架,库和软件的精选列表 二
  18. 我们为什么要上大学?
  19. 【STemWin】STM32F103VE单片机用FSMC驱动ILI9341彩色触摸屏(触控芯片XPT2046),并裸机移植STemWin图形库(采用LCDConf_FlexColor.c模板)
  20. 解读少儿编程教师的日常工作

热门文章

  1. 国土空间用途结构调整表生成
  2. 发出的邮件对方未收到,应该如何处理
  3. 智哪儿专访IF ROOM品牌主理人Amy:IF ROOM如何定义未来家居?
  4. Java从入门到精通 第4版 PDF下载
  5. #816 Div2E. Long Way Home 斜率优化dp
  6. C语言学生管理系统(将数据保存至TXT文档)附源码
  7. RubyMine插件30/8/21
  8. 回波3DFFT处理(测距、测速、测角)
  9. UE5灯光蓝图和思路
  10. ”张荣华边用毛巾给她拭去毛上的雨水