jQuery plug-in bgStretcher.js implements full-screen background effects_jquery

bgStretcher 2011 (Background Stretcher) is a jQuery plug-in that can add multiple background images to your web page, and multiple background images can be automatically switched. At the same time, the size of the background image can adapt to the size of the browser window. The switching effects of the background image include fade in and fade out, scrolling, and slideshow. When scrolling and slideshow are selected, you can choose the direction, up, down, left, or right, or top left, right bottom, right top, left bottom. The picture switching order can also be set to forward, reverse or random. More options are up to you to research slowly.

bgStretcher is a jQuery plug-in that allows you to add a large image (or a group of images) to the background of your web page and will resize the image proportionally to fill the entire window area. This plugin will act as a slideshow if using multiple image modes (the speed and duration of the slideshow is configurable).

Plug-in features:

The script file is simple and easy to set up; supports all new browsers; supports single or multiple images.

Plugin usage:

First of all, of course you need to download the plug-in first. The plug-in package already contains the required JS files.

Then, insert the following code between

and of your web page, so that the plug-in can be used later. Pay attention to the path in the code. As for whether it is a relative path or an absolute path, it depends on your actual needs. .

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

Then insert the following code after the above code to initialize the bgStretcher plug-in. You need to tell which element the plug-in works on and configure the plug-in options. Likewise, be careful not to make mistakes with the image paths in the code.

<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 plug-in is not only used for the background of the entire web page, but can also be used for a certain web page element. Of course, at least this element can set the background, such as DIV and so on. The web page element is selected through ID or Class. The element name BODY should be the only element name in the web page, which means setting the background for the entire web page. If you are setting the background for a certain DIV block on the page, you need to define an ID for the DIV or know its style class name. The ID and class name should be unique, otherwise the effect will be amazing.

Plug-in options:

Configuration Options	Default value	Option Description
imageContainer	bgstretcher	bgStretcher will automatically build structure for the images list in a DOM tree. This parameter is ID for the images holder. Try inspecting the tree with a FireBug to get an idea how it's constructed.
resizeProportionally	true	Indicates if background image(s) will be resized proportionally or not.
resizeAnimate	false	Indicates if background image(s) will be resized with animation. (Be careful, this may slow down some PCs if your images are large.)
images	empty	An array containing list of images to be 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()                                                                                         $(objID).bgStretcher.pause()                                                                                                             $(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 is the entire content of this article, I hope you all like it.