Wordpress ThickBox 特效修改：添加“查看原图”

﹏ヽ暗。殇╰゛Y 2021-11-01 03:22 229阅读 0赞

[上一次修改了“点击图片动作”][Link 1] ， 这次添加一个“查看原图”的链接，点击后将在一个新浏览器窗口(或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> " ;  
\}  
   
  ** **  
  
\}  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  ===  "" )) \{  
 // / 代码省略。。。

效果：

![2010120914581214.png][]

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

转载于:https://www.cnblogs.com/elfsundae/archive/2010/12/09/1901290.html

[Link 1]: http://www.cnblogs.com/elfsundae/archive/2010/12/08/1900520.html
[2010120914581214.png]: /images/20211101/ad57dbda05e443bc9a2a63e923a854e0.png