Example of jQuery. fancybox. js usage and fancybox usage

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.