Hi, welcome to the demonstration for the tutorial – “How to Implement ThickBox”.
Thickbox is a jQuery plugin that is very similar to Lightbox, but comes with more features. This works with any html: (Images, Inline Content, Iframed Content, Ajax Content).
Insert the the JavaScript and CSS file in the HEAD section of your page:
<link rel="stylesheet" href="/thickbox/thickbox.css" type="text/css"> <script src="/thickbox/jquery.js" type="text/javascript"></script> <script src="/thickbox/thickbox.js" type="text/javascript"></script>
Below are few examples of ThickBox functionality.
Single Image
Demo
Instructions
- Create a link element ()
- 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
<a href="http://www.mashupsdesign.com/thickbox/images/projection.jpg" title="Projection" class="thickbox"><img src="http://www.mashupsdesign.com/thickbox/images/projection.jpg" alt="Projection Image "/></a>
Gallery Images
Demo
|
 |
Instructions
- Create a link element ()
- 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-design”)
HTML Code
<a href="images/image1.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-design"></a><br/> <a href="images/image2.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-design"></a><br/> <a href="images/image3.jpg" title="leave blank, or add caption to title attribute" class="thickbox" rel="gallery-design"></a><br/> <a href="images/image4.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-design"></a><br/>
Inline Content
Demo
Show the three paragraphs below in a ThickBox.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Instructions
- Create a link element ()
- 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=InlineContent
HTML Code
<a href="#TB_inline?height=300&width=300&inlineId=InlineContent" title="add a caption to title attribute / or leave blank" class="thickbox">Show</a>
IFramed Content
Demo
Instructions
- Create a link element ()
- 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
<a href="http://www.yahoo.com?TB_iframe=true&amp;height=400&amp;width=600" title="yahoo.com" class="thickbox">yahoo</a> <a href="http://www.google.com?TB_iframe=true&amp;height=400&amp;width=600" title="google.com" class="thickbox">google</a>
AJAX Content
Instructions
- Create a link element ()
- 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
<a href="ajaxcontent.htm?height=300&width=300" title="add a caption to title attribute / or leave blank" class="thickbox">Scrolling content</a> <a href="register.php?height=100&width=250" class="thickbox" title="Please Sign In">login</a>
Try this on your page to add some design.
Again, thank you for viewing.
