"jquery" FancyBox is an excellent jquery pop-up Display plugin

Today to share a good jquery pop-up display plugin FancyBox. In addition to being able to display images, it can also show flash, iframe content, HTML text, and Ajax calls, and we can customize the look through CSS.

FancyBox Features:

1. Support for images, HTML text, Flash animations, iframe, and Ajax are supported;
2. You can customize the CSS style of the player;
3. Can be played in a group format;
4. If the mouse scroll plug-in (mouse wheel plugin) included in the words FancyBox can also support the mouse wheel scroll to flip through the picture;
5. The FancyBox player supports projection and has a more stereoscopic feel.

FancyBox How to use:

First you need to introduce the jquery core library and the FancyBox plugin:

< Script src = "Http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" ></ Script > < Script src = "/fancybox/jquery.fancybox-1.3.4.pack.js" ></ Script >

If you need to use transition (some animation effects) You also need to introduce the following JS:

< Script src = "/fancybox/jquery.easing-1.4.pack.js" ></ Script >

If you need to support the mouse wheel scrolling effect you also need to introduce the following JS:

< Script src = "/fancybox/jquery.mousewheel-3.0.4.pack.js" ></ Script >

Then introduce the style sheet:

<rel= "stylesheet"  href= "/fancybox/jquery.fancybox-1.3.4.css"  />

Then add an a tag to the page:

<id= "Single_image"  href= "image_big.jpg"><  src= "image_small.jpg"  alt= ""/></a >

The image in the href of a tag is a larger image that we need to display.

Finally call the FancyBox method:

$ ("#single_image"). FancyBox ();

Of course, this can only show a picture, and sometimes we may need to make a photo album and so on more than one image, then you can use the Rel attribute to create a picture group (that is, the FancyBox feature of the 3rd), the following code:

<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>

The invocation method is also simple:

$ (". Grouped_elements"). FancyBox ();

FancyBox Parameters:

FancyBox is excellent because its parameters are very powerful and can meet almost all of our needs.

Property value	Default value	Describe
Padding	10	The value of the padding inside the player
Margin	20	The value of the outer margin of the player
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	{ }	Same as jquery's Ajax invocation options. Note: The two callback events ' error ' and ' success ' are rewritten by FancyBox
Swf	{wmode: ' Transparent '}	Settings options for SWF
Hideonoverlayclick	True	If true, click the matte layer to close the FancyBox
Hideoncontentclick	False	If true, click Play to close 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 '	Set the location of the caption display, which can be set to ' outside ', ' inside ' or ' over '
TitleFormat	Null	You can customize the formatting of headings
Transitionin,transitionout	' Fade '	Set 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, triggering when loading content
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

Website address: http://fancybox.net/