PageTalks

Thickbox对图片的处理相当相当智能，其中就包括图片的缩放，也就是当图片实际大小超过窗口大小的时候，脚本会自动把图片缩放到适当大小显 示，让图片不至于溢出。但这个带来一个比较麻烦的事情，由于是通过简单改变IMG标签的width和height属性达到的缩放会使图片产生许多粗糙边缘 以及细节的丢失。于是大家开始寻找废掉这个“智能”的方法……汗~

源头在哪里？

打开thickbox.js，大家不难发现，图片Resize的代码就是如下这段：

var pagesize = tb_getPageSize();
var x = pagesize[0] - 150;
var y = pagesize[1] - 150;
var imageWidth = imgPreloader.width;
var imageHeight = imgPreloader.height;
if (imageWidth > x) {
imageHeight = imageHeight * (x / imageWidth);
imageWidth = x;
if (imageHeight > y) {
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
}
} else if (imageHeight > y) {
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
if (imageWidth > x) {
imageHeight = imageHeight * (x / imageWidth);
imageWidth = x;
}
}

很显然在这里就可以直接废掉它的机制，将以上代码替换为：

var imageWidth = imgPreloader.width;
var imageHeight = imgPreloader.height;

这样图片始终将以原始大小输出，如果浏览器没有特殊的自动缩放功能，那么图片将最终处于100%状态。

Thickbox is quite intelligent on handling the images, e.g, it aotomatically resizes the images if it’s too large for the thickbox containers. Unfortunately , this is often not the intent of our own…

Where is the root?

Simply open thickbox.js, it’s easy to find the resizing is driven by the code below:

var pagesize = tb_getPageSize();
var x = pagesize[0] - 150;
var y = pagesize[1] - 150;
var imageWidth = imgPreloader.width;
var imageHeight = imgPreloader.height;
if (imageWidth > x) {
imageHeight = imageHeight * (x / imageWidth);
imageWidth = x;
if (imageHeight > y) {
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
}
} else if (imageHeight > y) {
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
if (imageWidth > x) {
imageHeight = imageHeight * (x / imageWidth);
imageWidth = x;
}
}

If you just want to disble it for good, don’t hesitate to replace the code above with these:

var imageWidth = imgPreloader.width;
var imageHeight = imgPreloader.height;

Finnaly thickbox displays the image in original size. Cheers!

问题解决了？

别高兴的太早！毕竟人家写Resize的代码是有用处的——因为Thickbox的窗口即使溢出，其主窗口也不会产生滚动条。也就是说，就算图片超过了屏幕，用户也不能通过滚动条浏览到图片全貌。这不是得不偿失么？！慢慢来……慢慢来……
解决思路可以是如下的：
1、如果图片能够在当前窗口100%显示且不会造成益处，系统就没有必要Resize
2、图片太大无法在当前窗口以100%大小显示，需要Resize的时候，我们提供额外的全尺寸图片链接。
这是目前最直接也是最有效的方法了……

我们首先还是需要找到之前的那段关于Resize的代码，将其替换为如下：

var pagesize = tb_getPageSize();
var resized = false;
var x = pagesize[0] - 150;
var y = pagesize[1] - 150;
var imageWidth = imgPreloader.width;
var imageHeight = imgPreloader.height;
if (imageWidth > x) {
resized = true;
imageHeight = imageHeight * (x / imageWidth);
imageWidth = x;
if (imageHeight > y) {
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
}
} else if (imageHeight > y) {
resized = true;
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
if (imageWidth > x) {
imageHeight = imageHeight * (x / imageWidth);
imageWidth = x;
}
}

其实无非是加入了一个名称为resized的布尔值变量，作为是否Resized判断。

紧接着我们要加入源文件链接，找到如下代码：

$("#TB_window").append("<a href='' id='TB_ImageOff' title='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='Close'>close</a> or Esc Key</div>");

稍微分析一下，你会发现这是thickbox窗口生成显示图片的代码。替换成如下：

if(!resized){
$("#TB_window").append("<a href='' id='TB_ImageOff' title='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='Close'>close</a> or Esc Key</div>");
} else {
$("#TB_window").append("<a href='' id='TB_ImageOff' title='Close'><img id='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"' alt='"+caption+"'/></a>" + "<div id='TB_caption'>"+caption+" <span style='color: rgb(255, 0, 0); font-weight: bold;'><a href='"+url+"' target='_blank'>CLICK FOR ORIGINAL SIZE</a></span>"+"<div id='TB_secondLine'>" + TB_imageCount + TB_PrevHTML + TB_NextHTML + "</div></div><div id='TB_closeWindow'><a href='#' id='TB_closeWindowButton' title='Close'>close</a> or Esc Key</div>");
}

也就是如果之前resized变量为true，系统就会生成带有源文件链接的Thickbox窗口。至于链接样式，大家可以自己发挥……

事情就是这样，大家过上了幸福的生活……Orz~Thickbox的作者从此认识到自己Resize机制是多么不智能……

Problem Solved?

It seems it works all right. What if the image is large enough to overflow the thickbox? You know that’s why the sophisticated developer type these code in their project to enable resizing. Let’s think better:
1.If the image is fine with the thickbox, thus it won’t overflow. Well, resizing is not needed.
2.If the image is large, let the script resize the image. Besides, we insert a link to the original file.
Sounds like a plan?
Let’s find the resizing code again, and replace it with the code below:

var pagesize = tb_getPageSize();
var resized = false;
var x = pagesize[0] - 150;
var y = pagesize[1] - 150;
var imageWidth = imgPreloader.width;
var imageHeight = imgPreloader.height;
if (imageWidth > x) {
resized = true;
imageHeight = imageHeight * (x / imageWidth);
imageWidth = x;
if (imageHeight > y) {
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
}
} else if (imageHeight > y) {
resized = true;
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
if (imageWidth > x) {
imageHeight = imageHeight * (x / imageWidth);
imageWidth = x;
}
}

In fact, I only create a boolean varible “resized” to flag if resized.
Then we come back the thickbox.js, locate the code below:

$("#TB_window").append("<a href='' id='TB_ImageOff' title='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='Close'>close</a> or Esc Key</div>");

The code will control and create the elements in thickbox, you can modify as you wish. Here is mine:

if(!resized){
$("#TB_window").append("<a href='' id='TB_ImageOff' title='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='Close'>close</a> or Esc Key</div>");
} else {
$("#TB_window").append("<a href='' id='TB_ImageOff' title='Close'><img id='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"' alt='"+caption+"'/></a>" + "<div id='TB_caption'>"+caption+" <span style='color: rgb(255, 0, 0); font-weight: bold;'><a href='"+url+"' target='_blank'>CLICK FOR ORIGINAL SIZE</a></span>"+"<div id='TB_secondLine'>" + TB_imageCount + TB_PrevHTML + TB_NextHTML + "</div></div><div id='TB_closeWindow'><a href='#' id='TB_closeWindowButton' title='Close'>close</a> or Esc Key</div>");
}

Obviously clear that if “resized” is true, it will insert a link where you assign in the previous code. Otherwise, peace……

Well, the story ends……You can try your plan. This is only a demostration how we can better or custom the thickbox.