Home > Article > Web Front-end > 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 93f0f5c25f18dab9d176bd4f6de5d30e and 9c3bca370b5104690d9ef395f2c5f8d1 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
MS Internet Explorer 6, 7, 8, 9
Opera 9
Apple Safari
Google Chrome
The above is the entire content of this article, I hope you all like it.