Loop with background images using fadeIn ()
I am building a responsive website with some parallax images and the first image needs to be a looping image like an image slider. I am using jquery Cool kitten for its responsiveness.
Related jquery plugins I downloaded:
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
css for div:
#slide2 {
background-image:url(../images/darkmap.png);
height:700px;
}
I found that using HTML background images with this layout can be problematic, so I avoid it with an array:
var imageIndex = 0;
var imagesArray = [
"images/photo1.png",
"images/photo2.png",
"images/photo3.png"
];
I have some code wrapped in a function $(document).ready()
that changes the css background to an array and then loops through the array and I added fadeIn()
for a smooth transition:
function changeImage(){
var index = imageIndex++ % imagesArray.length;
$("#slide2").css("background","url('"+ imagesArray[index] +"')");
}
setInterval(changeImage, 5000);
changeImage.fadeIn();
The image loop works fine, but fadeIn()
doesn't work for some reason , it just flashes from one image to another. Can someone please tell me what I am missing?
source to share
As mentioned by other users, you cannot use .fadeIn()
for a function. You can only use this for an element.
However beyond that, what you want to do is not possible for a single element. As soon as you change the element of the background-image
element, the previous background image will disappear. You will not be able to smoothly transition to another image because the previous image has simply been replaced and no longer exists.
You will need to add multiple elements that contain background images, place them on top of each one with position: absolute;
, then you can use jQuery to fade out the corresponding inputs or outputs.
Html
<div id="background1"></div>
<div id="background2"></div>
Javascript
setTimeout(function(){
$("#background2").fadeIn();
}, 2000);
You can also make it more dynamic with an array (as described) and 2 html elements: one bottom element and one top element with which you will iterate over your backgrounds:
var index = 0;
var imagesArray = ["https://placekitten.com/g/500/300",
"https://placekitten.com/g/600/300",
"https://placekitten.com/g/700/300"];
var background1 = $("#background1"),
background2 = $("#background2");
//Set the starting background
background2.css("background","url('"+ imagesArray[index] +"')");
setInterval(changeImage, 2000);
function changeImage(){
//Make sure that the bottom element has the "old" background
background2.css("background","url('"+ imagesArray[index] +"')");
//Hide the top element which we will load the "new" background in now
background1.hide();
index++;
if(index >= imagesArray.length){
index = 0;
}
//Set the background of the top element to the new background
background1.css("background","url('"+ imagesArray[index] +"')");
//Fade in the top element
background1.fadeIn();
}
source to share