jquery Shell Plug-in jquery.fancybox.js usage Example _jquery

This example describes the Jquery.fancybox.js usage of the jquery Pinball plug-in. Share to everyone for your reference, specific as follows:

FancyBox is a jquery plug-in, powerful. Support to enlarge the picture to add shadow effect, for a group of related pictures to add navigation action button, in addition to the display layer, can also display iframed content, through the CSS custom style. With other plug-ins, can achieve a more rotating effect.

Here is the official download and the example address: http://fancyapps.com/fancybox/

Attached to the site download address.

So far, the latest version of FancyBox 2.1.5, the calling method has changed some, and the parameters have been added. At the bottom of the address above, there is a very detailed description of the parameter. Here is a simple procedure to use.

1, to use FancyBox, at least two files to load

<script type= "Text/javascript" src= "jquery.fancybox.js?v=2.1.2" ></script>
<link rel= " Stylesheet "type=" Text/css "href=" jquery.fancybox.css?v=2.1.2 "media=" "Screen"/>

One thing I'm not happy about here is that I want to load CSS files, and not many of the jquery plug-ins are loaded with CSS files.

2, where the HTML calls FancyBox

<a id= ' FancyBox ' href= "test1.html" >click here</a> the//<a>
tag, add a class= "Fancybox.ajax", Or JS inside to add parameter type to explain

Do not know from which version start, invoke Ajax must be in class inside add Fancybox.ajax this, call iframe to add Fancybox.iframe. Otherwise it can't be transferred. The premise is that the call FancyBox does not specify a parameter for the projectile layer type. Refers to the type with this parameter.

3, JS call FancyBox

$ ("#fancybox"). FancyBox ({
  ' width '        : ' 30% ', '
  height '        : ' 20% ',
  ' Autoscale '      : false,
  ' Transitionin '     : ' None ',
  ' transitionout '    : ' None ',
  ' onclosed ': function () {alert (' Test ');}
});

FancyBox Bomb Layer Plug-in there is a point to note, is whether the use of Ajax shells, or an iframe to load the page, pop-up things, to add high and wide, if not added, the default is adaptive. This will have a problem, if the CSS with a special font, even if you set, width and height, different browsers calculate the size of the shells will not be the same.

More about jquery plug-ins interested readers can view the site topics: "jquery common Plug-ins and Usage summary"

I hope this article will help you with the jquery program design.