Wordpress ThickBox 添加“查看原图”效果代码

 更新时间:2010年12月11日 19:30:14   作者:  
上一次修改了点击图片动作 , 这次添加一个“查看原图”的链接,点击后将在一个新浏览器窗口(或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>";
}
////// 打开新窗口显示原图
TB_OpenNewHTML = "<span style='font-size: 11pt'>&nbsp;&nbsp;<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'>&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)显示原图。

相关文章

  • layui表单验证select下拉框实现验证的方法

    layui表单验证select下拉框实现验证的方法

    今天小编就为大家分享一篇layui表单验证select下拉框实现验证的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • js 自带的 map() 方法全面了解

    js 自带的 map() 方法全面了解

    下面小编就为大家带来一篇js 自带的 map() 方法全面了解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • javascript 变量声明 var,let,const 的区别

    javascript 变量声明 var,let,const 的区别

    这篇文章主要介绍了javascript 变量声明 var,let,const 的区别,变量声明,每种编程语言必不可少的语法,在javascript中,变量的声明相对其他语言来说,算是比较简单的。更多相关的具体内容需要的小伙伴可以参考一下
    2022-06-06
  • 通俗易懂地解释JS中的闭包

    通俗易懂地解释JS中的闭包

    本文通过示例代码给大家介绍了js中的闭包,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
    2017-10-10
  • js实现键盘Enter键提交表单的方法

    js实现键盘Enter键提交表单的方法

    这篇文章主要介绍了js实现键盘Enter键提交表单的方法,涉及javascript键盘事件的相关操作技巧,需要的朋友可以参考下
    2015-05-05
  • echarts中图例右置且竖排完整代码

    echarts中图例右置且竖排完整代码

    这篇文章主要给大家介绍了关于echarts中图例右置且竖排的相关资料,Echarts可以帮助我们快速构建柱状图、饼图、条形图,这对于多图形化展示数据来说尤其方便,可帮助我们快速开发,需要的朋友可以参考下
    2023-08-08
  • JavaScript 函数惰性载入的实现及其优点介绍

    JavaScript 函数惰性载入的实现及其优点介绍

    惰性载入表示函数执行的分支只会在函数第一次掉用的时候执行,在第一次调用过程中,该函数会被覆盖为另一个按照合适方式执行的函数,这样任何对原函数的调用就不用再经过执行的分支了
    2013-08-08
  • 弹出广告特效(一个IP只弹出一次)的代码

    弹出广告特效(一个IP只弹出一次)的代码

    弹出广告特效(一个IP只弹出一次)的代码...
    2007-07-07
  • JavaScript canvas动画实现时钟效果

    JavaScript canvas动画实现时钟效果

    这篇文章主要为大家详细介绍了JavaScript canvas动画实现时钟效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • 详解js中构造流程图的核心技术JsPlumb(2)

    详解js中构造流程图的核心技术JsPlumb(2)

    这篇文章主要介绍了js中构造流程图的核心技术JsPlumb,jsPlumb是一个强大的JavaScript连线库,它可以将html中的元素用箭头、曲线、直线等连接起来,适用于开发Web上的图表、建模工具等,需要的朋友可以参考下
    2015-12-12

最新评论