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

Instead of reinventing the wheel, use a plug in like jplayer http://tympanus.net/Development/AudioSlideshow/

You can see the code for the change of images is in the html for the image src, data-slide-time="10"

<div class="audio-slides">
						<img src="http://farm2.staticflickr.com/1012/3175040364_7eef7d257f_z.jpg?zz=1" alt="[Dalen, Telemarken (i.e, Telemark), Norway] (LOC)" data-thumbnail="http://farm2.staticflickr.com/1012/3175040364_7eef7d257f_t.jpg" data-slide-time="0">
						<img src="http://farm2.staticflickr.com/1145/3175012896_02056f183d_z.jpg?zz=1" alt="[Near Hjelmso, Fuglebjerget, Norway] (LOC)" data-thumbnail="http://farm2.staticflickr.com/1145/3175012896_02056f183d_t.jpg" data-slide-time="10">
						<img src="http://farm4.staticflickr.com/3108/3175013342_54f5b20138_z.jpg?zz=1" alt="[The Seven Sisters, Geiranger Fjord, Norway] (LOC)" data-thumbnail="http://farm4.staticflickr.com/3108/3175013342_54f5b20138_t.jpg" data-slide-time="30">
						<img src="http://farm2.staticflickr.com/1192/3175013574_0f485bdb7f_z.jpg?zz=1" alt="[Praekestolen, Geiranger Fjord, Norway] (LOC)" data-thumbnail="http://farm2.staticflickr.com/1192/3175013574_0f485bdb7f_t.jpg" data-slide-time="45">
						<img src="http://farm2.staticflickr.com/1019/3174174579_0c6a63ca70_z.jpg?zz=1" alt="[Kongen og Dronningen, Bispen, Norway] (LOC)" data-thumbnail="http://farm2.staticflickr.com/1019/3174174579_0c6a63ca70_t.jpg?" data-slide-time="70">
						<img src="http://farm4.staticflickr.com/3117/3175014052_7484da1205_z.jpg?zz=1" alt="[Merok, Geiranger Fjord, Norway] (LOC)" data-thumbnail="http://farm4.staticflickr.com/3117/3175014052_7484da1205_t.jpg" data-slide-time="90">
						<img src="http://farm2.staticflickr.com/1078/3175018738_03f949816c_z.jpg?zz=1" alt="[Buerbrae Glacier, Odde, Hardanger Fjord, Norway] (LOC)" data-thumbnail="http://farm2.staticflickr.com/1078/3175018738_03f949816c_t.jpg" data-slide-time="110">
						<img src="http://farm2.staticflickr.com/1139/3174180591_a5e318c84b_z.jpg?zz=1" alt="[Folgefond Glacier, Hardanger Fjord, Norway] (LOC)" data-thumbnail="http://farm2.staticflickr.com/1139/3174180591_a5e318c84b_t.jpg" data-slide-time="130">
						<img src="http://farm2.staticflickr.com/1091/3174186405_4654a14ae4_z.jpg?zz=1" alt="[Naerodalen, Hardanger Fjord, Norway] (LOC)" data-thumbnail="http://farm2.staticflickr.com/1091/3174186405_4654a14ae4_t.jpg" data-slide-time="150">
					</div>

Open in new window

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

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

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

@gabrielPennyback,

where are you with that question?
I checked your site and look like you achieve your goal

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

I believe this one is more easy to use : http://srobbin.com/jquery-plugins/backstretch/

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.

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

LVL 55

Scott Fell, EE MVEDeveloper & EE ModeratorCommented: 2016-10-03

LVL 1

John CarneyReliability Business Tools Analyst IIAuthor Commented: 2016-10-04

John CarneyReliability Business Tools Analyst IIAuthor Commented: 2016-11-14

LVL 83

leakim971PluritechnicianCommented: 2016-11-15

John CarneyReliability Business Tools Analyst IIAuthor Commented: 2016-11-22

leakim971PluritechnicianCommented: 2016-11-22

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial

Scott Fell, EE MVEDeveloper & EE ModeratorCommented: 2016-11-22

Changing background images at specific times

Who is Participating?

Already a member? Login.