Thickbox Use Experience

JS and CSS files required for download to http://jquery.com/demo/thickbox/
Save to Directory separately
--js
--css
--images
In
First, insert in the <script type= "Text/javascript" src= "Js/jquery.js" ></script>
<script type= "Text/javascript" src= "Js/thickbox.js" ></script>
Then modify thickbox.js named Loadinganimation.gif the path to this picture
Second, insert CSS in <link rel= "stylesheet" href= "Css/thickbox.css" type= "text/css" media= "screen"/>
Example

Single Picture:

Add a <a href= "" > Then add a class= "Thickbox" to the connection
<a href= "images/single.jpg" title= "caption" class= "Thickbox" > Pictures </a>
Title Plus connection
title= "<a href=" images/aa.jpg ">my link</a>"
The idea comes from Lightbox

Multiple pictures:
The difference from a single picture is one more same rel element
<a href= "images/a.jpg" class= "Thickbox" rel= "test" title= "testing One" > Test one </a>
<a href= "images/b.jpg" class= "Thickbox" rel= "test" title= "Testing II" > Test two </a>

Display an arbitrary ID when displaying content in one layer:
Create a link <a href= "" >
Add a class attribute to the connection class= "Thickbox"
Add an anchor point to the point: #TB_inline
Add a string behind the anchor point:? height=300&width=300&inlineid=myonpagecontent
Add a &modal=true to the back of the string to measure the Onclik=tb_remove () that must be called in the pop-up layer for the hidden layer
The Inlineid is the ID of the element you want to display.

Display URLs with Ifame
Create a link <a href= "" >
Add a class attribute to the connection class= "Thickbox"
Provide a URL connection in the href attribute that you want to display in Thickbox
Add a string behind the URL? keepthis=true&tb_iframe=true&height=400&width=600
Description Add all other query parameters before the Tb_iframe parameters. That means that the other parameters must be put in TB before

Ajax Content
Display URLs with Ifame
Create a link <a href= "" >
Add a class attribute to the connection class= "Thickbox"
Provide a URL connection in the href attribute that you want to display in Thickbox
Add string after connection? height=300&width=300

Other Tips

Thickbox is a good dialog box plug-in, but the official station provides a very restrictive way of using. For example, I have a thumbnail on the page, click on the Thickbox to display a larger image. Use the Official method:

<a href= "Large map url" title= "Introduction" class= "Thickbox" ></a>

This method is convenient, but it has a lot of limitations.
First, you must have a label for each of these IMG tag coats
Second, only use class= "Thickbox" let Thickbox to bind events
Third, you cannot define events yourself
Four, when the page is loaded with Ajax, the DOM in the loaded page is not bound by Thickbox

A little look at the next Thickbox code, in fact, the above problems can be used thickbox their own method to solve, the following examples illustrate.

example One. I can position myself to need to use thickbox element, do not want to add class= "Thickbox". HTML is as follows:

<div id= "Piclist" >   <a href= "pic01.jpg" ></a>   <a href= "pic02.jpg" ></a>
</div>

Need to Id= "piclist" inside the A tag under the IMG use Thickbox, the code is as follows:

$ (function () {   tb_init ("#PicList a[img]");

example Two. I loaded a piece of HTML with Ajax, but the HTML class= "Thickbox" tag clicked without any response. To resolve this issue, simply execute the following code when AJAX loads HTML and updates to the page:

Tb_init (' A.thickbox, Area.thickbox, Input.thickbox '); The quotation mark is the default selector for Thickbox, and you can use a custom selector like this in the example one

example Three. I would like to click on the IMG tag to show Thickbox, do not want to be outside the IMG tag <a url= "Big picture" class= "Thickbox" > such labels. The thumbnail URL simply adds s to the suffix of the large map URL. For example, the big picture is pic01.jpg, small picture is pic01s.jpg. You can do this by using the following methods. HTML is as follows:

<div id= "Piclist" >    
</div>

The code is as follows:

$ (function () {   $ (#PicList img). Click (function () {   tb_show ("", this.src.substring (0,  this.src.length-5) + '. jpg ', false);   });
});

Also, if you want to use other events, change the click in Example 3 to the event that you want to trigger the Thickbox.