jquery plugin bgstretcher.js to achieve full screen background effects _jquery

Bgstretcher (Background stretcher) is a jquery plug-in that allows you to add multiple background images to your Web page, and multiple background images can be automatically switched, while the background image size is adaptive to the size of the browser window. The switching effect of the background image has fade in and out, scrolling, the slide, which chooses the scroll and the slide, may choose the direction, up or down, or left upper right, right upper left. Picture switching order can also be set forward, reverse or random. More options depends on your own research.

Bgstretcher is a jquery plugin that allows you to add a large image (or a set of images) to the background of your Web page and will resize the image proportionally to fill the entire window area. If you use multiple image modes (the speed and duration of the slides can be configured), the plug-in will act as a slide.

Plug-in features:

Script files are simple, easy to set up, support all new browsers, and support single or multiple pictures.

Plug-in use:

First of all, you have to download the plugin first, the plug-in package already contains the required JS files.

Then, insert the following code into the

<link rel= "stylesheet" type= "Text/css" href= "/main.css/>" (<link "rel=" stylesheet "type=" Text/css
".. /bgstretcher.css "/>
<script type=" Text/javascript "src=". /jquery-1.5.2.min.js "></script>
<script type=" Text/javascript "src=". /bgstretcher.js "></script>

Next, insert the following code into the above code, to initialize the Bgstretcher plug-in, to tell the plug-in on which element to work, and can configure the plug-in options. Also, note that the picture path in the code does not go wrong.

<script type= "Text/javascript" >
 $ (document). Ready (function () {
 
  //Initialize 
 backgound, stretcher $ ('. Demoo '). Bgstretcher ({
 images: [' images/sample-1.jpg ', ' images/sample-2.jpg ', ' images/sample-3.jpg ', '] Images/sample-4.jpg ', ' images/sample-5.jpg ', ' images/sample-6.jpg '],
 imagewidth:800, 
 imageheight:400, 
 slidedirection: ' N ',
 slideshowspeed:1000,
 transitioneffect: ' fade ',
 sequencemode: ' Normal ',
 });
 
 });
</script>

This plugin is not just for the entire Web page background, but also for a page element, of course, at least this element can set the background, such as div and so on. Select the page element is by ID or class, should be the body this element name is the only element name in the Web page, that is, to set the background of the entire page. If you are setting up a background for a DIV block on a page, you need to define an ID for the DIV or know that its style class name is also OK, and the ID and class name are best to be unique, otherwise the effect is amazing.

Plug-in options:

configuration Options	Default Value	Options Description
Imagecontainer	Bgstretcher	Bgstretcher'll automatically build structure for the images list of DOM tree. This parameter was ID for the images holder. Try inspecting the "tree" with a FireBug "to get" how it ' s constructed.
Resizeproportionally	True	Indicates if background image (s) is resized proportionally or not.
Resizeanimate	False	Indicates if background image (s) is resized with animation. (is careful, this may slow down some PCs if your images are large.)
Images	Empty	An array containing list of images to is displayed on page ' s background.
ImageWidth	1024	Original image ' s width.
ImageHeight	768	Original image ' s height.
MaxWidth	Auto	Maximum image ' s width.
MaxHeight	Auto	Maximum image ' s height.
Nextslidedelay	3000 (3 seconds)	Numeric value in milliseconds. The parameter sets delay until next slide should start.
Slideshowspeed	Normal	Numeric value in milliseconds or JQuery string value (' Fast ', ' normal ', ' slow '). The parameter sets the speed of transition between images.
Slideshow	True	Allows or disallows slideshow functionality.
TransitionEffect	Fade	Transition effect (use Also:none, Simpleslide, Superslide).
Slidedirection	N	Slide Diraction:n–north, S–south, W–west, e–east (If transitioneffect = Superslide use ALSO:NW, NE, SW, SE).
Sequencemode	Normal	Sequence mode (use Also:back, random)
Buttonprev	Empty	Previous button CSS Selector
Buttonnext	Empty	Next button CSS Selector
Pagination	Empty	CSS selector for pagination
Anchoring	' Left Top '	Anchoring Bgstrtcher Area regarding window
Anchoringimg	' Left Top '	Anchoring images regarding window
Preloadimg	False	For preload images use True
Stratelementindex	0	Start Element Index
Callbackfunction	Null	Name of callback function

Plug-in method:

Method Name Method Description
$ (ObjID). Bgstretcher.play () Resume background slideshow
$ (ObjID). Bgstretcher.pause () Pause background Slideshow
$ (ObjID). Bgstretcher.sliderdestroy () Destroy background slideshow

Browser compatibility:

MS Internet Explorer 6, 7, 8, 9
Mozilla Firefox 2, 3, 4
Opera 9+
Apple Safari
Google Chrome

The above mentioned is the entire content of this article, I hope you can enjoy.