On page load, a random background image is applied to all $("#image").siblings from an array of images defined under var images =.
On .mouseenter the selected image fades out, and a new background image is applied, before it fades back in. How can I ensure this is always the next image from the array, rather than a random image as it is currently?
HTML
<section id="grid" class="desktop-image">
<div class="image-grid">
<div id="image" class="image01"></div>
<div id="image" class="image02"></div>
<div id="image" class="image03"></div>
<div id="image" class="image04"></div>
</div>
</section>
JS
// Random Image
var images = ['PK1.jpg','PK2.jpg','PK3.jpg','PK4.jpg','PK5.jpg','PK6.jpg','PK7.jpg','PK8.jpg','PK9.jpg','PK10.jpg'];
$("#image").siblings().css({'background-image': 'url(assets/' + images[Math.floor(Math.random() * images.length)] + ')'});
//Images Fade Out/In
$('.image02').mouseenter(function(){
$(".image02").addClass("hide");
setTimeout(function() {
$(".image02").css({'background-image': 'url(assets/' + images[Math.floor(Math.random() * images.length)] + ')'});
},1000);
setTimeout(function() {
$('.image02').removeClass('hide');
},6000);
});
$('.image03').mouseenter(function(){
$(".image03").addClass("hide");
setTimeout(function() {
$(".image03").css({'background-image': 'url(assets/' + images[Math.floor(Math.random() * images.length)] + ')'});
},1000);
setTimeout(function() {
$('.image03').removeClass('hide');
},6000);
});
$('.image04').mouseenter(function(){
$(".image04").addClass("hide");
setTimeout(function() {
$(".image04").css({'background-image': 'url(assets/' + images[Math.floor(Math.random() * images.length)] + ')'});
},1000);
setTimeout(function() {
$('.image04').removeClass('hide');
},6000);
});
This is a sample code where I have commented the setTimeout as it will produce extra issues. It might be done later.
The main idea is to set own array of images as data attribute at each image. Then on mouseenter we got this array, we shift it i.e. first item goes to the variable next and then add it to the end using push. The image in next is set as background-image. Simple and effective.
// Random Image
var base = 'https://icons.iconarchive.com/icons/goescat/macaron/128/';
var images = [
base+'atom-icon.png',
base+'calc-icon.png',
base+'burp-suite-icon.png',
base+'calligra-krita-icon.png',
base+'deluge-icon.png',
base+'code-blocks-icon.png'
];
$(".image").each(function() {
$(this)
.data('own', images)
.css({'background-image': 'url(' + images[0] + ')'});
images.push(images.shift());
});
//Images Fade Out/In
$('.image').mouseenter(function(){
var $element = $(this);
$element.addClass("hide");
// setTimeout(function() {
var own = $element.data('own');
var next = own.shift();
own.push(next);
$element
.css({'background-image': 'url("'+next+'")'});
// },1000);
setTimeout(function() {
$element.removeClass('hide');
},6000);
});.image{width:128px;height:128px;padding:0px;margin:10px;border:1px solid #000; float:left}
.hide {}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="grid" class="desktop-image">
<div class="image-grid">
<div id="image1" class="image"></div>
<div id="image2" class="image"></div>
<div id="image3" class="image"></div>
<div id="image4" class="image"></div>
</div>
</section>