Drupal从5.0开始引进了jQuery，大家将可以很方便地为自己的网页引进各种javascript效果。虽然我自己很讨厌那种js、动画满天飞的页面，但对于折叠菜单、可拖动布局、AJAX乃至AHAH、AXAH之类的热门关键词还是比较好奇，所以到jQuery的plugin页面去看了看，理论上这里各种各样的jQuery插件都可以下载后直接应用到你的Drupal页面。看来看去，看到了这个thickbox。看名字就知道，这是又一个效仿Lightbox的"盒子"了：）没错，它是Code Lindley编写的基于jQuery的又一个LightBox变种，可以不用跳转页面而直接在现有窗口上通过弹出窗口的形式覆盖显示其它页面或者站点的内容，对于显示图片非常有用。（具体演示可以看jQuery上thickbox的页面）

其实Drupal4.7里面就有一个LightBox v2模块，但还需要自己另行下载所需的Scriptaculous/Prototype javascript库才行。由于Drupal5.0核心文件里已经包括了jQuery库，那么使用这个基于jQuery的thickbox就成了一个不错的选择。于是下载试用了一下，感觉还不错，可惜我也没有什么图片需要展示，所以不免有点可惜对自己没什么用，忽然想起是不是可以用thickbox来显示codeblock里面的代码。一般的php/mysql代码经常会比较长的一行，虽然可以通过CSS的overflow参数来控制显示（drupal.org用的是visible，drupalchina.org 用的是scroll）,但效果都不太好，如果代码比较长，正文框比较窄的话看起来很不方便。那么如果可以用这个thickbox弹出代码窗口显示，就可以充分利用窗口宽度，而不必受站点版面的约束了。下面可以看到我所说的效果，每个codeblock都限定了大小，但是点击每段代码框右上方的小放大镜，就可以弹出一个较大的thickbox更好的显示代码内容。

下面说说如何使用thickbox实现这一效果：

1. 下载安装thickbox
   到这里下载thickbox.css和thickbox.js，同时下载这个图片用于页面加载显示。在你的Drupal5.0的 sites/all/ 目录下建立 plugins/thickbox/ 目录，把上面的3个文件都复制到这个目录下。
2. 在Drupal中加载thickbox
   为了在Drupal页面中使用thickbox，还需要把上面的js和css文件加入到页面的html头中，最简单的办法就是在你的主题(theme)中include这两个文件。在你的theme目录下，比如 themes/garland/ 或者自己安装的theme一般推荐放在 sites/all/themes/mytheme/ 目录下，在 template.php 文件中找到 _phptemplate_variables()函数，在最后return的前面加入下面两行：
   
       $vars['scripts'] .= drupal_add_js('sites/all/plugins/thickbox/thickbox.js');
    $vars['css'] .= drupal_add_css('sites/all/plugins/thickbox/thickbox.css');
   
   如果你的 template.php 文件中没有 _phptemplate_variables()函数，那么需要自己定义一个，把下面的代码加入 template.php 文件就行了：
   
   function _phptemplate_variables($hook, $vars) {
    $vars['scripts'] .= drupal_add_js('sites/all/plugins/thickbox/thickbox.js');
    $vars['css'] .= drupal_add_css('sites/all/plugins/thickbox/thickbox.css');
    return $vars;
}
3. 使用thickbox显示code
   在这里我们使用的是thickbox的inline显示功能，也就是把页面上已有的一块内容（这里就是<code>标签纸内包含的内容）在thickbox弹出窗口中显示。具体来说，需要先把你所要显示的内容用一个特殊的div id包括起来，比如这样：
   
       <div id=myOnPageContent>这里是你要显示的内容</div>
   
   然后你可以建立一个thickbox链接告诉thickbox要显示的内容在哪里：
   
       <a  href=#TB_inline?height=300&width=200&inlineId=myOnPageContent class=thickbox>View Code in thick box </a>
   
   这样当用户点击这个链接时，thickbox就会自动根据inlineId找到需要显示的内容，然后生成一个高300宽200的窗口显示这个内容。（在firefox里也可以使用相对值，这样比固定大小更灵活些，比如height=90%&width=80%，但IE下好像会有问题）。
4. 通过javascript自动调用thickbox
   如果每次写code的时候都需要手写上面的链接实在很麻烦，可以通过javascript来自动识别codeblock来插入这个链接。下面是我现在这里使用的一段基于jQuery的js，可以自动识别
   （这是codefilter模块自动生成的css class）,然后自动加入相应的thickbox调用。这样当用户发表任何codeblock时，就会自动插入thickbox的链接，就像你在这个页面看到的小望远镜的样子。
   

   $(document).ready(function() {
    $('div.codeblock').each(function(i) {

      $(this).before("<a  href=#TB_inline?height=400&width=980&inlineId=myOnPageContent" + i + " class=thickbox><img src='/yourpathto/viewcode.gif' align='right' alt='view code'></a><p>");
      $(this).wrap("<div id='myOnPageContent" +i +"'></div>");
    });
});

   
   你可以把它存为my.js，然后同上面一样在 template.php 文件中加载入drupal页面就行了：
   

       $vars['scripts'] .= drupal_add_js('sites/all/plugins/my.js');


好了，这就是基本的使用thickbox显示codeblock内容的步骤，在此基础上，你还可以加入其它的自动选择等js来使得用户浏览代码更方便。我们也可以看到，Drupal5.0引入jQuery库之后，要使用现有的jQuery插件以及实现自己的js特效是多么的方便:)