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'> <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 === "")) {
/// 代碼省略。。。
效果:
復(fù)制代碼 代碼如下:
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 === "")) {
/// 代碼省略。。。
效果:
相關(guān)文章
layui表單驗證select下拉框?qū)崿F(xiàn)驗證的方法
今天小編就為大家分享一篇layui表單驗證select下拉框?qū)崿F(xiàn)驗證的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09javascript?變量聲明?var,let,const?的區(qū)別
這篇文章主要介紹了javascript?變量聲明?var,let,const?的區(qū)別,變量聲明,每種編程語言必不可少的語法,在javascript中,變量的聲明相對其他語言來說,算是比較簡單的。更多相關(guān)的具體內(nèi)容需要的小伙伴可以參考一下2022-06-06JavaScript 函數(shù)惰性載入的實現(xiàn)及其優(yōu)點介紹
惰性載入表示函數(shù)執(zhí)行的分支只會在函數(shù)第一次掉用的時候執(zhí)行,在第一次調(diào)用過程中,該函數(shù)會被覆蓋為另一個按照合適方式執(zhí)行的函數(shù),這樣任何對原函數(shù)的調(diào)用就不用再經(jīng)過執(zhí)行的分支了2013-08-08JavaScript canvas動畫實現(xiàn)時鐘效果
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas動畫實現(xiàn)時鐘效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-02-02詳解js中構(gòu)造流程圖的核心技術(shù)JsPlumb(2)
這篇文章主要介紹了js中構(gòu)造流程圖的核心技術(shù)JsPlumb,jsPlumb是一個強大的JavaScript連線庫,它可以將html中的元素用箭頭、曲線、直線等連接起來,適用于開發(fā)Web上的圖表、建模工具等,需要的朋友可以參考下2015-12-12