Simple jQuery Background Image Slideshow with Fade Transitions - Background Cycle

File Size: 259 KB
Views Total: 54743
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple jQuery Background Image Slideshow with Fade Transitions - Background Cycle

Background Cycle is a simple lightweight jQuery plugin that enables you to cycle through an array of background images within a given container. Also can be used as a responsive fullscreen slideshow with basic fade transition for creating a dynamic background on your website.

How to use it:

1. Include the jQuery javascript library and jQuery background cycle plugin in the Html document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/background.cycle.js"></script>

2. Create an array of image for the background slideshow.

imageUrls: [
'res/img/bg1.jpg',
'res/img/bg2.jpg',
'res/img/bg3.jpg'
...
],

3. The settings to custom the background slideshow.

imageUrls: [], // an array of strings representing urls to the images to cycle through
duration: 5000, // the nr of miliseconds between two fades.
fadeSpeed: 1000, // the nr of miliseconds it takes for one image to fade out to another.
backgroundSize: SCALING_MODE_NONE specify a value for the css3 property 'background size' or one of the following constants; SCALING_MODE_NONE, SCALING_MODE_STRETCH, SCALING_MODE_COVER, SCALING_MODE_CONTAIN

4. Sizing constants. these determine the value of the CSS property 'background-size' of the selected container

var SCALING_MODE_NONE = 0; //Uses the original image size
var SCALING_MODE_STRETCH = 1; //Sets 'background-size' to '100% 100%'. This stretches the background image to fill the container, discarding the images aspect ratio.
var SCALING_MODE_COVER = 2; //Sets 'background-size' to 'cover'. This makes the background images fill the entire container while retaining its aspect ratio.
var SCALING_MODE_CONTAIN = 3; //Sets 'background-size' to 'contain'. This scales the bakcground image to the largest size such that both its width and its height can fit inside the content area

This awesome jQuery plugin is developed by gaveguus. For more Advanced Usages, please check the demo page or visit the official website.