This piece of code is designed to load a random picture from a collection and replace it with another picture every few seconds, assuming the images are located on the server.
I am attempting to implement smooth fading transitions for the pictures, but I have encountered two issues:
1) I am unable to display 'this.image' when moving it into the setTimeout function.
2) I struggled to get the fadeIn() or fadeOut() functions to work, and I am unsure about the correct syntax to use.
Please refer to the comments within the code. Thank you!
JS:
Vue.component('foo-ad-module', {
data() {
return {
image: 'foo/foo_ad1.jpg',
timer: '',
x: 0
}
},
created: function() {
this.replaceImage();
this.timer = setInterval(this.replaceImage, parseInt((Math.random() * 33599)%30000) + 5000)
},
methods: {
init(){
this.x = parseInt((Math.random() * 33599)%11) + 1;
this.image = 'foo/foo_ad' + this.x + '.jpg';
console.info("this.image = " + this.image);
},
replaceImage: function() {
this.x = parseInt((Math.random() * 33599)%11) + 1;
//#if
this.image = 'foo/foo_ad' + this.x + '.jpg'; // ...THIS WORKS (when it is outside the setTimeout())
//#else
// $(???).fadeOut("2000"); // ... intending to put a fadeOut() here...
setTimeout(function () {
console.info("this is working...");
// this.image = 'foo/foo_ad' + this.x + '.jpg'; // ... THIS DOESN'T WORK (when it is inside the setTimeout())
// $(???).fadeIn("2000"); // ... intending to put a fadeIn() here...
}, 2000);
//#endif
clearInterval(this.timer)
this.timer = setInterval(this.replaceImage, (parseInt((Math.random() * 33599)%30000) + 5000));
},
},
beforeDestroy() {
clearInterval(this.timer)
},
mounted(){
this.init()
},
template: `
<div class="foo-ad-module " >
<img :src="image" alt="hi there">
</div> `
});
CSS:
.foo-ad-module {
width: 198px;
height: 198px;
border: 1px solid #555;
border-radius: 10px;
margin-bottom: 10px;
}