jQuery elastic layer plug-in jquery.fancybox.js usage example_jquery

The example in this article describes the usage of jQuery elastic layer plug-in jquery.fancybox.js. Share it with everyone for your reference, the details are as follows:

Fancybox is a jquery plug-in with powerful functions. It supports adding shadow effects to enlarged images and adding navigation operation buttons to a group of related images. In addition to displaying layers, it can also display iframed content and customize styles through CSS. Combined with other plug-ins, you can achieve even more swirling effects.

The official download and example address are given here: http://fancyapps.com/fancybox/

Attached is the download address of this site.

So far, the latest version of fancybox 2.1.5 has some changes in the calling method and some additional parameters. At the bottom of the above address, there are very detailed parameter descriptions. Let’s briefly talk about the usage process.

1. To use fancybox, at least two files must be loaded

<script type="text/javascript" src="jquery.fancybox.js&#63;v=2.1.2"></script>
<link rel="stylesheet" type="text/css" href="jquery.fancybox.css&#63;v=2.1.2" media="screen" />

One thing that makes me unhappy here is that css files need to be loaded. There are not many jquery plug-ins that need to load css files.

2. Where html calls fancybox

<a id='fancybox' href="test1.html" >click here</a>
//<a>标签里面加上一个class="fancybox.ajax"，不然js里面要加参数type来说明

I don’t know from which version. When calling ajax, you must add fancybox.ajax to the class. When calling iframe, you must add fancybox.iframe. Otherwise, it cannot be adjusted. The premise is that fancybox is called without specifying the elastic layer type parameter. To refer to the type, use the type parameter.

3. js calls fancybox

$("#fancybox").fancybox({
  'width'        : '30%',
  'height'        : '20%',
  'autoScale'      : false,
  'transitionIn'     : 'none',
  'transitionOut'    : 'none',
  'onClosed' : function() {alert('test');}
});

One thing you should pay attention to with the fancybox pop-up plugin is that whether you use an ajax pop-up or an iframe to load the page and pop up something, you must add height and width. If not, the default will be adaptive. This will cause problems. If the CSS uses special fonts, even if you set the width and height, the size of the pop-up layer calculated by different browsers will be different.

Readers who are interested in more content related to jQuery plug-ins can check out the special topic of this site: "Summary of common jQuery plug-ins and usage"

I hope this article will be helpful to everyone in jQuery programming.