FancyBox plugin details how to use-Customize your own FancyBox (1)

Reprint Please specify source: http://www.uphtm.com/js/168.html

Although the FancyBox effect looks really good, we may want to make some changes with our own display appearance. You can customize various parts of the FancyBox appearance, including buttons to close the FancyBox window or navigate to the previous image or the next image, or you can modify the color and transparency of the transparent background that overrides the page, or change the background color of the picture frame and the caption box. Some changes involve providing different options for the FancyBox function, while others require you to make changes directly to the CSS file.

FancyBox options

The FancyBox plugin allows customization options to affect the appearance of light box effects. Basically, we give the FancyBox function a direct amount of an object that contains the name of the option you want to set and the value you want to set for it. For example, to change the color and transparency of the background placed on top of the page, you can create a variable that contains the new settings and pass it to FancyBox as follows:

1. $ (' #gallery a '). FancyBox ({
2. Overlayopacity:.5,
3. Overlaycolor: ' #F64 ',
4. Transitionin: ' Elastic ',
5. Transitionout: ' Elastic '
6. }）；

In this example, the overlay color is set to bright red (#F64) and its transparency is set to 50% (. 5). Additionally, Transitionin and transitionout are set to elastic, which affects how large images appear on the screen. In this example, the elastic setting causes the image to appear on the screen when the thumbnail is clicked, and when the Close button is clicked (or anywhere else on the page), the images disappear from the screen (usually, the larger image just appears and disappears without any animation effects).

JQuery FancyBox receives a number of different options, here are just some of the most useful:

Overlaycolor. Overrides the background color of the page when the FancyBox displays the image. This option accepts a hexadecimal color value, such as #ff0033, and if this option is not set, the plugin will use Gray (#666). Set this option as follows:

1. Overlaycolor: ' #ff6346 '

overlayopacity. The transparency of the overlay. This option sets the number of pages that can be seen below by overwriting. We have specified a value between 0 and 1: for example,. 5 is 50% transparency. If you don't want to be able to see content through overlays, for example, if you want the other parts of the Web page to be completely black when the image is displayed, you can set this option to 1. If this option is not set, FancyBox will set the transparency to 30% (. 3). Setting this value to 0 hides the overlay.

1. overlayopacity:.5

· Padding. Around the space of the image, it creates a visible border around the image. Typically, FancyBox sets the padding to 10 pixels, but you can change it to any value you want. 0 will completely remove the bounding rectangle of the image that pops up. Provide a number directly (FancyBox assumes that this is a pixel value, so you don't need to add px as you normally would in CSS):

1. Padding:5

Changespeed. When you move from one image to another in a supported FancyBox page, the bounding rectangle that contains the image is animated, and it changes size with the size of the current image to match the next image. You can control the speed of this change by setting this option. The default value is 300, which means 300 milliseconds, or slightly shorter than half a second. For example:

1. changespeed:500.

Article source page Programming http://www.uphtm.com reprint Please specify Source: http://www.uphtm.com/js/168.html

FancyBox plugin details how to use-Customize your own FancyBox (1)