jquery Picture Play plugin FancyBox (Lightbox)

Effect Preview

Demo Source Download

The characteristics of FancyBox are as follows:

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

FancyBox How to use:

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" ></ 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 also need to introduce the following script

<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

<script type= "Text/javascript" src= "/fancybox/jquery.mousewheel-3.0.4.pack.js" ></script>

2. Add Style sheet file

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

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

B, Ordinary text

<a id= "inline" href= "#data" kesrc= "#data" >this shows content of element who have id= "data" </a> <div style= "D Isplay:none; " >    <div id= "Data" >lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>

C, Iframe

<a href= "Http://www.example?iframe" >this goes to iframe</a> or <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 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

<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 ();

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: 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 Picture Play plugin FancyBox (Lightbox)