Jquery tutorial (13) jquery lightbox (plug-in)

The first version of "thickbox" transplanted by Cody Lindley made me feel the charm of jquery for the first time. Later, he made some code upgrades to fix cross-browser compatibility issues.

Notes

$ (Document). Ready replaces the tb_init () function by appending an onclick event to each link containing the object name "thickbox.

Function tb_init(){$("A. thickbox").Click(Function(){VaR T =This.Title|This.Innerhtml|This.HrefExtra Tb _ show(T,This.Href)Bytes ;This.Blur()Bytes ;Return FalseBytes ;})Bytes ;
 

When these links are clicked, The tb_show () function is executed.

$(  "Body"  ) . Append  (  ""  ) Billing $ (  "# Tb_overlay"  ) . Click  ( Tb_remove ) Billing $ ( Window ) . Resize  ( Tb_position ) Billing $ ( Window) . Scroll  ( Tb_position ) Billing $ (  "# Tb_overlay"  ) . Show  (  ) Billing $ (  "Body"  ) . Append  (  ""  ) Bytes ;

As you can see, two DIV elements are added before the document body element. In other words, the two DIV elements will be added to the htmlCodeBefore closing the element.

The covered Div uses a specific CSS file containing an opaque appearance to specify the performance. The tb_window code is used to place an image in the page through Ahah or add another page. $ (Window). Resize and $ (window). Scroll tell jquery to execute the tb_position function when you resize the window or drag the page to flip the page. This is a means to ensure that thickbox is always in the center of the window.

Then, Cody queries the URL suffix.

VaR urlstring = /.JPG|.JPEG|.PNG|.GIF|.Html|.Htm|.PHP|.CFM|.ASP|.Aspx|.JSP|.JST|.RB|.Txt/G required var urltype = URL.Match(Urlstring)Bytes ;If(Urltype ='.Jpg'| Urltype ='.Jpeg'| Urltype ='.Png'| Urltype ='.Gif'){// Code to show images
 

If this is an image file, the jquery append function will add HTML code to the appropriate location.

$("# Tb_window").Append(""+"" Close"+ Caption +")Billing $("# Tb_closewindowbutton").Click(Tb_remove)Bytes ;
 

In addition, the remote file will be imported using jquery's load () function.

 
$("# Tb_ajaxcontent").Load(URL, Function(){...................