Thickbox is an User Interface (UI) widget written in JavaScript and built using JQuery library. Thickbox can be used on any page to display images, inline content, iframe content etc. It provides a rich user experience and displays content on the same window.
What do you need to get started?
- JQuery Library – Download from here
- Download the following thickbox utilities from here
- thickbox.js or thickbox-compressed.js
- ThickBox.css
- loadingAnimation.gif
Where do you copy the files and what else?
Upload the JQuery library, thickbox.js, thickbox.css and the loading Animation.gif to your server
Open the html page using an html editor onto which you wish to have thickbox feature incorporated
Between <head></head> tags include the path to jquery.js and thickbox.js or thickbox-compressed.js. For example,
<script type=”text/javascript” src=”/Javascripts/jquery.min.js”></script> <script type=”text/javascript” src=”/Javascripts/thickbox-compressed.js”></script>
The thickbox.js or thickbox-compressed.js has a reference to tb_pathToImage. Change the value of that path to the path where you have placed loadingAnimation.gif
You can either copy thickbox.css onto the web page or use an external stylesheet reference as follows:
<link rel=stylesheet href=”path to thickbox.css” type=”text/css” media=screen>
URL Syntax
For example, if you want to hyperlink the word ‘Thickbox Test’, the syntax will be as follows:
<a href=”http://www.foo.com/test.aspx?keepThis=true&TB_iframe=true&height=550&width=600” title=”Thickbox Test” class=”thickbox”>Thickbox Test</a>
Reference
Thickbox site has several examples and demos for images, inline content, and iframe content
No related posts.
Leave a Comment