jquery plug-ins FancyBox Rich pop-up layer effect with source download _jquery

FancyBox is an excellent jquery plug-in that can showcase a rich pop-up effect. Before we an article introduced the Facybox pop-up layer effect, compared to Facybox,fancybox appears more complete, it can load div, pictures, picture sets, Ajax data, can also load SWF movies, iframe page and so on.

Effect Demo Source Download

FancyBox Features:

Support for images, HTML text, Flash animations, IFrame, and Ajax;
You can customize the CSS style of the player;
Can be played in group form;
If the mouse scrolling plug-in (mouse wheel plugin) is included in the FancyBox can also support the mouse wheel scrolling to browse the picture;
FancyBox Player supports projection, more stereoscopic feeling.

Supports keyboard direction keys and ESC keys.
Rich parameter settings and method calls.
Scalability is strong.

How to use it?

This paper takes the Demo2 in demo as an example to explain the use of FancyBox.

1, add JavaScript references and CSS file references

<link rel= "stylesheet" type= "Text/css" href= "Fancybox.css"/> "<script type=" Text/javascript "src=" js/ 
Jquery.js "></script> 

2, HTML

3, call FancyBox

$ (function () { 
 $ ("A[rel=group]"). FancyBox ({ 
 ' titleposition ': ' Over ', 
 ' cyclic ': true, 
 ' TitleFormat ': function (title, CurrentArray, Currentindex, currentopts) {return 
   ' <span id= ' Fancybox-title-over ">" + (currentindex + 1) + 
 '/' + Currentarray.length + (title.length? ' + title: ') + ' </span> '; 
  } 
 }; 

Note that the FancyBox parameter is formatted as: ' key ': ' Value '. Titleposition: Set the picture caption to appear in the picture . Cyclic: Set the image browsing mode for circular browsing. TitleFormat: Format the caption of the picture to display the total number of pictures and the order of the current picture.

FancyBox plug-in main parameters and methods list

Parameters/Methods	Describe	Default value
Basic
Width	Sets the width of the pop-up serial port, when the content is swf,iframe or a single line of text, The ' autodimensions ' should be set to False	560
Height	Sets the height of the pop-up serial port, when the content is swf,iframe or a single line of text, The ' autodimensions ' should be set to False	340
Cyclic	Whether the loop is displayed when the content is a picture set.	False
Centeronscroll	The pop-up window is always centered in the browser.	False
Modal	Whether to use the modal window. When set to True, you should also: ' Hideonoverlayclick ', ' Hideoncontentclick ', ' Enableescapebutton ', ' Showclosebutton ' set to false, and ' Overlayshow ' set to True	False
Titleposition	The position of the title, which can be set to ' outside ', ' inside ' or ' over '	' Outside '
Transitionin, Transitionout	The way the window is displayed can be set to ' elastic ', ' fade ' or ' none '	' Fade '
Send	method, send the data of the cropped picture to the server, so that the server receives the parameter for processing. E.g:cropzoom.send (' process.php ', ' POST ', {id=1},function (R) {alert (r);});
Method
$.fancybox.showactivity	Show Load Animation
$.fancybox.hideactivity	Hide Load Animation
$.fancybox.close	Close window
$.fancybox.resize	Automatically adjusts the height of the window to match the content
Centered	Whether the selection is centered is displayed in the center of the container.

The above content is about the jquery plug-in FancyBox rich pop-up layer effect to download the entire description of the source, I hope you like.