The following script (with the help of Stackoverflow members) now works perfectly to display random images with captions. However, In addition to the images fading in, how do you fade-in the captions as well?
// Preload
$(images).each(function(){
$("<img/>")[0].src = this.url;});
var images = new Array(); //array of imgs objects
images[0] = {url: "/images/backgrounds/l&h.jpg", caption: "Stan Laurel and Oliver Hardy"};
images[1] = {url: "/images/backgrounds/sherlock-watson.jpg", caption: "Basil Rathbone and Nigel Bruce"};
images[2] = {url: "/images/backgrounds/powell-loy.jpg", caption: "William Powell and Myrna Loy"};
images[3] = {url: "/images/backgrounds/conried-bergman-bogart.jpg", caption: "Paul Heinreid, Ingrid Bergman and Humphrey Bogart"};
function loadRandomImage(imgs) {
var index = Math.floor(Math.random() * imgs.length);
console.log("loadRandomImages(): index = "+ index);
$.backstretch(imgs[index].url, {fade: 1500, speed: 5000});
$("#caption").html(imgs[index].caption);
}
// we run the function once at the beginning.
loadRandomImage(images);
// Change images every 5 seconds
setInterval(loadRandomImage, 5000, images);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
<div id="caption"></div>
I think you could just add a css transitiont ex: #caption { transition: opacity 3s linear 0s }
to the css or add it in with vanilla js:
document.getElementById('caption').style.transition = 'opacity 3s linear 0s'
i dont know jQuery well but i'm sure theres a way
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.