Jquery plug-in Fancybox's rich pop-up layer effect with source code download

Jquery plug-in Fancybox's rich pop-up layer effect with source code download_jquery

WBOY

Release： 2016-05-16 15:28:19

Original

1101 people have browsed it

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>

Copy after login

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>

Copy after login

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 &#63; ' ' + title : '') + '</span>'; 
  } 
 }); 
});

Copy after login

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.