Home >Web Front-end >JS Tutorial >Jquery plug-in Fancybox's rich pop-up layer effect with source code download_jquery
Fancybox is an excellent jquery plug-in that can display rich pop-up layer effects. We have previously introduced the fancybox pop-up layer effect in an article. Compared with fancybox, fancybox has more complete functions. In addition to loading DIVs, pictures, picture sets, Ajax data, it can also load SWF movies, iframe pages, etc.
Effect demonstration Source code download
fancybox Features:
Can support images, html text, flash animation, iframe and ajax support;
You can customize the css style of the player;
Can be played in groups;
If the mouse wheel plugin is included, fancybox can also support mouse wheel scrolling to flip through pictures;
fancybox player supports projection, giving it a more three-dimensional feel.
Support keyboard arrow keys and ESC key.
Rich parameter settings and method calls.
Strong scalability.
How to use?
This article uses 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> <script type="text/javascript" src="js/fancybox.js"></script>
2. HTML
<h4>图片集,支持键盘方向键</h4> <p> <a rel="group" href="images/b1.jpg" title="图片标题"><img alt="" src="images/s1.gif" /></a> <a rel="group" href="images/b2.jpg" title="图片标题"><img alt="" src="images/s2.gif" /></a> <a rel="group" href="images/b3.jpg" title="蓝天白云绿草"><img alt="" src="images/s3.gif" /></a> </p>
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 parameter setting format of fancybox is: 'key':'value'. titlePosition: Set the display position of the picture title to on the picture. cyclic: Set the image browsing mode to cyclic browsing. titleFormat: Set the format of the picture title, which can display the total number of pictures and the current picture order.
List of main parameters and methods of fancybox plug-in
Parameters/Methods | Description | Default value |
Basic | ||
width | Set the width of the pop-up serial port. When the content is swf, iframe or single line text, 'autoDimensions' should be set to false |
560 |
height | Set the height of the pop-up serial port. When the content is swf, iframe or single line text, 'autoDimensions' should be set to false |
340 |
cyclic | Whether to display in a loop when the content is a picture collection. | false |
centerOnScroll | Pop-ups are always centered in the browser. | false |
modal | Whether to use modal window.When set to true, should also include: 'hideOnOverlayClick', 'hideOnContentClick', 'enableEscapeButton', 'showCloseButton' set to false, and 'overlayShow' set to true |
false |
titlePosition | The position of the title can be set to 'outside', 'inside' or 'over' | 'outside' |
transitionIn, transitionOut | The window display mode can be set to 'elastic', 'fade' or 'none' | 'fade' |
send | Method, send the data of the cropped image to the server so that the server can receive the parameters for processing, e.g: cropzoom.send('process.php','POST',{id=1},function(r){ alert(r); }); |
|
Method | ||
$.fancybox.showActivity | Show loading animation | |
$.fancybox.hideActivity | Hide loading animation | |
$.fancybox.close | Close window | |
$.fancybox.resize | Automatically adjust the height of the window to fit the content | |
Centered | Whether to center the selection, that is, display it in the center of the container. |
The above content is the entire description about the rich pop-up layer effect of Fancybox of Jquery plug-in with source code download. I hope you like it.