I am trying to dynamically change my background image by continuously looping through an array of image paths. The code works if I log the output to a console, but I cannot get the image to actually change.
Original CSS: (I am overriding the default style from another CSS file)
<style>
.jumbotron {
background: #7da7d8 url('images/rotunda2.jpg') no-repeat center center !important;
}
</style>
JavaScript:
$(document).ready(function () {
var count = -1;
var images=new Array("images/image1.jpg","images/image2.jpg","images/image3.jpg");
setInterval(swap, 5000);
function swap(){
$('.jumbotron').css("background", "#7da7d8 url('"+images[++count % images.length]+"') no-repeat center center !important");
console.log(images[++count % images.length]);
}
});
Any ideas?
You're swap function seems kind of odd. Typically for something like this, you could have a counter that gets incremented and then just resets to 0 and starts over. Also make sure you are running in an onload event handler context.
var count = 0;
var images=new Array("images/image1.jpg","images/image2.jpg","images/image3.jpg");
function swap(){
//get the next image
var nextImage = images[count];
console.log(nextImage);
$('.jumbotron').css("background-image", nextImage);
//increment count
count = count > images.length - 1 ? 0 : count+=1;
}
$(document).ready(function(){
setInterval(swap, 5000);
});
aside from that, make sure to check your error console for errors, and for 404's indicating you might have bad image paths
Try this:
$(document).load(function() {
var count = -1;
var images = ['images/image1.jpg', 'images/image2.jpg', 'images/image3.jpg'];
setInterval(swap, 5000);
function swap() {
var img = images[++count % images.length];
$('.jumbotron').css('background', '#7da7d8 url(' + img + ') no-repeat center center !important');
console.log(img);
}
});
I don't think change css is a good idea, you may define some classes, and dynamically change the classes on the element!
html:
<div class="dynamicBg class1"></div>
<div class="dynamicBg class1"></div>
css:
.dynamicBg {
background-color: #7da7d8;
background-repeat: no-repeat;
background-position: center center;
}
.class1 {
background-image: url('images/image1.jpg');
}
.class2 {
background-image: url('images/rotunda2.jpg');
}
.class3 {
background-image: url('images/rotunda3.jpg');
}
.class4 {
background-image: url('images/rotunda4.jpg');
}
js:
$(function() {
var classStr = 'class1 class2 class3 class4',
classArr = classStr.split(' '), i = 0,
$dynamicBg = $('.dynamicBg');
setInterval(function() {
i = i > 3 ? 0 : i + 1;
$dynamicBg.removeClass(classStr).addClass(classArr[i]);
}, 5000);
});
Wait for the document to load:
$(document).load(function()
{
var count = -1;
var images=new Array("images/image1.jpg","images/image2.jpg","images/image3.jpg");
setInterval(swap, 5000);
function swap(){
$('.jumbotron').css("background", "#7da7d8 url("+images[++count % images.length]+") no-repeat center center !important");
console.log(images[++count % images.length]);
}
});
Related
I am loading images from my unsplash collection (https://unsplash.com/collections/3132360/dashboard) and changing the background image of the body (through CSS). It works, but there is a delay in the change. Is there a way I can preload the images and maybe even fade them in/out?
I have tried the new Image() of javascript, but that is for HTML images and not CSS.
Thanks in advance :)
Here is the jquery:
$('document').ready(function(){
var x = 0;
loadImage(x);
});
function loadImage(x) {
x +=1;
var image = 'https://source.unsplash.com/collection/3132360/1920x1080#'+x;
setTimeout(function() {
imgSwap(image, x);
}, 30000)
}
function imgSwap(image, x){
$('body').css('background-image', 'url(' + image + ')');
loadImage(x);
}
You can add default image to body style in css to show the preload image.
body{
background-image: url("http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/5-1.gif");
background-repeat: no-repeat;
}
https://jsfiddle.net/nimittshah/cwpdsnLy/
This updated code now works, using img.src as the background URL for the CSS refreshes the image as needed. Using just the image variable as the URL does not.
$('document').ready(function(){
var x = 0;
loadImage(x);
});
function loadImage(x) {
x +=1;
var image = new Image()
image.src = 'https://source.unsplash.com/collection/3132360/1920x1080#'+x;
setTimeout(function() {
imgSwap(image, x);
}, 30000)
}
function imgSwap(image, x) {
$('body').css('background-image', 'url(' + image.src + ')');
loadImage(x);
}
I think if you can include this following javascript code and css, it might be able to full fill what you want to achieve
function preloader() {
if (document.getElementById) {
document.getElementById("preload-01").style.background = "url(http://domain.tld/image-01.png) no-repeat -9999px -9999px";
document.getElementById("preload-02").style.background = "url(http://domain.tld/image-02.png) no-repeat -9999px -9999px";
document.getElementById("preload-03").style.background = "url(http://domain.tld/image-03.png) no-repeat -9999px -9999px";
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(preloader);
#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }
#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }
var x = 0;
$('document').ready(function(){
loadImage(x);
});
function loadImage(x) {
setInterval(function() {
var randomId = new Date().getTime();
var image = 'https://source.unsplash.com/collection/3132360/1920x1080#'+x+'?r='+randomId;
console.log("x="+x + " " + image);
imgSwap(image);
x +=1;
}, 30000)
}
function imgSwap(image){
$('body').css('background-image', 'url(' + image + ')');
//$('#bg_img').attr('src', image);
}
You can change value of x randomly, but i have found your img provider is not returning the images plz check this first, It is redirecting to some other url
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!--<img id="bg_img" src="" width=400 height=400/>-->
So I an trying to have multiple background image changes on click using javascript.
Can anyone help here I am trying to change multiple background images with a click, with this code I am getting 2 image changes but somewhere at the function updateIndex I can't work out how to make it continuous throughout multiple images.
Thanks a lot in advance!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<div id="body" class="imageOne"></div>
<style>
html,
body, {
height: 100%;
width: 100%;
}
#body.imageOne {
background-image: url("first.svg");
}
#body.imageTwo {
background-image: url("2.svg");
}
#body.imageThree {
background-image: url("3.svg");
}
#body.imageFour {
background-image: url("first.svg");
}
</style>
<script>
var bodyObj, className, index;
// all background images, calling them to change
bodyObj = document.getElementById('body');
index = 1;
className = [
'imageOne',
'imageTwo',
'imageThree',
'imageFour',
];
function updateIndex() {
if (index === 0) {
index = 1;
} else {
index = 1;
index = 2;
}
}
bodyObj.onclick = function(e) {
e.currentTarget.className = className[index];
updateIndex();
}
</script>
Set the index to 0
and in order to loop use ++index % className.length
const className = ['imageOne','imageTwo','imageThree','imageFour'];
let index = 0;
function updateClassName() {
this.className = className[++index % className.length];
}
document.getElementById('body').addEventListener("click", updateClassName);
html, body{height: 100%;width: 100%; margin:0;}
#body{ height: calc(100% - 4rem); background: center / cover; }
#body.imageOne {background-image: url("//placehold.co/800x600/0bf/fff");}
#body.imageTwo {background-image: url("//placehold.co/800x600/f0b/fff");}
#body.imageThree {background-image: url("//placehold.co/800x600/b0f/fff");}
#body.imageFour {background-image: url("//placehold.co/800x600/fb0/fff");}
Click the image
<div id="body" class="imageOne"></div>
The issue is due to the logic in the updateIndex() function. You only set the index to 0, or to 1, then for some reason 2 immediately. It doesn't cycle around.
To fix the logic you can simply increment the index on each successive click. Try this:
var bodyObj = document.getElementById('body'),
index = 1,
className = ['imageOne', 'imageTwo', 'imageThree', 'imageFour']; // remove trailing comma here
function updateIndex() {
index = ++index % className.length;
}
bodyObj.addEventListener('click', function(e) {
e.currentTarget.className = className[index];
updateIndex();
});
#body {
height: 250px;
width: 250px;
}
#body.imageOne { background-image: url("https://dummyimage.com/250/000000/ffffff"); }
#body.imageTwo { background-image: url("https://dummyimage.com/250/cc0000/000000"); }
#body.imageThree { background-image: url("https://dummyimage.com/250/00cc00/000000"); }
#body.imageFour { background-image: url("https://dummyimage.com/250/0000cc/000000"); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="body" class="imageOne"></div>
Also note the use of addEventListener() over the outdated onclick.
This question already has answers here:
Preloading images with jQuery
(20 answers)
Preload background image
(5 answers)
Closed 5 years ago.
I have a background that changes every 12seconds.
In Chrome, Firefox and Opera the background change is works fine, but in Safari the browser always loads the image again and that is noticed by a flickering on every image change on the first cycle. Any ideas on how can I solve this problem.
This is how I'm handling the background change:
var img2 = new Image();
var img3 = new Image();
img2.src="/img/bg2.png";
img3.src="/img/bg3.png";
Meteor.setInterval(function(){
let elem = $(".header-2");
if(elem.hasClass("bg1")){
elem.removeClass("bg1");
elem.addClass("bg2");
let src = 'url('+img2.src.replace(location.origin,'')+')';
elem.css("background-image", src);
}
else if(elem.hasClass("bg2")){
elem.removeClass("bg2");
elem.addClass("bg3");
let src = 'url('+img3.src.replace(location.origin,'')+')';
elem.css("background-image", src);
}
else{
elem.removeClass("bg3");
elem.addClass("bg1");
}
}, 12*1000)
The css classes:
.header-2.bg1 {
background-image: url('/img/bg1.png');
}
.header-2.bg2 {
}
.header-2.bg3 {
}
Changing the background after an onload event on the image should ensure the image is completely loaded before updating anything on the page.
This approach adds the event and keeps the background changes in JS.
var bgs = ['http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg', 'http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg','http://www.mrwallpaper.com/wallpapers/Huge-Bear.jpg'],
count = 1,
header2 = document.getElementsByClassName('header-2')[0];
setInterval(function() {
var img2 = new Image(),
url = bgs[count];
img2.onload = function() {
header2.style.backgroundImage = 'url(' + url + ')';
}
img2.src = url;
(count < (bgs.length - 1)) ? count++ : count = 0;
},1000)
body {
margin: 0;
}
.header-2 {
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
margin: 0;
background-image: url('http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header-2"></header>
You can also use the same method with your code where you're using CSS to control parts of it. Here I just set a data-bg attribute in your interval, then control the background-image (and whatever else) via CSS using the data selector
var bgs = ['http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg', 'http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg', 'http://www.mrwallpaper.com/wallpapers/Huge-Bear.jpg'],
count = 0,
header2 = document.getElementsByClassName('header-2')[0];
setInterval(function() {
var img2 = new Image(),
url = bgs[count];
img2.onload = function() {
header2.setAttribute('data-bg', count);
}
img2.src = url;
(count < (bgs.length - 1)) ? count++ : count = 0;
}, 1000)
body {
margin: 0;
}
.header-2 {
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
margin: 0;
background-image: url('http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg');
}
.header-2[data-bg="1"] {
background-image: url('http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg');
}
.header-2[data-bg="2"] {
background-image: url('http://www.mrwallpaper.com/wallpapers/Huge-Bear.jpg');
}
<header class="header-2" ></header>
this is possibly due to images not loading properly before the script is being executed by calling the function onload() will do the trick.
I would like to create a little slider to change background-image of my div every seconds.
My code doesn't work for the moment, image is not changed. And ideally, i would like that the script run in infinite mode..
HTML
<div id="slidesPartenairesHome"></div>
CSS
#slidesPartenairesHome {
background-size: contain;
background-position: center center;
width: 300px;
height: 170px;
margin-left: 120px;
}
JS
$( document ).ready(function() {
var arrayOfPartenaires = [
"images/partenaires/a.png",
"images/partenaires/b.jpg",
"images/partenaires/c.jpg",
"images/partenaires/d.png",
"images/partenaires/e.png",
"images/partenaires/f.jpg",
"images/partenaires/g.jpg",
"images/partenaires/h.jpg",
"images/partenaires/i.png",
"images/partenaires/j.jpg",
"images/partenaires/k.jpg",
"images/partenaires/l.jpg"
];
for (var i=0; i<arrayOfPartenaires.length; i++) {
var currentPartenaireImg = arrayOfPartenaires[i];
$('#slidesPartenairesHome').animate({opacity: 0}, 'slow', function() {
$(this).css({'background-image': 'url("'+currentPartenaireImg+')'}).animate({opacity: 1});
});
}
});
You could use window.setinterval, you could also use setTimeout but setinterval is a litle bit more precise.
Example with setinteval:
window.setInterval(function(){
var url = getCurrent();
//start animation
$('#slidesPartenairesHome').delay( 500 ).fadeTo(500, 0.3, function()
{
$(this).css('background-image', 'url(' + url + ')');
}).fadeTo('slow', 1);
}, 1000);
// We start with index of 1 because we want to skip the first image,
// Else we would be replacing it with the same image.
var index = 1;
var arrayOfPartenaires = [
"http://yourdomain.com/images/partenaires/a.png",
"http://yourdomain.com/images/partenaires/b.png",
"http://yourdomain.com/images/partenaires/c.png"
];
function getCurrent(){
// We check if the index is higher than the ammount in the array.
// If thats true set 0 (beginning of array)
if (index > arrayOfPartenaires.length -1){
index = 0;
}
var returnValue = index;
index ++;
return arrayOfPartenaires[returnValue];
}
Note if you really want to change the image every 1 second the background will be changing very fast.
Fiddle
I hope this may help you
html
<div id="slidesPartenairesHome">
<div id="imags">
</div>
</div>
Css
#slidesPartenairesHome
{
margin-left: 120px;
}
#slidesPartenairesHome, #imags
{
background-size: contain;
background-position: center center;
width: 300px;
height: 170px;
}
Js
$(function () {
var arrayOfPartenaires = [
"http://fotos2013.cloud.noticias24.com/animales1.jpg",
"http://www.schnauzi.com/wp-content/uploads/2013/03/animales-en-primavera.jpg",
"https://johannagrandac.files.wordpress.com/2015/01/conejos.jpg",
"http://png-4.findicons.com/files/icons/1035/human_o2/128/face_smile.png",
"http://icons.iconarchive.com/icons/rokey/the-blacy/128/big-smile-icon.png",
"http://simpleicon.com/wp-content/uploads/smile-256x256.png"
];
var loaders = 0;
function cycleImages() {
var element = arrayOfPartenaires[loaders];
$("#imags").css({ 'background-image': 'url(' + element + ')' }).animate({ opacity: 1 }).hide().fadeIn("slow");
if (loaders < arrayOfPartenaires.length) {
loaders = loaders + 1;
if (loaders >= arrayOfPartenaires.length) {
loaders = 0;
}
}
else {
loaders = 0;
}
console.log(loaders, arrayOfPartenaires[loaders]);
}
cycleImages();
setInterval(function () { cycleImages() }, 3000);
});
jsFiddel Demo
The following code creates the effect when one image goes to white and then white is changed with another image (demo):
HTML:
<body>
<div class="page-bg" id="page-background1"></div>
<!-- <div class="page-bg" id="page-background2"></div> -->
</body>
JavaScript:
url = "http://example.com/picture.png";
$("#page-background1")
.animate({
opacity: 0
}, 'slow', function () {
$("#page-background1")
.css({
'background-image': 'url(' + url + ')'
})
.animate({
opacity: 1
});
});
But I would like to change one image directly with another (without white color in between), but with fadeOut/fadeIn effect. How should I do it? Looks like usage of the second div should help, but I can not find working solution.
Updated, I tried to apply Stacking elements with Z-index to get the desired effect. I also created a kind of "stack" of images where z-index is changed for the image that was hidden; the most recently hidden element is changed for a smaller z-index value in comparison to other images in the "stack". The code supports multiple images in the photos array, because it creates an individual div for each image.
var photos = [{
url: 'https://drscdn.500px.org/photo/97037403/m=900/d924fc03d69a82a604129011300916be'
}, {
url: 'https://drscdn.500px.org/photo/97037259/m=900/030e1598b7822cd6c41beb4c7a4e466d'
}, {
url: 'https://drscdn.500px.org/photo/97158643/m=900/4ae40d67ef546341111a32f5176694c8'
}];
//z-index, start value -1
//z-index can be either positive or negative value
//based on this answer http://stackoverflow.com/a/491105/2048391
var zIndex = -1;
//first foto in the array shown/hidden first
var visibleIndex = 0;
//initialize
//by creating div for each image/url
for (i = 0; i < photos.length; i++) {
var div = document.createElement("div");
div.id = "page-background" + (i + 1);
div.setAttribute("class", "page-bg");
div.style.zIndex = zIndex;
var url = "url('" + photos[i].url + "')";
div.style.background = "#505D6E " + url + " no-repeat center center fixed";
document.body.appendChild(div);
zIndex = zIndex - 1;
//and add div id to the photos array
photos[i].id = "page-background" + (i + 1);
}
function changeBackground() {
var hideItemIndex = visibleIndex % photos.length;
var showItemIndex = (visibleIndex + 1) % photos.length;
var hideItemId = "#" + photos[hideItemIndex].id;
var showItemId = "#" + photos[showItemIndex].id;
//hide current image with animation
//after which show the next image with animation
$(hideItemId).animate({
opacity: 0
}, "slow", function() {
$(showItemId)
.animate({
opacity: 1
}, "slow");
//change z-index for the item that was hidden
//by moving it to the bottom of the stack
$(hideItemId).css("z-index", zIndex);
$(hideItemId).css("opacity", 1);
});
zIndex = zIndex - 1;
visibleIndex = visibleIndex + 1;
}
//make sure that there's at least 2 images in the array
if (photos.length > 1) {
setInterval(function() {
changeBackground();
}, 2000);
}
.page-bg {
border: 1px solid black;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
Alternative way of doing the same thing as above. Below only visible and the next div element exist, and the hidden div is removed for performance reasons, like suggested by LA_
var photos = [{
url: 'https://drscdn.500px.org/photo/97037403/m=900/d924fc03d69a82a604129011300916be'
}, {
url: 'https://drscdn.500px.org/photo/97037259/m=900/030e1598b7822cd6c41beb4c7a4e466d'
}, {
url: 'https://drscdn.500px.org/photo/97158643/m=900/4ae40d67ef546341111a32f5176694c8'
}];
//z-index, start value 100000
//z-index could be a larger number
//based on this answer http://stackoverflow.com/a/491105/2048391
var zIndex = -1;
//first foto in the array shown/hidden first
var visibleIndex = 0;
//initialize
//by creating div for each image/url
for (i = 0; i < photos.length; i++) {
//only two images are created
if (i < 2)
createDiv(i, (i + 1) );
//and add div id to the photos array
photos[i].id = "page-background" + (i + 1);
}
function changeBackground() {
var hideItemIndex = visibleIndex % photos.length;
var showItemIndex = (visibleIndex + 1) % photos.length;
var hideItemId = "#" + photos[hideItemIndex].id;
var showItemId = "#" + photos[showItemIndex].id;
//hide current image with animation
//after which show the next image with animation
$(hideItemId).animate({
opacity: 0
}, "slow", function () {
$(showItemId)
.animate({
opacity: 1
}, "slow");
//remove the item that was hidden
$(hideItemId).remove();
});
var nextItemIndex = (visibleIndex + 2) % photos.length;
//create the next div with picture
createDiv(nextItemIndex, (nextItemIndex + 1) );
visibleIndex = visibleIndex + 1;
}
//make sure that there is at least 2 photos
if (photos.length > 1) {
setInterval(function () {
changeBackground();
}, 2000);
}
function createDiv(index, divIdNro) {
var div = document.createElement("div");
div.id = "page-background" + divIdNro;
div.setAttribute("class", "page-bg");
div.style.zIndex = zIndex;
var url = "url('" + photos[index].url + "')";
//div.style.backgroundImage = url;
div.style.background = "#505D6E " + url + " no-repeat center center fixed";
document.body.appendChild(div);
zIndex = zIndex - 1;
}
.page-bg {
border:1px solid black;
height:100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
here's a fiddle as snippets not working sat the mo, you can put the speed of the fade in milliseconds or keyword, it's at slow. I've left it on button click and not passed in the url but take out my button click function and put the code into your setinterval func, also set the url in jquery back to url variable
$('button').on('click',function(){
$("#page-background1").fadeOut( "slow", function() {
$("#page-background1")
.css({
'background-image': 'url(http://lorempixel.com/400/400/sports/2)'
});});
$("#page-background1").fadeIn('slow');
});
.page-bg{
min-width:500px;
min-height:500px;
}
#page-background1{
background-image: url(http://lorempixel.com/400/400/sports/1);
background-size:400px 400px;
background-repeat: no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click me to change the background</button>
<div class="page-bg" id="page-background1">;</div>
Change the javascript to:
url = "http://example.com/picture.png";
.animate({
opacity: 0.5
}, 'fast', function () {
$("#page-background1")
.css({
'background-image': 'url(' + url + ')'
})
.animate({
opacity: 1
});
});