Jump to content

Using Javascript To Change Images Over Time. Fifteen Seconds?


cjy8s
 Share

Recommended Posts

Hey i am doing my senior project, but I am lost. I have an external document and I need a javascript code that will change that will change an image every 15 or so seconds. I have four images all of the same size that i plan on transitioning between, and is it possible for there to be transition effect? Like for it to fade in and out? I'm a beginner like i said and i have looked at several tutorials; but i just get super confused. Also, how do i align the images with CSS if it is called up in javascript? I'm horrible at this so i really need help. Could one of you javascript guru's help?

Link to comment
Share on other sites

I'm not sure what you mean by "external document." (I'm not even sure I'd call myself an expert.)You can use javascript to set and change CSS properties. This can be used to move an image and/or adjust its opacity (degree to which light appears to pass through it).Here are 3 tutorials you should check out:Tutorial for positioning: http://www.w3schools.com/css/css_positioning.aspTutorial for opacity: http://www.w3schools.com/css/css_image_transparency.asp Tutorial for making things happen in javascript at specified times: http://www.w3schools.com/js/js_timing.aspYou will also need a tutorial on adjusting CSS properties using Javascript. To do this:1. Your javascript routine must be able to find the thing that you are trying to adjust. The simplest way to do this is put whatever you wish to manipulate in a div with an id. For example:(in your html)in your CSS#unique_id { position: relative; top: 100px;}<div id="unique_id"> Print some test<img src="picture.jpg" alt="a picture" /> </div>in your javascriptvar mypic=document.getElementById("unique_id");var x = 200;mypic.style.top=x+"px";When the javascript is run the image will move down by 100pixels.This should get you started but I suspect you will have more questions. Please feel free to ask.floater

Link to comment
Share on other sites

Alright I have managed to get the images to change every 10 seconds which i realize works better for me. I did that with this code:

var i = 1; function count(){	setTimeout("setNum()", 10000);} function setNum(){	if (i < 10) {		i++;	} else {		i = 1;	}		updateImg(i);	count();} function updateImg(number){	var img = document.getElementById('img')	img.src = "family_capstone/" + number + ".png";} count();

Now I am wondering if I can get smooth 'fade in/ fade out' transitions between images. I am considering JQuery instead of Javascript for this.

I'm not sure what you mean by "external document."
Oh, and floater, Here is what i meant by external document:
<head><link rel="stylesheet" type="text/css" href="cascade.css" /></head>

And then open up a whole nother plain text docment, and in this case title it 'cascade'. You can place all your CSS codes in this document once instead of in each HTML document. If you already knew that I apologize for the blatancy.

Edited by Chris Yates
Link to comment
Share on other sites

Now I am wondering if I can get smooth 'fade in/ fade out' transitions between images. I am considering JQuery instead of Javascript for this.
jQuery is JavaScript - it is a JS framework.But anyway, jQuery has effects, you can fade using that. Be aware they run asynchroniously.
Link to comment
Share on other sites

Great. Could someone help me understand it a bit? i don't know what to do with jquery. I went to JQuery Cycle Plugin and found exactly what i was looking for. Please visit the site and look at the fade option. I went to the page source and this is what i found:

</td><td> 		<h2>fade</h2> 		<div id="fade" class="pics"> 			<img src="images/beach1.jpg" width="200" height="200" /> 			<img src="images/beach2.jpg" width="200" height="200" /> 			<img src="images/beach3.jpg" width="200" height="200" /> 		</div> 		<pre><code class="mix">$('#fade').cycle();</code></pre> 	</td></tr>

I spent a lot of time looking at this last night but I still don't understand it. What should I do with this?

Edited by Chris Yates
Link to comment
Share on other sites

Just to clarify, but you don't need to put an element in a div to give it an id - most (all?) elements support the id attribute

Link to comment
Share on other sites

Thank you, but I still have no clue what to do with that coding. Right now this is what my HTML looks like:

<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  <title>Family Finder | Home</title>  <meta name="description" content="Capstone project designed by Chris Yates, Kelly Bettendorf, And Tanya Levens with the intentions of reuniting family members with the one's their loved one's lost during war or natural disaster">  <meta name="keywords" content="The Center For Advanced Learning, Capstone, CAL, Chris Yates, Kelly Bettendorf, Tanya Levens, Family Finder, War, Natural Disaster, Red Cross, Lost, Reunite, Humane"><link rel="stylesheet" type="text/css" href="cascade.css" /><script type="text/javascript">$('#s5').cycle({ 	fx:	'fade', 	pause:  1 	speed:  2500 });</script></head><body><!-- center image --><div id="center"><img src="center image.png" alt="" /></div><div class="table" align="center"><table width="400px">  <tr><!-- Row 1 -->	 <td><h2>Welcome to Family Finder</h2>	 <p>'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'</p></td>   </tr> </table></div><div id="buttons"><!-- buttons --><a class="getstart" href="Getting Started.html" alt="Getting Started"></a><a class="home" href="home.html" alt="Home"></a><a class="mission" href="our mission.html" alt="Our Mission"></a></div><!-- end buttons --><div class="pics"> 		<img src="family_capstone/1.png" width="454" height="302" /> 		<img src="family_capstone/2.png" width="454" height="302" /> 		<img src="family_capstone/3.png" width="454" height="302" /> 		<img src="family_capstone/4.png" width="454" height="302" />	</div> </body>

I just don't understand it. It seems like such a small amount of coding to be what I really need. Can someone explain this to me? or at least show me what I am doing wrong so I can fix it?Oh and check out this website, please, to see what it is exactly i am aiming for: http://www.malsup.com/jquery/cycle/The one that says 'fade' is almost exactly what I want to use

Edited by Chris Yates
Link to comment
Share on other sites

This line:$('#fade').cycle();is not in the right place. You just have it inline in the head. That means the browser will execute it as soon as it gets to it, which means that it will execute that line before it even gets to your div. So when that line executes your div won't exist yet. You need to either put that in an onload handler so that it executes after the page loads, or move it below your div so the div already exists when it runs. Also, you need to include the jquery files. All of the code behind that one line is in all of the jquery files, you need to include those files if you want to use jquery.

Link to comment
Share on other sites

Okay thank you, I've done that. Now, it seems simple even though it is unwanted at the moment, but instead of cycling through the images it is simply calling up all four images. I am following the instructions on this page:http://www.malsup.com/jquery/cycle/begin.htmlBut I have not managed to get what I want from this coding

Edited by Chris Yates
Link to comment
Share on other sites

The first thing you should do is check for Javascript errors if you haven't already. That will tell you right off the bat if there's a Javascript problem. If there are no Javascript errors, but it's still not displaying correctly, I would assume that you're missing some CSS.

Link to comment
Share on other sites

Alright so I found this code which I think will work:

var iNum = 1;		$(document).ready(function() {		SetInterval("updateImg()", 5000);		$("#one).css('display', 'inline');	});		function updateImg()	{		if (iNum < 4) {			iNum++;		} else {			iNum = 1;		}				switch (iNum) {			case 1:				$("#four").fadeOut();				setTimeout('$("#one").fadeIn();',500);				break;			case 2:				$("#one").fadeOut();				setTimeout('$("#two").fadeIn();', 500);				break;			case 3:				$("#two").fadeOut();				setTimeout('$("#three").fadeIn();', 500);				break;			case 4:				$("#three").fadeOut();				setTimeout('$("#four").fadeIn();', 500);				break;		}			}

and this in the HTML:

<div id="container"> 		<img src="family_capstone/1.png" id="one" /> 		<img src="family_capstone/2.png" id="two" class="hidden"/> 		<img src="family_capstone/3.png" id="three" class="hidden"/> 		<img src="family_capstone/4.png" id="four" class="hidden"/>	</div>

and this in the CSS:

img.hidden {		display: none;		}				div#container {			background: #eee;			width: 454px;			height: 302px;			padding: 25px;			position: absolute;			left: 50%;			margin-top: -430px;			margin-left: -252px;			}

but for some reason I cannot get my four images to cycle. Could someone help?

Link to comment
Share on other sites

If you're using JQuery, you need to link to the library like this:<script type="text/javascript" src="path/to/jquery/library"></script>Otherwise you can't use any of the functions.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...