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 相关文章推荐
Jquery 自定义动画概述及示例
Mar 29 Javascript
javaScript如何处理从java后台返回的list
Apr 24 Javascript
js子页面获取父页面数据示例
May 15 Javascript
JS小游戏之仙剑翻牌源码详解
Sep 25 Javascript
jquery操作select方法汇总
Feb 05 Javascript
JS获取表格内指定单元格html内容的方法
Mar 31 Javascript
原生js和jQuery实现淡入淡出轮播效果
Dec 25 Javascript
微信小程序 商城开发(ecshop )简单实例
Apr 07 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
Jan 22 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
May 13 Javascript
Vue解析带html标签的字符串为dom的实例
Nov 13 Javascript
微信小程序登陆注册功能的实现代码
Dec 10 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
一个更简单的无限级分类菜单代码
2007/01/16 PHP
ThinkPHP查询语句与关联查询用法实例
2014/11/01 PHP
php限制上传文件类型并保存上传文件的方法
2015/03/13 PHP
php简单日历函数
2015/10/28 PHP
php生成0~1随机小数的方法(必看)
2017/04/05 PHP
php对xml文件的增删改查操作实现方法分析
2017/05/19 PHP
简单实用的PHP文本缓存类实例
2019/03/22 PHP
让FireFox支持innerText的实现代码
2009/12/01 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
使用js操作css实现js改变背景图片示例
2014/03/10 Javascript
JS组件系列之JS组件封装过程详解
2017/04/28 Javascript
webpack的CSS加载器的使用
2018/09/11 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
JavaScript构造函数原理及实现流程解析
2020/11/19 Javascript
JavaScript中的几种继承方法示例
2020/12/06 Javascript
[06:24]DOTA2亚洲邀请赛小组赛第三日 TOP10精彩集锦
2015/02/01 DOTA
python进阶教程之动态类型详解
2014/08/30 Python
Python THREADING模块中的JOIN()方法深入理解
2015/02/18 Python
python迭代器与生成器详解
2016/03/10 Python
OpenCV实现人脸识别
2017/04/07 Python
Python编程实现二分法和牛顿迭代法求平方根代码
2017/12/04 Python
Python迭代器和生成器定义与用法示例
2018/02/10 Python
Pycharm保存不能自动同步到远程服务器的解决方法
2019/06/27 Python
python自动识别文本编码格式代码
2019/12/26 Python
python 使用多线程创建一个Buffer缓存器的实现思路
2020/07/02 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
html+js 实现markdown编辑器效果
2019/10/23 HTML / CSS
世界上最大的街头服饰网站:Karmaloop
2017/02/04 全球购物
生产厂厂长岗位职责
2013/12/25 职场文书
二手房买卖协议书
2014/04/10 职场文书
知识竞赛拉拉队口号
2014/06/16 职场文书
客户答谢会活动方案
2014/08/31 职场文书
世界环境日活动总结
2015/02/11 职场文书
党员廉洁自律个人总结
2015/02/13 职场文书
公司行政助理岗位职责
2015/04/11 职场文书
go语言求任意类型切片的长度操作
2021/04/26 Golang