Avatar of John Carney
John Carney
Flag for United States of America asked on

Changing background images at specific times

I have a webpage - (which triggers a song on load) - that fades background images in and out at a specified interval. How would I code it so that each image was timed to fade in and out at a specific time and stay for a specific duration? With a final image that fades in and stays on at the end of the song. Here's the page: dijitalrealm.com/JCMusic/GrandDesign.html

Thanks!

John
HTMLCSSJavaScriptWeb Development

Avatar of undefined
Last Comment
Scott Fell

8/22/2022 - Mon
SOLUTION
Scott Fell

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
John Carney

ASKER
Hi Scott, thanks for posting, sorry I've been AWOL for a little bit. I'm definitely in favor of not re-inventing the wheel, but I'm not sure how it will work with the rest of the page. If you haven't already, please take a look at the page and let me know if it can be seamlessly blended with the html and css. http://dijitalrealm.com/JCMusic/GrandDesign.html

Thanks,
John
John Carney

ASKER
Hi Scott, so is their a way to adapt the code you posted above seamlessly with my existing code? Perhaps a js file that will make the html code in your comment work? It seems to me if I strip down the lines in your code - no alt (or thumbnail since I don't have one) - a typical line might be as simple as this:  
<img src="http://dijitalrealm.com/JCMusic/images/IndianBeyonce.png" data-slide-time="35">

Open in new window

Is that right? If not what would the code for a typical line look like?  Or does it only work with flickr?

Thanks,
John
leakim971

@gabrielPennyback,

where are you with that question?
I checked your site and look like you achieve your goal
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
John Carney

ASKER
Hi leakim97, thanks for asking. I haven't done anything because I can't figure out how to adapt it to my code. Any thoughts on how to do that?

Thanks,
John
ASKER CERTIFIED SOLUTION
leakim971

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Scott Fell

I'm sorry for not following up. Sometimes I get too many notifications and one gets lost.

To answer your question though, which ever you use, you will have to adjust what you are doing a little.  But that will be easier than writing your own from scratch.

I have not tried leakim's solution, but would trust that if he said a different option is easier, it probably is.