PageTalks » thickbox

Let Thickbox conquers Flash

Robin — Fri, 29 Aug 2008 09:08:37 +0000

大家都知道我们无所不能的Thickbox竟然不能支持Flash的载入。虽然将SWF文件当作iFrame内容直接用Anchor引用，可以在 IE下正常显示flash内容，可惜在FF下无用。在Thickbox还没有做出更新的时候，我们该怎么在Thickbox里面显示Flash呢？曾经有人提出过改版的Thickbox，可以他没有继续更新。

今天突发奇想，干脆写个PHP页面，然后当iFrame引用吧！

我这里示范一下用Thickbox打开FLV播放器并播放指定文件的例子吧。（其实这个ELFVision里已经得到了使用）
这里使用的JW FLV播放器支持N多的参数和外部脚本，我们只订制了它播放文件、长度、宽度和自动播放，这四个非常基本的参数。如下是默认状态下的播放器代码：

接下来我们自己编写一个videoPlay.php页面来作为iFrame的内容，并在使用中向videoPlay.php传递参数。（小弟在写这篇文章的时候特地花了几十分钟学PHP，对，就是几十分钟）在ELFVision中的videoPlay.php页面代码如下：




 Video Player - ELFVision

基本都是静态代码嘛……呵呵……

在正文中，可以像这样调用：

查看该视频

其中排开实现thickbox所传递的参数外，x代表宽度，y代表高度，link代表FLV文件的绝对地址，autop代表是否自动播放。之所以这样命名，是为了防止和thickbox的参数冲突。这样，Thickbox就成功调用了！

另外一个很奇怪的事情就是，调用WP内置的Thickbox来显示Flash，其窗口宽度和高度会无缘地增加30px和10px。目前为止笔者还不知道原因，所以我在传递thickbox的width和height的时候分别用真实值减去了30和10，暂且算是解决方案吧。知道真相的同学记得告诉我哦！

Disable Image Resizing in Thickbox

Robin — Fri, 29 Aug 2008 09:00:22 +0000

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("" + ""+caption+"" + TB_imageCount + TB_PrevHTML + TB_NextHTML + "
close or Esc Key
");

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

if(!resized){
$("#TB_window").append("" + ""+caption+"" + TB_imageCount + TB_PrevHTML + TB_NextHTML + "
close or Esc Key");
} else {
$("#TB_window").append("" + ""+caption+" CLICK FOR ORIGINAL SIZE"+"" + TB_imageCount + TB_PrevHTML + TB_NextHTML + "
close or Esc Key");
}

也就是如果之前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("" + ""+caption+"" + TB_imageCount + TB_PrevHTML + TB_NextHTML + "
close or Esc Key
");

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

if(!resized){
$("#TB_window").append("" + ""+caption+"" + TB_imageCount + TB_PrevHTML + TB_NextHTML + "
close or Esc Key");
} else {
$("#TB_window").append("" + ""+caption+" CLICK FOR ORIGINAL SIZE"+"" + TB_imageCount + TB_PrevHTML + TB_NextHTML + "
close or Esc Key");
}

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.

Thickbox and its customization

Robin — Fri, 29 Aug 2008 08:56:24 +0000

Thickbox是基于jQuery的一套成熟的交互UI，能让设计师方便的实现Lightbox特效，以及更多你想不到的功能。
既然jQuery是一个轻量级的脚本库，作为设计师出生的使用者会感到它的使用是相对容易的。运用Thickbox实现Lightbox效果是目前流行的几种实现方法中最灵活、最轻便的一种。除了轻便之外，它所支持的浏览器也相当的广泛：Windows IE 6.0, Windows IE 7+, Windows FF 2.0.0.6+, Windows Opera 9.0+, Macintosh Safari 2.0.4+, Macintosh FF 2.0.0.6+, Macintosh Opera 9.10+。

安装Thickbox

登陆官方网站获得最新版本的jQuery和Thickbox的文件，
Thickbox需要jQuery的脚本库，那么首先应该载入jQuery，再载入Thickbox了。
在META标签内加入如下语句：

这里需要注意的是jQuery的脚本文件必须先于thickbox的脚本文件，同时注意修改文件的路径。
紧接着需要加入Thickbox的CSS文件：

当然载入CSS的方法多种多样，这只是一个示范。

使用Thickbox

关于Thickbox的具体使用，可以参考官方网站的示例：http://jquery.com/demo/thickbox/#examples也可以参考legal翻译的文档。由于原来的链接无法访问，这里只给出原文的存档：
http://pagetalks.com/talks/wp-content/uploads/2008/03/thickbox/thickbox.html

定制Thickbox

对于大多数实际使用中，原来的CSS文档设置的样式都无法让人满意（看看连Microsoft的官方网站上的Lightbox都那么炫）。在这里给出Thickbox中CSS档的分析：

#TB_overlay：覆盖原文当背景层ID
.TB_overlayBG：背景层的背景元素，也就是背景的实体Class
#TB_window：Thickbox内容窗口的主体ID
#TB_caption：Thickbox内容窗口左下角的标题和导航所在DIV的ID
#TB_closeWindow：右上角“Close”链接所在的元素（不知道是DIV还是Span）的ID
#TB_closeAjaxWindow：Ajax载入窗口中的“Close”链接所在元素（不知道是DIV还是Span）的ID
#TB_ajaxWindowTitle：左上角标题所在元素的ID
#TB_title：Thickbox内容窗口顶端元素（包含标题和“Close”链接的容器）的ID
#TB_ajaxContent：内容容器ID
#TB_load：载入进度条的ID
#TB_iframeContent：iFrame元素ID

最近在用Thickbox做ELFVision首页上的作品陈列室“Works”，可以到ELFVision的首页，点击Works链接看看美化过的Thickbox。不过这个是半成品，还有一些想法要通过jQuery的编程实现，慢慢来吧。