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.
1. ThickBox requires the jQuery JavaScript library; because of this, you will need to include the jquery.js file in the head element of your web page, followed by the thickbox.js file (NOTE: jquery.js must come first in the source order). Example below:
Once you have included the .js files, open thickbox.js or thickbox-compressed.js and locate the tb_pathToImage variable at the top of the page. Once you have found it, make sure to change the value of tb_pathToImage to the path where the loadingAnimation.gif file is located on your own server.
2. Include the ThickBox CSS file in your web page. As of version 3.1 you will
also need to update the path to the macFFBgHack.png in the thickbox.css
file. Example options below:
Or, open the thickbox.css file
and copy and paste the styles into an existing style sheet. Be
aware that the ThickBox CSS file will remove the browsers default
padding and margin for all elements.
3. View the examples to learn the many different ways to use and invoke ThickBox functionality.
Supported & Tested Browsers
Windows IE 6.0, Windows IE 7+, Windows FF 2.0.0.6+, Windows Opera 9.0+,
Macintosh Safari 2.0.4+, Macintosh FF 2.0.0.6+, Macintosh Opera 9.10+
This example is exactly like the single image functionality except that
it allows use of the rel attribute to group images together so they can
be navigated in a ThickBox. The ideal usage would be for images
galleries.
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")
Important to Remember:
While
you have a ThickBox gallery image open, you can navigate forward and
backward through the images by using the left < key (previous) and
right > key (next) on the keyboard (Next and Previous links are also
provided in the ThickBox). The images will appear in the gallery from
first to last as they appear in the HTML document flow.
Click An Image:
<a href="images/plant1.jpg"title="add a caption to title attribute / or leave blank"class="thickbox"rel="gallery-plants"><img src="images/plant1_t.jpg"alt="Plant 1" /></a>
<a href="images/plant2.jpg"title="add a caption to title attribute / or leave blank"class="thickbox"rel="gallery-plants"><img src="images/plant2_t.jpg"alt="Plant 2" /></a>
<a href="images/plant3.jpg"title="add a caption to title attribute / or leave blank"class="thickbox"rel="gallery-plants"><img src="images/plant3_t.jpg"alt="Plant 3" /></a>
<a href="images/plant4.jpg"title="add a caption to title attribute / or leave blank"class="thickbox"rel="gallery-plants"><img src="images/plant4_t.jpg"alt="Plant 4" /></a>
Change the values of height and width in the query accordingly
Optionally you may add modal=true to the query string (e.g. ?KeepThis=true&TB_iframe=true&height=400&width=600&modal=true) so that closing a ThickBox will require calling the tb_remove() function from within the ThickBox iframe (self.parent.tb_remove()). See the iframe demo for an example, where you must click "ok" to close the ThickBox.
Important to Remember:
Add all other query parameters before the TB_iframe parameters. Everything after the "TB" is removed from the URL.
<a href="ajax.PHP?keepThis=true&TB_iframe=true&height=250&width=400" title="add a caption to title attribute / or leave blank" class="thickbox">Example 1</a>
<a href="ajaxOverFlow.htm?keepThis=true&TB_iframe=true&height=300&width=500" title="add a caption to title attribute / or leave blank" class="thickbox">Example 2</a>
<a href="iframeModal.html?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=200&width=300&modal=true" title="add a caption to title attribute / or leave blank" class="thickbox">Open iFrame Modal</a>
Use a hidden HTTP request (AJAX) to fetch files from the same server and have ThickBox display the contents of the files.
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/directory 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
Optionally you may add modal=true to the query string (e.g. ?height=300&width=300&modal=true) so that closing a ThickBox will require calling the tb_remove() function from within the ThickBox. See the login example, where you must click cancel to close the ThickBox.
Important to Remember:
In order to open new Ajax content in an open Ajax ThickBox, its code must also contain the appropriate HTML (class=""thickbox) to launch an Ajax ThickBox (see demo for example). The only catch is, the ThickBox calls must include both the width and height of the original ThickBox. If you leave it blank the window will resize to the default size(630x440).
<a href="ajaxOverFlow.html?height=300&width=300" title="add a caption to title attribute / or leave blank" class="thickbox">Scrolling content</a>
<a href="ajax.PHP?height=220&width=400" class="thickbox" title="add a caption to title attribute / or leave blank">No-scroll content</a>
<a href="ajaxLogin.html?height=85&width=250&modal=true" class="thickbox" title="Please Sign In">login (modal)</a>
<a href="ajaxTBcontent.html?height=200&width=300" class="thickbox" title="">Update ThickBox content</a>
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
Where does it come from?
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
