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 CSS修改学习第三章 修改样式表
Feb 19 Javascript
使用jQuery.wechat构建微信WEB应用
Oct 09 Javascript
js实现的简单图片浮动效果完整实例
May 10 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
May 31 Javascript
浅谈JS的基础类型与引用类型
Sep 13 Javascript
微信小程序 石头剪刀布实例代码
Jan 04 Javascript
用js屏蔽被http劫持的浮动广告实现方法
Aug 10 Javascript
JS实现的简单分页功能示例
Aug 23 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
Sep 07 Javascript
微信小程序实现购物页面左右联动
Feb 15 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
Sep 16 Javascript
javascript 设计模式之组合模式原理与应用详解
Apr 08 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 framework框架中url大小写问题解决方法
2014/08/19 PHP
PHP中构造函数和析构函数解析
2014/10/10 PHP
PHP IDE PHPStorm配置支持友好Laravel代码提示方法
2015/05/12 PHP
Yii 2.0如何使用页面缓存方法示例
2017/05/23 PHP
javascript html 静态页面传参数
2009/04/10 Javascript
纯Javascript实现Windows 8 Metro风格实现
2013/10/15 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
详解AngularJS中的http拦截
2016/02/09 Javascript
值得分享和收藏的Bootstrap学习教程
2016/05/12 Javascript
5种JavaScript脚本加载的方式
2017/01/16 Javascript
Vue 进阶教程之v-model详解
2017/05/06 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
2018/02/24 Javascript
Vue多组件仓库开发与发布详解
2019/02/28 Javascript
js+canvas实现刮刮奖功能
2020/09/13 Javascript
Python中的zip函数使用示例
2015/01/29 Python
Python导入txt数据到mysql的方法
2015/04/08 Python
Python写入CSV文件的方法
2015/07/08 Python
Python学习小技巧之列表项的排序
2017/05/20 Python
python扫描proxy并获取可用代理ip的实例
2017/08/07 Python
python安装twisted的问题解析
2018/08/21 Python
使用Python和百度语音识别生成视频字幕的实现
2020/04/09 Python
python 常见的反爬虫策略
2020/09/27 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
美国家庭鞋店:Shoe Sensation
2019/09/27 全球购物
会计电算化个人自我评价
2013/11/17 职场文书
技术总监岗位职责
2013/12/05 职场文书
平面设计师岗位职责
2014/09/18 职场文书
齐云山导游词
2015/02/06 职场文书
质量负责人岗位职责
2015/02/15 职场文书
采购员岗位职责范本
2015/04/07 职场文书
2015年高中班级工作总结
2015/07/21 职场文书
2015年教师个人业务工作总结
2015/10/23 职场文书
高中地理教学反思
2016/02/19 职场文书
MySql分区类型及创建分区的方法
2022/04/13 MySQL