jquery pop-up layer plugin FancyBox and magnifier plugin Cloud-zoom

These two days to do an online project, in fact, not do it, hey, now say my understanding of this small page effect code download

1. Adding references to JavaScript references and CSS files

A reference to the JS code
<script type= "Text/javascript" src= "Http://code.jquery.com/jquery-1.4.4.min.js" ></script><script Src= "Fancybox/jquery.easing-1.3.pack.js" type= "Text/javascript" ></script>//if needed fancy Transition (some animated effects) you also need to introduce the following script <script src= "fancybox/jquery.fancybox-1.3.4.js" type= "Text/javascript" ></ Script><script src= "Cloud-zoom/cloud-zoom.1.0.2.js" type= "Text/javascript" ></script>//Magnifier plug-in
Reference to CSS Code

<link rel= "stylesheet" href= "Cloud-zoom/cloud-zoom.css" type= "Text/css" >
<link rel= "stylesheet" href= "Fancybox/jquery.fancybox-1.3.4.css" type= "Text/css" >

2.HTML Code

<div class= "Item" > <div class= "item-wrap" > <div class= "Slider" > <ul> <li><a rev= "group1" class= "Cloud-zoom" rel= "zoomheight:200,zoomwidth:400,adjustx:10,adjusty:-4,position: ' Body ' "Href=" images/formstack1.jpg "></a></li> <li><a rev= "group1" class= "Cloud-zoom" rel= "zoomheight:200,zoomwidth:400,adjustx:10,adjusty:-4,position: ' Body ' "Href=" images/formstack2.jpg "></a></li> <li><a rev= "group1" class= "Cloud-zoom" rel= "zoomheight:200,zoomwidth:400,adjustx:10,adjusty:-4,position: ' Body ' "Href=" images/formstack3.jpg "></a></li> </ul> </div> <a class= "Pre" href= "#" ></a > <a class= "Next" href= "#" ></a> <span>hover to zoom, click to view</                span> </div> <div class= "Intro" > Quickly Create any type of Web Form withOur easy -to-use drag and drop form builder.  Seamlessly create HTML forms and embed them on your website or use style templates to match your color,                Logo and overall look and feel. </p> <a href= "http://www.formstack.com" >http://www.formstack.com</a></div> </div>

First talk about Magnifying glass cloud-zoom, unlike other plug-ins, cloud-zoom do not need to be called in the JS code, only need to add Class A tag "cloud-zoom" can be implemented. If you also want to set other effects, you can use REL to set the following parameters:

Parameters	Description	Default Value
Zoomwidth	The width of the Magnifier window, which is the same as a small picture if it is the default value. Units are not required, there is a unit error	' Auto '
Zoomheight	The height of the magnifying glass window, which is the same as the small picture if it is the default value. Units are not required, there is a unit error	' Auto '
Position	The position of the Magnifier window, optional left, right, top, bottom, or you can specify an ID, such as position: ' element1 '	' Right '
Adjustx	The horizontal position from the small picture. Units are not required, there is a unit error	0
Adjusty	Distance from the vertical position of the small picture. Units are not required, there is a unit error	0
Tint	The color of the non-magnified area must be a hexadecimal color, such as ' #aa00aa ', and cannot be used with Softfocus	False
Tintopacity	Opacity, 0 is completely transparent, 1 is completely opaque	0.5
Lensopacity	Lens mouse pointer opacity, 0 is completely transparent, 1 is completely opaque, always transparent in tint and softfocus modes	0.5
Softfocus	Slight blur effect, optional true or false, cannot be used with tint	False
Smoothmove	Enlarges the smoothness of the image movement, the higher the number the smoother, the 1 is not smooth	3
Showtitle	Show picture title, optional true or False	True
Titleopacity	Title opacity, 0 is completely transparent, 1 is completely opaque	0.5

3. The JS code of the popup layer plugin

This is a description on the official website, with the default basic settings, custom settings, and the ability to apply pop-up layers to multiple items

We're using multiple cloud-zoom.

$ (". Content. Cloud-zoom"). FancyBox ({        ' transitionin '    :    ' elastic ',        ' Transitionout '    :    ' None ',        ' Speedin '        :    +,        ' speedout '        :    $,        ' overlayshow '    :    true,        ' Overlaycolor '    : '    #000 ',        ' cyclic '        :    true,        ' Easingin '        :    ' Easeinoutexpo '    });

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 pop-up layer plugin FancyBox and magnifier plugin Cloud-zoom