Web Services

Thickbox Tutorial

• What is ThickBox?
• ThickBox Features
• ThickBox Setup
• Implementing ThickBox
• Examples

What is ThickBox?

ThickBox is a webpage User Interface (UI) dialog box feature 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.

ThickBox Features

• The ThickBox JavaScript code and CSS file only add an additional 12k on top of the jQuery code. Together, the compressed jQuery code and ThickBox only total 51k.
• ThickBox will resize images that are bigger than the browser window.
• ThickBox offers versatility (images, iframed content, inline content, and AJAX content).
• ThickBox will hide form elements in Windows IE 6.
• ThickBox will remain centered in the window even when the user scrolls the page or changes the size of the browser window. Clicking an image, the overlay, or close link will remove ThickBox.
• The ThickBox creator has decided that animation should be tailored by individual authors. So yeah, ThickBox no longer animates. Is this a feature? Well, some might say it is.

Top

ThickBox Setup

There are four files required for ThickBox to work correctly:

• thickBox.js
• thickBox.css
• loadingAnimation.gif
• jQuery.js

Save the file to the appropriate place. In our case, we will save the JavaScript files to the "_scripts" folder, "thickbox.css" to the "_styles" folder, and "loadingAnimation.gif" to the "images" folder fot the site we are working on.

Before you can implement ThickBox make sure the page that invokes ThickBox has a valid DTD. This is required for ThickBox to look and function correctly.

Top

Implementing ThickBox

Top

Examples

• Single Image
• Gallery Images
• Inline Content
• IFramed Content
• AJAX Content

Single Image

Demo

Instructions

• Create a link element (<a href>)
• Give the link a class attribute with a value of thickbox (class="thickbox")
• Provide a path in the href attribute to an image file (.jpg .jpeg .png .gif .bmp

HTML Code

Top

Gallery Images

Demo

Instructions

• Create a link element (<a href>)
• Give the link a class attribute with a value of "thickbox" (class="thickbox")
• Provide a path in the href attribute to an image file (.jpg .jpeg .png .gif .bmp)
• Give each link element the same rel element and value. (Example: rel="gallery-plants")

HTML Code

Top

Inline Content

Demo

Show the three paragraphs below in a ThickBox.

Instructions

• Create a link element (<a href>)
• Give the link a class attribute with a value of thickbox (class="thickbox")
• In the href attribute of the link add the following anchor: #TB_inline
• In the href attribute after the #TB_inline add the following query string on to the anchor:
  
  ?height=300&width=300&inlineId=myOnPageContent

HTML Code

Top

IFramed Content

Demo

Yahoo

Google

Instructions

• Create a link element (<a href>)
• Give the link a class attribute with a value of thickbox (class="thickbox")
• In the href attribute of the link provide the URL you would like to display in a ThickBox
• In the href attribute, after the URL, add the following query on to the end of the
  URL:?TB_iframe=true&height=400&width=600
• Change the values of height and width in the query accordingly

HTML Code

Top

AJAX Content

Instructions

• Create a link element (<a href>)
• Give the link a class attribute with a value of thickbox (class="thickbox")
• Provide a path in the href to the file (.html .htm .cfm .php .asp .aspx .jsp .jst .rb .txt) on the server. (href="ajaxLogin.htm")
• In the href attribute, after the URL path to the file, add the following query on to the end of the URL:
  ?height=300&width=300
• Change the values of height and width in the query accordingly

HTML Code

Top

That's It!

Enjoy!