Example of jQuery. fancybox. js usage and fancybox usage

Example of jQuery. fancybox. js usage and fancybox usage

This document describes how to use the jQuery. fancybox. js plug-in the jquery bullet layer. We will share this with you for your reference. The details are as follows:

Fancybox is a jquery plug-in with powerful functions. You can add shadow effects to enlarged images. You can add navigation buttons for a group of images. In addition to display layers, you can also display iframed content and customize styles through css. With other plug-ins, you can achieve more results.

The official download and instance address: http://fancyapps.com/fancybox/ is provided here

Provided here.

So far, fancybox's latest version 2.1.5 has changed the call method and added some parameters. There are detailed parameter descriptions at the bottom of the above address. The following describes the procedure.

1. Use fancybox to load at least two files

<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" />

I am a little upset here, that is, loading css files. There are not many css files to be loaded in jquery plug-ins.

2. Place where html calls fancybox

<A id = 'cybox' href = "test1.html"> click here </a> // Add a class = "fancybox" to the <a> label. ajax ", otherwise the parameter type should be added in js to describe

I don't know which version to start with. I have to add fancybox. ajax to the class when calling ajax. I need to add fancybox. iframe to call iframe. Otherwise, it cannot be called. The premise is that fancybox is called without specifying the parameter of the bullet layer type. Type.

3. js calls fancybox

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

One thing to note about the fancybox plug-in is that whether it is to use the ajax bullet layer or iframe to load the page, the pop-up content should be added with the height and width. If it is not added, it is adaptive by default. In this case, there will be a problem. If CSS uses a special font, even if you set the width and height, the size of the bullet layer calculated by different browsers will be different.