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

在 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 === "")) {
/// 代码省略。。。

效果：

点击“查看原图”后，将在浏览器新窗口(Tab)显示原图。

作者：Elf Sundae (小糊涂)

赞 (0)

相关推荐

  • 基于jquery+thickbox仿校内登录注册框

    基于jquery+thickbox仿校内登录注册框

    下面将我用thickbox和css实现校内登录(注册)框与大家分享下----->效果图如下: 方法很简单,就是用thickbox的iframe模式,将另一个页面嵌套即可,然后在这个页面里写ajax来实现相应的功能. 代码: 注册:regUser.html 复制代码 代码如下: <link type="text/css" href="css/reg.css" rel="Stylesheet" /> <script type=

  • Iframe thickbox2.0使用的方法

    thickbox.js中的 复制代码 代码如下: function TB_init(){ $("a.thickbox").click(function(){ var t = this.title || this.name || null; var g = this.rel || false; TB_show(t,this.href,g); this.blur(); return false; }); } 将红色部分修改为: 复制代码 代码如下: self.parent.TB_show(

  • Wordpress ThickBox 点击图片显示下一张图的修改方法

    Wordpress ThickBox 点击图片显示下一张图的修改方法

    以wordpress 3.0.2为例,打开 wp-includes/js/thickbox/thickbox.js,找到以下代码行: 复制代码 代码如下: jQuery("#TB_window").append("<a href='' id='TB_ImageOff' title='"+thickboxL10n.close+"'><img id='TB_Image' src='"+url+"' width='"

  • JQUERY THICKBOX弹出层插件

    .THICKBOX支持一下浏览器: Windows IE 6.0, Windows IE 7+, Windows FF 2.0.0.6+, Windows Opera 9.0+, Macintosh Safari 2.0.4+, Macintosh FF 2.0.0.6+, Macintosh Opera 9.10--但是据我的使用,IE6还是有点问题的!下面我们首先来看它的调用: 1.肯定你先要下载jquery.js和thickbox.js了.还有thickbox.css也不能少! 复制代码

  • Jquery ThickBox插件使用心得(不建议使用)

    Jquery ThickBox插件使用心得(不建议使用)

    大家可以使用官方推荐的一下几个插件 复制代码 代码如下: While Thickbox had its day, it is not maintained any longer, so we recommend you use some alternatives. * colorbox * jQueryUI Dialog * fancybox * DOM window * shadowbox.js 做项目中发现facebox如果快速单击两下,容易出现黑屏.而且facebox的框架是用table写

  • 可以显示单图片，多图片ajax请求的ThickBox3.1类下载

    ThickBox是一个基于JQuery类库的扩展,它能在浏览器界面上显示非常棒的UI框, 它可以显示单图片,多图片,ajax请求内容或链接内容. 这是从官方上翻译过来的一个实例演示+代码调用.非常方便好用,有了这个,基本上就可以自由应用ThickBox. 以下的是ThickBox3.1的实例+代码调用方法 点击这里查看 点击下载完整演示源代码

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

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

    在 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_NextHTM

  • javascript布局查看器效果代码

    body{ margin:0 auto; width:950px; font-size:12px; text-align:center; } #wholebody{ width:950px; } .newline{/*仅应用于右侧*/ clear:both; width:700px; } #top{ height:auto; } .left_square{ } .right_square{ } #topic{ height:100px; } #left{ float:left; width:25

  • vue+ElementUI实现订单页动态添加产品数据效果实例代码

    vue+ElementUI实现订单页动态添加产品数据效果实例代码

    这两天学习了ElementUI基于vue2.0开发学习,这个知识点挺多的,而且很重要,所以,今天添加一点小笔记. 使用vue2.0(ElementUI基于vue2.0)+ElementUI(饿了么出品)实现的在订单页面动态添加产品的效果,并自动计算总价.代码直接保存为html文档,使用浏览器打开即可查看效果. 效果图: <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-U

  • jQuery动态添加.active 实现导航效果代码思路详解

    jQuery动态添加.active 实现导航效果代码思路详解

     代码思路: 页面4: 页面5: 代码思路: 通过jq获取你打开页面的链接  window.location.pathname: 在HTML中给自己的li加入一个ID id的命名与网址链接中的href相同 通过jq包含方法找到相对应的li给他加入active类名 然后..就没有然后了... jq代码: $(function () { var li = $(".title_ul").children("li"); for (var i = 0; i < li.l

  • jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码

    jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码

    本文实例讲述了jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码.分享给大家供大家参考.具体如下: 这是一款仿百度首页jQuery滑动伸缩展开的添加服务效果,其实是一款伸缩菜单,只不过这个菜单有点特别,只从一头向另一头伸展出去,菜单的伸缩效果平滑,设计精美. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-baidu-index-show-serv-style-codes/ 具体代码如下: <!DOCTYPE html PUBLI

  • 给WordPress的编辑后台添加提示框的代码实例分享

    给WordPress的编辑后台添加提示框的代码实例分享

    WordPress 3.5 新添加了一个提示框功能,可以创建一个提示框,然后指向任何元素,比如下边的例子: 本文就来教你怎么创建一个这样的提示框. 首先需要添加提示框的脚本,这样才能使用提示框的 JS 方法. //挂载提示框脚本 function Bing_admin_pointer_enqueue_scripts(){ wp_enqueue_style( 'wp-pointer' ); wp_enqueue_script( 'wp-pointer' ); } add_action( 'admi

  • js实现类似MSN提示的页面效果代码分享

    js实现类似MSN提示的页面效果代码分享

    这是一篇基于javascript实现了模仿MSN消息提示的效果,推荐给大家,感兴趣的小伙伴们可以参考一下. 运行效果图:----------------------查看效果----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的模仿MSN消息提示的效果代码如下 <html> <head> <meta http-equiv="Content-Type" content="text/htm

  • 基于JavaScript实现添加到购物车效果附源码下载

    基于JavaScript实现添加到购物车效果附源码下载

    我们有很多种方法实现将商品添加到购物车,通常的做法是点击"添加到购物车"按钮,会跳转到购物车,在购物车里可以点击"结算"按钮进行结算.而今天我给大家介绍一个更友好的解决方案. 查看演示 下载源码 默认情况下,购物车是隐藏不可见的,当用户点击添加到购物车按钮后,商品信息会添加到购物车,购物车会以按钮的形式出现在页面右下角,点击按钮则会展开购物车,显示购物车中的商品信息,同时也可以对购物车中的商品进行删除或者结算等操作.用户也可以暂时关闭购物车继续购物. HTML结构

  • jQuery实现为图片添加镜头放大效果的方法

    jQuery实现为图片添加镜头放大效果的方法

    本文实例讲述了jQuery实现为图片添加镜头放大效果的方法.分享给大家供大家参考.具体如下: 运行效果如下图所示: 主要代码如下: $(function () { $("#img_01").imageLens(); $("#img_02").imageLens({ lensSize: 200 }); $("#img_03").imageLens({ imageSrc: "images/sample01.jpg" }); $(&

随机推荐