jquery Pop-up widget FancyBox usage tutorial

Effect

FancyBox use method :

1, the introduction of jquery Core library and FancyBox plug-in library

The code is as follows	Copy Code
<script type= "Text/javascript" src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" ></ Script> <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 will also need to introduce the following script

The code is as follows	Copy Code
<script type= "Text/javascript" src= "/fancybox/jquery.easing-1.4.pack.js" ></script>

Optional – If you need to support mouse wheel scrolling effect you will also need to introduce the following script

The code is as follows	Copy Code
<script type= "Text/javascript" src= "/fancybox/jquery.mousewheel-3.0.4.pack.js" ></script>

2, the introduction of the style file:

The code is as follows	Copy Code
<link rel= "stylesheet" href= "/fancybox/jquery.fancybox-1.3.4.css" type= "text/css" media= "screen" >

3, create link elements on the page

A, picture elements

The code is as follows	Copy Code
<a id= "Single_image" href= "image_big.jpg" > </a>

B, Ordinary text

The code is as follows	Copy Code
<a id= "inline" href= "#data" kesrc= "#data" >this shows content of element who has id= "data" </a> <div style= "Display:none;" > <div id= "Data" >lorem ipsum dolor sit amet, consectetur adipiscing </div>c, Iframe <a href= "Http://www.example?iframe" >this goes to Iframe</a>

Or

The code is as follows	Copy Code
<a class= "iframe" href= "Http://www.example" >this goes to Iframe</a>d, Ajax <a href= "http://www.example/data.php" >this takes content using ajax</a>

If you want to display descriptive information, you can add title to the link and place the descriptive information in the title.

4, the final jquery initialization code

The code is as follows

Copy Code

$ (document). Ready (function () { /* Most basic, using the default configuration * * $ ("A#single_image"). FancyBox (); /* Use a custom configuration/* $ ("A#inline"). FancyBox ({ ' Hideoncontentclick ': true }); /* Configure Support Group Play * * $ ("A.group"). FancyBox ({ ' Transitionin ': ' Elastic ', ' Transitionout ': ' Elastic ', ' Speedin ': 600, ' Speedout ': 200, ' Overlayshow ': false }); });

Create albums with rel tags

The code is as follows	Copy Code
<a class= "grouped_elements" rel= "group1" href= "image_big_1.jpg" > </a> <a class= "grouped_elements" rel= "group1" href= "image_big_2.jpg" > </a> <a class= "grouped_elements" rel= "group2" href= "image_big_3.jpg" > </a> <a class= "grouped_elements" rel= "group2" href= "image_big_4.jpg" > </a> $ ("a.grouped_elements"). FancyBox ();

Description of FancyBox API and configuration options

Property name	Default Value	Brief Description
Padding	10	Browse the inside margin of the box, and padding in css a meaning
Margin	20	Browse the outside margin of the box, and the margin in CSS a meaning
Opacity	False	If true, FancyBox can change transparency as the animation changes
Modal	False	If true, the ' overlayshow ' will be set to ' true ', ' Hideonoverlayclick ', ' Hideoncontentclick ', ' Enableescapebutton ', ' Showclosebutton ' will be set to ' false '
Cyclic	False	If True, the album Loops
Scrolling	' Auto '	Sets the value of the overflow to create or hide the scroll bar, which can be set to ' auto ', ' yes ', or ' no '
Width	560	Set the width of the IFRAME and SWF, and if ' autodimensions ' is ' false ', you can also set the width of normal text
Height	340	Set the height of the iframe and SWF, and if ' autodimensions ' is ' false ', you can also set the height of normal text
Autoscale	True	If you can adapt the browser window size 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 you have set the size of the element
Centeronscroll	False	If true, FancyBox will stay in the browser center when you scroll the scroll bar
Ajax	{ }	And jquery's Ajax invocation options. Note: ' Error ' and ' success ' These two callback events will be overridden by FancyBox
Swf	{wmode: ' Transparent '}	SWF Setup Options
Hideonoverlayclick	True	If true, click the Mask layer to close FancyBox
Hideoncontentclick	False	If true, click Playback to close FancyBox
Overlayshow	True	If true, mask layer is displayed
Overlayopacity	0.3	Transparency 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 where the caption is displayed. Can be set to ' outside ', ' inside ' or ' over '
TitleFormat	Null	You can customize the format of headings
Transitionin, Transitionout	' Fade '	Sets the animation effect. can be set to ' elastic ', ' fade ' or ' none '
Speedin, Speedout	300	Time interval, in milliseconds, between fade and elastic animation transitions
Changespeed	300	The change time interval (that is, the rate of change) of the FancyBox dimension when switching, in milliseconds
Changefade	' Fast '	The time interval at which content fades (that is, the rate 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 next navigation arrow on the previous slide
Enableescapebutton	True	If true, enable ESC to close FancyBox
OnStart	Null	callback function, loading content is triggered
OnCancel	Null	callback function, triggering when content is canceled
OnComplete	Null	callback function, triggering after loading content completes
Oncleanup	Null	callback function, triggering before closing FancyBox
Onclosed	Null	callback function, triggering after closing FancyBox