[Jquery] fancybox is an excellent jquery pop-up layer display plug-in, jqueryfancybox

[Jquery] fancybox is an excellent jquery pop-up layer display plug-in, jqueryfancybox

Today, I will share with you an excellent jquery pop-up layer display plug-in fancybox. In addition to displaying images, it can also display flash, iframe content, html text, and ajax calls. We can customize the appearance through css.

Fancybox features: fancybox usage:

First, introduce the jquery core library and fancybox plug-in:

<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 want 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 want to support scroll effects, you also need to introduce the following js:

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

Then introduce the style sheet:

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

Then add a label a to the page:

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

The image in the href of tag a is the big image that needs to be displayed on the layer.

Finally, call the fancybox method:

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

Of course, this can only display one image. Sometimes we may need to create multiple images such as an album, so we can use the rel attribute to create an image group (that is, the third point of fancybox features). The Code below:

<a class="grouped_elements" rel="group1" href="image_big_1.jpg"></a><a class="grouped_elements" rel="group1" href="image_big_2.jpg"></a>

The call method is also simple:

$(".grouped_elements").fancybox();

Fancybox parameters:

Fancybox is excellent because its parameter configuration is powerful and can meet almost all our needs.

Attribute Value	Default Value	Description
Padding	10	Player padding Value
Margin	20	Player margin value
Opacity	False	If it is true, the transparency of fancybox can be changed when the animation changes.
Modal	False	If this parameter is set to true, 'overlayshow' is set to 'true', 'hideonoverlayclick', 'hideoncontentclick', 'enablescapebutton ', and 'showcloseclick' is set to 'false'
Cyclic	False	If it is true, the album will be played cyclically.
Scrolling	'Auto'	Set the value of overflow to create or hide a scroll bar. You can set it to 'auto', 'yes', or 'no'
Width	560	Set the iframe and swf width. If 'autodimensions' is set to 'false', you can also set the width of common text.
Height	340	Set the height of iframe and swf. If 'autodimension' is set to 'false', you can also set the height of common text.
AutoScale	True	If it is true, fancybox can adapt the browser window size
AutoDimensions	True	In the internal text and ajax, set whether to dynamically adjust the size of the element. If it is true, make sure that you have set the size of the element.
CenterOnScroll	False	If it is true, when you scroll the scroll bar, fancybox will remain in the center of the browser
Ajax	{}	It is the same as jquery's ajax call options. Note: The 'error' and 'success' callback events will be overwritten by fancybox.
Swf	{Wmode: 'transparent '}	Settings of swf
HideOnOverlayClick	True	If the value is true, click the mask layer to disable fancybox.
HideOnContentClick	False	If it is true, click play content to close fancybox
OverlayShow	True	If true, the mask layer is displayed.
OverlayOpacity	0.3	Transparency of the mask layer (range: 0-1)
OverlayColor	'#123'	Background Color of the Mask Layer
TitleShow	True	If true, the title is displayed.
TitlePosition	'Outside'	Set the position where the title is displayed. You can set it to 'outside', 'Inside ', or 'over'
TitleFormat	Null	You can customize the title format.
TransitionIn, transitionOut	'Fade'	Set the animation effect to 'elastic', 'fade ', or 'none'
SpeedIn, speedOut	300	Interval between fade and elastic animation switching, in milliseconds
ChangeSpeed	300	The time interval for changing the fancybox size (that is, the variable speed) during switching, in milliseconds
ChangeFade	'Fast'	The time interval at which the content fades in and out (that is, the speed of change) during switching)
EasingIn, easingOut	'Swing'	Use Easing for elastic Animation
ShowCloseButton	True	If this parameter is set to true, the close button is displayed.
ShowNavArrows	True	If the value is true, the upper and lower navigation arrows are displayed.
EnableEscapeButton	True	If it is true, enable esc to disable fancybox
OnStart	Null	Callback Function, triggered when loading content
OnCancel	Null	Callback Function, triggered after content is canceled
OnComplete	Null	Callback Function, triggered after the content is loaded
OnCleanup	Null	Callback Function, triggered before the fancybox is disabled
OnClosed	Null	Callback Function, triggered after fancybox is disabled

 

Official website address: http://fancybox.net/

Which of the following heroes recommends a jquery-layer plug-in?

There is a pop-up box
Ability to customize positioning and scroll with screen without Jitter
You can also set the residence and lock screen
The tutorials and source code are provided.
Reference: www.blueidea.com/..20.12497

Fancybox () in jquery ()

1. fancybox should be a plug-in.
2. All rel attributes start with setliClass li
3. Find the plug-in. This is the parameter.