Wordpress ThickBox 特效修改:添加“查看原图”
上一次修改了“点击图片动作” , 这次添加一个“查看原图”的链接,点击后将在一个新浏览器窗口(或Tab)打开该图片的原始链接地址。
在 wp-includes/js/thickbox/thickbox.js 大概39行的function tb_show(caption, url, imageGroup)中,添加如下行(粗体红色字代表新添加的代码)
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>";
}
} 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 === "")) {
/// 代码省略。。。
效果:
点击“查看原图”后,将在浏览器新窗口(Tab)显示原图。
转载于:https://www.cnblogs.com/elfsundae/archive/2010/12/09/1901290.html
Wordpress ThickBox 特效修改:添加“查看原图”相关推荐
- 修改el-image 查看原图
showViewer给布尔值控制显示隐藏.closeViewer执行关闭函数.url.fileUrl显示图片信息. <div><el-image class="img&qu ...
- 弹出查看图片_报表工具如何实现“点击查看原图”
在各种涉及图片的 Web 网站上,无论是搜图类.社交类.保险服务类,以及 ERP 或档案管理等内部系统,其中对于图片通常会提供一种点击图片查看原图的操作,也就是一开始呈现小图,点击后放大查看.这种操作 ...
- HTML5 实现图片预览和查看原图
html5从一开始就给开发者很多的期待,提供众多新的API,不用再想以前一样,为了实现某个功能写很多的代码.在以前,如果要实现图片预览会怎么做呢,因为为了安全的原因,web端的js是不能读取文件的本地 ...
- SQL Server触发器创建、删除、修改、查看
http://blog.csdn.net/tianwailaibin/article/details/8111766 本教程为大家介绍SQL Server触发器创建.删除.修改.查看方法. 一.触发器 ...
- html5 预览图片原理,html5实现图片预览和查看原图
html5提供了很多新的API,减轻了很多开发者的工作,比如这次要讲解的FileReader和naturalWidth,naturalHeight就能实现图片预览和查看原图功能 html5 从一开始就 ...
- html图片查看代码实现,如何用HTML5实现图片预览和查看原图的功能
html5实现图片预览和查看原图 html5实现图片预览和查看原图相对以前容易多了,在以前,为了安全,web端的js是不能读取文件的本地真实路径的,只能将图片上传到服务器上,再取图片的链接,这样才能实 ...
- mysql字符集修改无效,Mysql字符集的修改及查看问题_MySQL
bitsCN.com Mysql字符集的修改及查看问题 修改及查看mysql数据库的字符集 修改my.cnf vi /etc/my.cnf 在[client]下添加 default-character ...
- layui列表显示缩略图_layui 表格中实现照片预览,点击查看原图
人员表格中实现照片预览,并且可点击放大.查看原图 js //定义列 var cols = [ [{ type: 'radio', width: 60 }, { type: 'numbers', wid ...
- html5实现图片预览和查看原图
html5提供了很多新的API,减轻了很多开发者的工作,比如这次要讲解的FileReader和naturalWidth,naturalHeight就能实现图片预览和查看原图功能 html5 从一开始就 ...
最新文章
- 模板 - C++ STL
- SWT让耗时的操作后台运行
- 电量检测芯片BQ27510使用心得
- 【小题目】输入三个数字,获取三个数字中的最小值
- python 时间序列预测_使用Python进行动手时间序列预测
- M-SQL:超强的多任务表示学习方法
- 『C#基础』XML文件的读与写
- webpack2.7.0配置不同的打包环境
- python深度复制_Python直接赋值、浅拷贝和深度拷贝解析
- webpack教程(二)——webpack.config.js文件
- 628和822大K站:每个站长挥之不去的阴影
- el-table点击单元格自动聚焦可编辑,且失去焦点即修改成功的实现方法
- ZipOutputStream导出压缩文件
- 智能指针shared_ptr引用计数工作原理
- 产品设计 【网站转化率与漏斗模型】
- sandstone hypercube超融合一体机知识
- 2018最新精选的Go框架,库和软件的精选列表 二
- 我们为什么要上大学?
- 【STemWin】STM32F103VE单片机用FSMC驱动ILI9341彩色触摸屏(触控芯片XPT2046),并裸机移植STemWin图形库(采用LCDConf_FlexColor.c模板)
- 解读少儿编程教师的日常工作