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)顯示原圖。

作者：Elf Sundae (小糊涂)

您可能感興趣的文章:

JS簡單獲得節(jié)點元素的方法示例
這篇文章主要介紹了JS簡單獲得節(jié)點元素的方法,結合實例形式分析了javascript獲取頁面節(jié)點元素及修改元素屬性相關操作技巧,需要的朋友可以參考下
2018-02-02
利用Echarts如何實現(xiàn)多段圓環(huán)圖
這篇文章主要給大家介紹了關于利用Echarts如何實現(xiàn)多段圓環(huán)圖的相關資料,文中通過實例代碼代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2022-03-03
純js的右下角彈窗實例
下面小編就為大家?guī)硪黄僯s的右下角彈窗實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-03-03
JS+CSS3實現(xiàn)超炫的散列畫廊特效
這篇文章主要為大家詳細介紹了JS+CSS3實現(xiàn)超炫的散列畫廊特效，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-07-07
JavaScript中重名的函數(shù)與對象示例詳析
最近同事問了一個問題，說在js中如果函數(shù)與對象重名了會怎么樣？仔細詳細這個問題值得討論一下，所以便有了這篇文章，這篇文章主要給大家介紹了關于JavaScript中重名的函數(shù)與對象的相關資料，需要的朋友可以參考借鑒，下面來一起看看吧啊。
2017-09-09
JS解決ie6下png透明的方法實例
解決ie6下png透明的問題想必前端都比較清楚，雖然有很多方法，但是我覺得用JS還是最省事的方法，不管是圖片還是背景圖片都OK。
2013-08-08
原生JS實現(xiàn)輪播效果+學前端的感受(防止走火入魔)
下面小編就為大家?guī)硪黄鶭S實現(xiàn)輪播效果+學前端的感受(防止走火入魔)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-08-08
JS實現(xiàn)控制表格行內容垂直對齊的方法
這篇文章主要介紹了JS實現(xiàn)控制表格行內容垂直對齊的方法,通過javascript的getElementById獲取元素并設置其相應樣式來實現(xiàn)這一功能,需要的朋友可以參考下
2015-03-03
基于HTML+JS實現(xiàn)簡單的年齡計算器
JavaScript提供了一些內置的日期和時間函數(shù)，有助于從日期（出生日期）開始計算年齡。本文主要介紹了使用這些JavaScript方法，制作一個簡單的年齡計算器，快來跟隨小編一起學習學習吧
2021-12-12
js使用formData實現(xiàn)批量上傳
這篇文章主要為大家詳細介紹了js使用formData實現(xiàn)批量上傳，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-10-10