How to integrate Thickbox into Exhibit

From SIMILE Widgets
Jump to: navigation, search

About Thickbox

Thickbox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal. learn more

The Code

The thickbox on document load hooks in onclick events for all <a> elements of class thickbox. You need to add a javascript function somewhere (most likely in the head of your html file) called, say, showThickbox:

<script type="text/javascript">
  function showThickbox(a){
    var t = a.title || a.name || null;
    var g = a.rel || false;
    tb_show(t,a.href,g);
    a.blur();
    return false;
  };
</script>

and then in your lens template, add an onclick handler to any <a> element like this:

  <a class="thickbox" 
     ex:href-content=".imageURL" 
     onclick="return showThickbox(this);">click here to view image in a thickbox</a>

That should do it. You can also use Thickbox to show external webpages, ajax content, and galleries of images. See the examples at http://jquery.com/demo/thickbox/.

Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox