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
LVL 1
John CarneyReliability Business Tools Analyst IIAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
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.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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

John CarneyReliability Business Tools Analyst IIAuthor Commented:
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 CarneyReliability Business Tools Analyst IIAuthor Commented:
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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Get Your eBook
leakim971PluritechnicianCommented:
@gabrielPennyback,

where are you with that question?
I checked your site and look like you achieve your goal
John CarneyReliability Business Tools Analyst IIAuthor Commented:
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
leakim971PluritechnicianCommented:
I believe this one is more easy to use : http://srobbin.com/jquery-plugins/backstretch/

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:
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.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.