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

以wordpress 3.0.2为例,打开
wp-includes/js/thickbox/thickbox.js,找到以下代码行: 复制代码 代码如下:
jQuery.append(“图片 1

在 wp-includes/js/thickbox/thickbox.js 大概39行的function
tb_show(caption, url,
imageGroup)中,添加如下行(粗体红色字代表新添加的代码)

  • 大概在135行,// End Resizing 下面,修改其中的 id=’TB_ImageOff’ 为
    id=’TB_nextImage’, 然后在该行下面不远处的if ){}中添加: 复制代码 代码如下: jQuery.click; 放在
    jQuery.click; 下一行即可。 更新:
    突然发现忘改链接的title了,上面的代码实现了点击图片直接查看下一张图,但是图片链接的title还没有变,这个很简单,将
    title='”+thickboxL10n.close+”‘ 改为 title='”+thickboxL10n.next+”‘
    即可,这样会读取语言包来显示提示,或者你直接写成字符串也行。效果如下:

复制代码 代码如下:

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.