jQuery Unobtrusive Background Image Switcher

jQuery Unobtrusive Background Image Switcher plugin that switches background images of a website - can be used as an image slider or a full screen background image switcher as well as image preloader.

The idea as well as functionality remains pretty much the same: we need to use as many (probably background) images as we want no matter how heavy they are, while minimizing their influence on load times.

Here are the basic requirements:

• Only the first image has to be loaded, the rest must “wait for their turn” and load as needed.
• The image has to be preloaded and only shown after the load is completed. We now use fade effect for every image including the first one.
• Support for responsive full screen background feature without breaking the image’s proportions on any screen/window size.
• It has to be lightweight and play well with other front end features.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: bcat.eu

1. INCLUDE JS FILES

<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/jquery.bcat.bgswitcher.js"></script>

2. HTML

<div id="bg-body"></div>

3. JAVASCRIPT

var srcBgArray = ["./images/img-slider-1.jpg","./images/img-slider-2.jpg","./images/img-slider-3.jpg","./images/img-slider-4.jpg"];

$(document).ready(function() {
  $('#bg-body').bcatBGSwitcher({
    urls: srcBgArray,
    alt: 'Full screen background image',
    links: true,
    prevnext: true
  });
});

4. OPTIONS

• urls – array with image paths, should it only contain one item the script will run as an image preloader, further functionality would not be initiated. Defaults to an empty array, has to be passed
• startIndex – integer array element (index) to start with, defaults to 0
• timeout – integer timeout in milliseconds, defaults to 12000
• alt – string text to fill the alt attribute of each image, defaults to ‘Picture’,
• speed – integer animation speed in milliseconds, defaults to 1000
• links – boolean if the navigation links have to be shown, defaults to false

• Demo fixed size
• Demo full screen
• Demo with navigation links