fancybox is an excellent jquery pop-up layer display plug-in

Today I will share with you an excellent jquery pop-up layer display plug-in fancybox. In addition to displaying images, it can also display flash, iframe content, html text and ajax calls. We can customize the appearance through css.

fancybox features:

1. Can support images, html text, flash animation, iframe And ajax support;

2. You can customize the css style of the player;

3. Can be played in groups;

4. If the mouse wheel plugin is included, fancybox can also support mouse wheel scrolling to flip through pictures;

5. fancybox player supports projection, giving it a more three-dimensional feel.

How to use fancybox:

First you need to introduce the jquery core library and fancybox plug-in:

<script></script><script></script>

If you need to use transition (some animation effects), you also need to introduce the following js:

<script></script>

If you need to support mouse For the wheel scrolling effect, you also need to introduce the following js:

<script></script>

Then introduce the style sheet:

<link>

and then add it on the page An a tag:

<a><img  src="/static/imghw/default1.png" data-src="image_small.jpg" class="lazy" alt="fancybox is an excellent jquery pop-up layer display plug-in" ></a>

The image in the href of the a tag is the large image we need the pop-up layer to display.

Finally call the fancybox method:

$("#single_image").fancybox();

Of course this can only display one picture, sometimes we may need to make a photo album If there are multiple pictures of the class, you can use the rel attribute to create a picture group (that is, the third point of the fancybox feature), the following code:

<a><img  src="/static/imghw/default1.png" data-src="image_small_1.jpg" class="lazy" alt="fancybox is an excellent jquery pop-up layer display plug-in" ></a><a><img  src="/static/imghw/default1.png" data-src="image_small_2.jpg" class="lazy" alt="fancybox is an excellent jquery pop-up layer display plug-in" ></a>

The calling method is also very simple:

$(".grouped_elements").fancybox();

fancybox parameters:

fancybox is excellent because its parameter configuration is very powerful and can meet almost all our needs. .

Official website address: http://fancybox.net/

The above is the entire content of this chapter. For more related tutorials, please visit jQuery Video Tutorial!