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:
Can support images, html text, flash animation, iframe And ajax support;
You can customize the css style of the player;
Can be played in groups;
If the mouse wheel plugin is included, fancybox can also support mouse wheel scrolling to flip through pictures;
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:
1 |
|
If you need to use transition (some animation effects), you also need to introduce the following js:
1 |
|
If you need to support mouse For the wheel scrolling effect, you also need to introduce the following js:
1 |
|
Then introduce the style sheet:
1 |
|
and then add it on the page An a tag:
1 |
|
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:
1 |
|
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:
1 |
|
The calling method is also very simple:
1 |
|
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!