tinfanide Posted July 18, 2011 Share Posted July 18, 2011 I wanna ask why I set p = 0 andthe if statement in the window.onload eventMy pic[p] and its p still start from 1, not 0?I want the pic looping from 0 to 1 and for each of the picturesI want them to fade in and fade out first before the next picture comes.Any idea how to fix it? Thank you. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script>var pic = new Array();pic[0] = "http://1.bp.blogspot.com/-vj8o0a29lCk/Tc-TkZvOwyI/AAAAAAAAAAs/pCGSeVXyLGU/s1600/flower.jpg";pic[1] = "http://cache2.allpostersimages.com/p/LRG/13/1338/RJ7S000Z/posters/joson-passion-flower.jpg";var o = 100;var t;var p = 0;window.onload = function() { if(p<=1){ p++; } document.getElementById("pic").src = pic[p]; t = setInterval(fadeOut, 50);}function fadeOut(){ var pic = document.getElementById("pic"); pic.style.filter = "alpha(opacity="+o+")"; pic.style.MozOpacity = o/100; pic.style.opacity = o/100; o -= 1; if(o<=0){ clearInterval(t); t = setInterval(fadeIn, 50); }}function fadeIn(){ var pic = document.getElementById("pic"); pic.style.filter = "alpha(opacity="+o+")"; pic.style.MozOpacity = o/100; pic.style.opacity = o/100; o += 1; if(o>=100){ clearInterval(t); t = setInterval(fadeOut, 50); }}</script></head><body><img id="pic" src="" /></body></html> Link to comment Share on other sites More sharing options...
justsomeguy Posted July 18, 2011 Share Posted July 18, 2011 I wanna ask why I set p = 0 andthe if statement in the window.onload eventMy pic[p] and its p still start from 1, not 0?I'm not sure if I'm understanding you, but it should be obvious that the first thing the function that runs on load does is increment p from 0 to 1. It does that before it references any array values. If you want to change the pictures it sounds like you want to increment p in the fadeIn function and set the src of the image element to the next item in the array. Link to comment Share on other sites More sharing options...
tinfanide Posted July 18, 2011 Author Share Posted July 18, 2011 I'm not sure if I'm understanding you, but it should be obvious that the first thing the function that runs on load does is increment p from 0 to 1. It does that before it references any array values. If you want to change the pictures it sounds like you want to increment p in the fadeIn function and set the src of the image element to the next item in the array.Thanks for replying. But I don't think I can follow what you say.I've moved the increment part into the fadeIn function but can't get what you meant by setting the src to the next item in the array?Can ya insert some notes alongside my scripts to help me a bit? Link to comment Share on other sites More sharing options...
justsomeguy Posted July 18, 2011 Share Posted July 18, 2011 You can use Javascript to change the src of the image:http://www.w3schools.com/jsref/prop_img_src.asp Link to comment Share on other sites More sharing options...
tinfanide Posted July 19, 2011 Author Share Posted July 19, 2011 You can use Javascript to change the src of the image:http://www.w3schools.com/jsref/prop_img_src.asp <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script>var pic = new Array();pic[0] = "http://1.bp.blogspot.com/-vj8o0a29lCk/Tc-TkZvOwyI/AAAAAAAAAAs/pCGSeVXyLGU/s1600/flower.jpg";pic[1] = "http://cache2.allpostersimages.com/p/LRG/13/1338/RJ7S000Z/posters/joson-passion-flower.jpg";var o = 100;var t;var p = 0;window.onload = function() { if(p<=1){ p++; } document.getElementById("pic").src = pic[p]; t = setInterval(fadeOut, 50);}function fadeOut(){ var pic = document.getElementById("pic"); pic.style.filter = "alpha(opacity="+o+")"; pic.style.MozOpacity = o/100; pic.style.opacity = o/100; o -= 1; if(o<=0){ clearInterval(t); t = setInterval(fadeIn, 50); }}function fadeIn(){ var pic = document.getElementById("pic"); pic.style.filter = "alpha(opacity="+o+")"; pic.style.MozOpacity = o/100; pic.style.opacity = o/100; o += 1; if(o>=100){ clearInterval(t); t = setInterval(fadeOut, 50); } pic.src = pic[p]; }</script></head><body><img id="pic" src="" /></body></html> Please see the pic.src = pic added. Did you mean something ilke this? Link to comment Share on other sites More sharing options...
justsomeguy Posted July 19, 2011 Share Posted July 19, 2011 That's sort of the idea, but you're going to need to use different variable names. Don't call everything "pic". Link to comment Share on other sites More sharing options...
tinfanide Posted July 20, 2011 Author Share Posted July 20, 2011 That's sort of the idea, but you're going to need to use different variable names. Don't call everything "pic". <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script>var image = new Array();image[0] = "http://1.bp.blogspot.com/-vj8o0a29lCk/Tc-TkZvOwyI/AAAAAAAAAAs/pCGSeVXyLGU/s1600/flower.jpg";image[1] = "http://cache2.allpostersimages.com/p/LRG/13/1338/RJ7S000Z/posters/joson-passion-flower.jpg";var o = 100;var t;var p = 0;window.onload = function() { if(p<=1){ p++; } else {p = 0;} document.getElementById("pic").src = image[p]; t = setInterval(fadeOut, 50);}function fadeOut(){ var pic = document.getElementById("pic"); pic.style.filter = "alpha(opacity="+o+")"; pic.style.MozOpacity = o/100; pic.style.opacity = o/100; o -= 1; if(o<=0){ clearInterval(t); t = setInterval(fadeIn, 50); }}function fadeIn(){ var pic = document.getElementById("pic"); pic.style.filter = "alpha(opacity="+o+")"; pic.style.MozOpacity = o/100; pic.style.opacity = o/100; o += 1; if(o>=100){ clearInterval(t); t = setInterval(fadeOut, 10); } }</script></head><body><img id="pic" src="" /></body></html> The image's loaded, but only one image's loaded. No loop through effect.Could anyone tell me how come it is? Link to comment Share on other sites More sharing options...
justsomeguy Posted July 20, 2011 Share Posted July 20, 2011 The window.onload function only runs one time, as soon as the page finishes loading. So when the page finishes loading you increment p from 0 to 1, then you set the src of the image, then you start the fade. The source should change when the fade out finishes, before the fade in starts. You also shouldn't change p when the page loads, it should start at 0. Link to comment Share on other sites More sharing options...
jeffman Posted July 20, 2011 Share Posted July 20, 2011 The only place you assign a value to the image's src property is in the window.onload handler function. window.onload executes exactly once. If you want to change the image's src property, you have to do so in another function.Has your goal all this time been to fade one image into a second image???? An image element cannot have two sources. You'll probably need two distinct image elements that overlap the same space. Link to comment Share on other sites More sharing options...
tinfanide Posted July 23, 2011 Author Share Posted July 23, 2011 The only place you assign a value to the image's src property is in the window.onload handler function. window.onload executes exactly once. If you want to change the image's src property, you have to do so in another function.Has your goal all this time been to fade one image into a second image????Yes, thanks for the reminder. I moved the value out of the window.onload handler function.Yes, I want the fading into effect from one to another.An image element cannot have two sources. You'll probably need two distinct image elements that overlap the same space.What do you mean by an image that cannot have two sources?I know they must be overlapping. But what do you mean by Two distinct image elements?This time I added one more image but the first image (image[0]) does not show up.It does have the fade-out effect (though not expected) after I moved the image.src out of the window.onload function.<script>var image = new Array();image[0] = "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png";image[1] = "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png";image[2] = "http://www.techlifeweb.com/facebook_logo.jpg";var o = 100;var t;var p = 0;window.onload = function() { t = setInterval(fadeOut, 1000);} if(p<image.length){ p++; } else {p = 0;}function fadeOut(){ var pic = document.getElementById("pic"); pic.style.filter = "alpha(opacity="+o+")"; pic.style.MozOpacity = o/100; pic.style.opacity = o/100; o -= 10; if(o<=0){ clearInterval(t); t = setInterval(fadeIn, 1000); } document.getElementById("pic").src = image[p]; }function fadeIn(){ var pic = document.getElementById("pic"); pic.style.filter = "alpha(opacity="+o+")"; pic.style.MozOpacity = o/100; pic.style.opacity = o/100; o += 10; if(o>=100){ clearInterval(t); t = setInterval(fadeOut, 1000); } document.getElementById("pic").src = image[p+1]; }</script></head><body><img id="pic" src="" style="width:400px; height:400px;" /></body></html> Link to comment Share on other sites More sharing options...
tinfanide Posted July 23, 2011 Author Share Posted July 23, 2011 Or be simple to myself before I can make the image fading into another image effect. Now I only make it like:Load the first imageFade it outLoad the second image (with full opacity)Fade it outAnd this goes on and on. I want to ask what's wrong with the else statement at the end I made???Can anyone give me some thoughts? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script>var image = new Array();image[0] = "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png";image[1] = "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png";image[2] = "http://www.techlifeweb.com/facebook_logo.jpg";if(document.images){ var image1 = new Image() image1.src = "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png" var image2 = new Image() image2.src = "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png" var image3 = new Image() image3.src = "http://www.techlifeweb.com/facebook_logo.jpg" var image4 = new Image() image4.src = "http://hackingarticles.com/wp-content/uploads/gmail_logo_stylized.png" }var o = 100;var t;var p = -1;var f = 100; if(p<image.length){ p++; } else {p = -1;} t = setInterval(fadeOut, f); function fadeOut(){ var pic = document.getElementById("pic"); pic.style.filter = "alpha(opacity="+o+")"; pic.style.MozOpacity = o/100; pic.style.opacity = o/100; o -= 10;document.getElementById("pic").src = image[p]; if(o<=0){ document.getElementById("pic").src = image[p+1]; document.getElementById("pic").style.filter = "alpha(opacity=100)"; clearInterval(t); } else { t; } }</script></head><body><img id="pic" src="" style="width:400px; height:400px;" /></body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted July 23, 2011 Share Posted July 23, 2011 <script>var image = new Array();image[0] = "images/pic1.jpg";image[1] = "images/pic2.jpg";image[2] = "images/pic3.jpg";image[3] = "images/pic4.jpg";image[4] = "images/pic5.jpg";image[5] = "images/pic6.jpg";/*if(document.images){ var image1 = new Image() image1.src = "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png" var image2 = new Image() image2.src = "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png" var image3 = new Image() image3.src = "http://www.techlifeweb.com/facebook_logo.jpg" var image4 = new Image() image4.src = "http://hackingarticles.com/wp-content/uploads/gmail_logo_stylized.png" }*/var o = 100;var t;var p = 0; /*array index start value of 0 */var f = 100; t = setInterval(fadeOut, f); /* kick start setinterval()*/function fadeOut(){ var pic = document.getElementById("pic"); pic.src = image[p]; /* load image to show */ pic.style.filter = "alpha(opacity="+o+")"; pic.style.MozOpacity = o/100; pic.style.opacity = o/100; o -= 10; if(o<=0) { if(p<image.length-1) /*because array index begins at 0 reduce length/count by 1*/ { p++; } else { p = 0; /* reset to first array index value 0;*/ } pic.src = image[p]; /*reset opacity to 100 or 1 depending on browser*/ pic.style.filter = "alpha(opacity=100)"; pic.style.MozOpacity = 1; pic.style.opacity = 1; /* clear setinterval loop */ clearInterval(t); /*reset opacity varible to 0*/ o = 100; /* restart setInterval */ t = setInterval(fadeOut, f); } /* else { t; }*/ }</script> Link to comment Share on other sites More sharing options...
tinfanide Posted July 25, 2011 Author Share Posted July 25, 2011 <script>var image = new Array();image[0] = "images/pic1.jpg";image[1] = "images/pic2.jpg";image[2] = "images/pic3.jpg";image[3] = "images/pic4.jpg";image[4] = "images/pic5.jpg";image[5] = "images/pic6.jpg";/*if(document.images){ var image1 = new Image() image1.src = "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png" var image2 = new Image() image2.src = "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png" var image3 = new Image() image3.src = "http://www.techlifeweb.com/facebook_logo.jpg" var image4 = new Image() image4.src = "http://hackingarticles.com/wp-content/uploads/gmail_logo_stylized.png" }*/var o = 100;var t;var p = 0; /*array index start value of 0 */var f = 100; t = setInterval(fadeOut, f); /* kick start setinterval()*/function fadeOut(){ var pic = document.getElementById("pic"); pic.src = image[p]; /* load image to show */ pic.style.filter = "alpha(opacity="+o+")"; pic.style.MozOpacity = o/100; pic.style.opacity = o/100; o -= 10; if(o<=0) { if(p<image.length-1) /*because array index begins at 0 reduce length/count by 1*/ { p++; } else { p = 0; /* reset to first array index value 0;*/ } pic.src = image[p]; /*reset opacity to 100 or 1 depending on browser*/ pic.style.filter = "alpha(opacity=100)"; pic.style.MozOpacity = 1; pic.style.opacity = 1; /* clear setinterval loop */ clearInterval(t); /*reset opacity varible to 0*/ o = 100; /* restart setInterval */ t = setInterval(fadeOut, f); } /* else { t; }*/ }</script> Thanks for the scripts that inspire me a lot.But I found the image that has just faded out to 0 (opacity) came back again (opacity = 100) before another image is loaded (opacity = 100).I tried to fix it by writing off them o = 100; But it does not stop the old image reappearing before the new image is loaded.How could I do then? It's quite weird to me. Link to comment Share on other sites More sharing options...
tinfanide Posted August 1, 2011 Author Share Posted August 1, 2011 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JS: fade-Out & fade-In</title><script>var o = 100;//Declare t here in the global space//Every time you use setInterval or clearInterval, use tvar t;var img = []; img[0] = {src: "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png", cap: "", url: "", des: "" }; img[1] = {src: "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png", cap: "", url: "", des: "" }; img[2] = {src: "http://www.techlifeweb.com/facebook_logo.jpg", cap: "", url: "", des: "" }; img[3] = {src: "http://www.thetechherald.com/media/images/201115/Adobe_2.jpg", cap: "", url: "", des: "" };for(var imgs=[], i=0; i<img.length; i++){ imgs[i] = new Image(); imgs[i].src = img[i].src; }var p = 0;var fSpeed = 5;var c; window.onload = function() { var pic = document.getElementById("pic"); t = setInterval(fadeOut, fSpeed);}function fadeOut(){ pic.src = img[p].src; pic.style.filter = "alpha(opacity="+o+")"; pic.style.MozOpacity = o/100; pic.style.opacity = o/100; o -= 1; if(o<=0){ if(p<img.length-1){p++;} else{p=0;} pic.src = img[p].src; clearTimeout(c); t = setInterval(fadeIn, fSpeed); } }function fadeIn(){ pic.style.filter = "alpha(opacity="+o+")"; pic.style.MozOpacity = o/100; pic.style.opacity = o/100; o += 1; if(o>=100){ clearInterval(t); c=setTimeout(fadeOut,1000) } }</script></head><body><img id="pic" src="" style="width: 500px; height: 500px;" /></body></html> I wanted to have the fede-in image stay as long as I want (I set to 1 sec).But it seems there's something wrong with setTimeout used by me in the script.How could I possibly fix them? Link to comment Share on other sites More sharing options...
tinfanide Posted August 1, 2011 Author Share Posted August 1, 2011 function fadeIn(){ var pic = document.getElementById("pic"); pic.style.filter = "alpha(opacity="+o+")"; pic.style.MozOpacity = o/100; pic.style.opacity = o/100; o += 1; setTimeout( function(){if(o>=100){ clearInterval(t); t = setInterval(fadeOut, fSpeed); }},5000) } I've tried dealing with it finally like this.Don't know why it works in the Firefox console but the last one didn't. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.