I'm a porter.
This article turns from http://www.weste.net/2013/4-22/90629.html
First, give FancyBox's project home address: http://fancybox.net/,
The characteristics of FancyBox are as follows:
- Support for images, HTML text, Flash animations, iframe, and Ajax
- You can customize the CSS style of the player
- Can be played as a group
- If the mouse scroll plug-in (mouse wheel plugin) included, FancyBox can also support the mouse wheel scroll to flip through the picture
- FancyBox Player supports projection, more stereoscopic feel
FancyBox How to use:
1. Introduction of jquery Core library and FancyBox plugin library
<type= "Text/javascript" src= "http://ajax.googleapis.com/ajax/ Libs/jquery/1.4/jquery.min.js "></script>< Type= "Text/javascript" src= "/fancybox/jquery.fancybox-1.3.4.pack.js" ></ Script >
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. Add Style sheet 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
<href= "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 ();
FancyBox's API and configuration options description
Property name |
Default Value |
Brief Description |
Padding |
10 |
Browse box padding, and css padding a meaning |
Margin |
20 |
Browse box margins, and margin in CSS one meaning |
Opacity |
False |
If true, the transparency can be changed when the animation changes FancyBox |
Modal |
False |
If true, then ' Overlayshow ' will be set to ' true ', ' Hideonoverlayclick ', ' Hideoncontentclick ', ' Enableescapebutton ', ' Showclosebutton ' will be set to ' false ' |
Cyclic |
False |
If True, the album will loop back |
Scrolling |
' Auto ' |
Set the value of the overflow to create or hide the scroll bar, which can be set to ' auto ', ' yes ', or ' no ' |
Width |
560 |
Sets the width of the IFRAME and SWF, and if ' autodimensions ' is ' false ', this can also set the width of the normal text |
Height |
340 |
Sets the height of the iframe and SWF, and if ' autodimensions ' is ' false ', this can also set the height of normal text |
Autoscale |
True |
If the browser window size can be adapted for True,fancybox |
Autodimensions |
True |
In inline text and Ajax, set whether the dimensions of the element are dynamically resized, and if true, make sure that you have set the dimension size for the element |
Centeronscroll |
False |
If true, FancyBox will remain in the center of the browser when you scroll the scroll bar |
Ajax |
{ } |
As with jquery's Ajax invocation options, note that the two callback events, ' Error ' and ' success ', are rewritten by FancyBox |
Swf |
{wmode: ' Transparent '} |
Settings options for SWF |
Hideonoverlayclick |
True |
If true, click the Mask layer to close the FancyBox |
Hideoncontentclick |
False |
If true, click Play to close the FancyBox |
Overlayshow |
True |
If true, the mask layer is displayed |
Overlayopacity |
0.3 |
Opacity of mask layer (range 0-1) |
Overlaycolor |
' #666 ' |
Background color of mask layer |
Titleshow |
True |
If true, the caption is displayed |
Titleposition |
' Outside ' |
Sets the location of the caption display. Can be set to ' outside ', ' inside ' or ' over ' |
TitleFormat |
Null |
You can customize the formatting of headings |
Transitionin, Transitionout |
' Fade ' |
Sets the animation effect. can be set to ' elastic ', ' fade ' or ' none ' |
Speedin, Speedout |
300 |
Fade and elastic time interval in milliseconds for animation transitions |
Changespeed |
300 |
Change the time interval (that is, the rate of change) of the FancyBox dimension in milliseconds |
Changefade |
' Fast ' |
The time interval at which content fades (that is, the speed of change) when switching |
Easingin, Easingout |
' Swing ' |
Use easing for elastic animations |
Showclosebutton |
True |
If true, the Close button is displayed |
Shownavarrows |
True |
True to display the previous next navigation arrow |
Enableescapebutton |
True |
If True, ESC is enabled to close the FancyBox |
OnStart |
Null |
callback function, loading content is triggered |
OnCancel |
Null |
callback function, triggering after canceling content loading |
OnComplete |
Null |
callback function, triggering when loading content is complete |
Oncleanup |
Null |
callback function, triggering before closing FancyBox |
Onclosed |
Null |
callback function, triggering after closing FancyBox |
JQuery FancyBox Plugin usage parameters