1. Introduction of jquery Core library and FancyBox plugin library
< script type = "Text/javascript" src = "Http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" (www.111cn.net) ></ script > < script type = "Text/javascript" src = "/fancybox/jquery.fancybox-1.3.4.pack.js" ></ script > from:http://www.111cn.net/wy/jquery/47982.htm
Optional – If you need to use fancy transition (some animation effects) You also need to introduce the following script
<type= "Text/javascript" src= "/fancybox/ Jquery.easing-1.4.pack.js "></script>
Optional – If you need to support the mouse wheel scrolling effect you also need to introduce the following script
<type= "Text/javascript" src= "/fancybox/ Jquery.mousewheel-3.0.4.pack.js "></script>
2. Introduce style file:
<rel= "stylesheet" href= "/fancybox/jquery.fancybox-1.3.4.css" type= "Text/css" media= "screen">
3. Create a LINK element on the page
A, picture elements
<id= "Single_image" href= "image_big.jpg">< src= "image_small.jpg" kesrc= "image_small.jpg" alt ="" ></ a >
B, Ordinary text
<aID= "inline"href= "#data"kesrc= "#data">This shows content of the element who has id= "data"</a> <Divstyle= "Display:none;"> <DivID= "Data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Div> </Div>C, Iframe<ahref= "Http://www.example?iframe">This goes to IFRAME</a>
Or
<class= "iframe" href= "http://www.example">This Goes to iframe</a>D, Ajax<href = "http://www.example/data.php" > This takes content using Ajax</a>
If you want to display descriptive information, you can add a title to the link and put the description in the title.
4. The final jquery initialization code
$ (document). Ready (function () {/ * Most basic, using the default configuration */ $ ("A#single_image"). FancyBox (); /* Use a custom configuration * /$ ("A#inline"). FancyBox ({ ' Hideoncontentclick ': true }); /* Click to configure the support group to play * /$ ("A.group"). FancyBox ({ ' transitionin ' : ' elastic ', ' transitionout ': ' elastic ', ' Speedin ' : All , ' Speedout ' : $ , ' Overlayshow ' : false });
Create albums with the rel tag
<aclass= "Grouped_elements"rel= "Group1"href= "Image_big_1.jpg"><imgsrc= "Image_small_1.jpg"alt=""></a> <aclass= "Grouped_elements"rel= "Group1"href= "Image_big_2.jpg"><imgsrc= "Image_small_2.jpg"alt=""></a> <aclass= "Grouped_elements"rel= "Group2"href= "Image_big_3.jpg"><imgsrc= "Image_small_3.jpg"alt=""></a> <aclass= "Grouped_elements"rel= "Group2"href= "Image_big_4.jpg"><imgsrc= "Image_small_4.jpg"alt=""></a>$ ("a.grouped_elements"). FancyBox ();
This article turns from http://www.111cn.net/wy/jquery/47982.htm,
Another article about the use of FancyBox: http://www.cnblogs.com/qinpengming/archive/2013/05/26/3099848.html
jquery Popup Plugin FancyBox usage tutorial