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操纵Cookie实现购物车程序
Feb 15 Javascript
用 Javascript 验证表单(form)中的单选(radio)值
Sep 08 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
Apr 26 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
Sep 02 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
Sep 23 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
Feb 07 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
Apr 02 Javascript
跟我学习javascript的var预解析与函数声明提升
Nov 16 Javascript
Angular实现的简单查询天气预报功能示例
Dec 27 Javascript
vue2 设置router-view默认路径的实例
Sep 20 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
Oct 27 Javascript
js函数和this用法实例分析
Mar 13 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常用开发函数解析之数组篇[未完结]
2012/07/30 PHP
解析PHP中如何将数组变量写入文件
2013/06/06 PHP
兼容多浏览器的字幕特效Marquee的通用js类
2008/07/20 Javascript
Jquery 弹出层插件实现代码
2009/10/24 Javascript
jquery+json实现的搜索加分页效果
2010/03/31 Javascript
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
2012/03/21 Javascript
Nodejs学习笔记之Global Objects全局对象
2015/01/13 NodeJs
浅谈javascript函数式编程
2015/09/06 Javascript
JavaScript计算器网页版实现代码分享
2016/07/15 Javascript
javascript正则表达式中分组详解
2016/07/17 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
2016/12/08 Javascript
Node.js中如何合并两个复杂对象详解
2016/12/31 Javascript
Nodejs 获取时间加手机标识的32位标识实现代码
2017/03/07 NodeJs
nodejs+websocket实时聊天系统改进版
2017/05/18 NodeJs
Vue精简版风格概述
2018/01/30 Javascript
Nuxt.js开启SSR渲染的教程详解
2018/11/30 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
Python的加密模块md5、sha、crypt使用实例
2014/09/28 Python
深入讲解Python编程中的字符串
2015/10/14 Python
分享Python开发中要注意的十个小贴士
2016/08/30 Python
分享给Python新手们的几道简单练习题
2017/09/21 Python
Python使用cx_Oracle调用Oracle存储过程的方法示例
2017/10/07 Python
python中的subprocess.Popen()使用详解
2019/12/25 Python
Python opencv相机标定实现原理及步骤详解
2020/04/09 Python
Keras之自定义损失(loss)函数用法说明
2020/06/10 Python
Python+logging输出到屏幕将log日志写入文件
2020/11/11 Python
印度最大的酒店品牌网络:OYO Rooms
2016/07/24 全球购物
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
黄河的主人教学反思
2014/02/07 职场文书
老师的检讨书
2014/02/23 职场文书
党员承诺书内容
2014/03/26 职场文书
安全生产承诺书范文
2014/05/22 职场文书
篮球友谊赛通讯稿
2014/10/10 职场文书
企业管理制度设计时要注意的几种“常见病”!
2019/04/19 职场文书
详解SQL报错盲注
2022/07/23 SQL Server