Switch Background Image using Backstretch.js
Sep 05, 2013, by admin
Backstretch.js
is a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element
How to Switch Background Image using Backstretch.js
Code snippet to Switch Background Image using Backstretch.js and Underscore.js. Useful if you need to show a different background image for a desktop and mobile. I’m just using underscore.js for the debounce on window resize event it’s not essential.
Codings
/* ==========================================================================
Update Background Image using Backstretch.js and Underscore.js
========================================================================== */
(function($,W,D,undefined)
{
var DEMO = {};
DEMO.BG =
{
cache: {},
init: function()
{
// Create the listener function (debounce).
var updateBgImage = _.debounce(function(e) {
console.log(‘updateBgImage….’);
//switch to mobile version background for lower res devices.
var bgImage = (window.innerWidth > 640) ? “/img/home-bg.jpg” : “/img/home-bg-mobile.jpg”;
/* backstretch responsive bg image */
$.backstretch([
bgImage
], {
centeredY: false
});
}, 500); // Maximum run of once per 500 milliseconds
//detect actions on window resize
$(window).on(“resize”, function()
{
updateBgImage();
});
//init bg image
updateBgImage();
}
}
$(function() {
DEMO.BG.init();
});
})(jQuery, window, document);
Hope this might be helpful for you and my sincere thanks to Sam Deering. for the coding
