By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,702 Members | 1,771 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,702 IT Pros & Developers. It's quick & easy.

looping slideshow fails to change/fade image in/out

P: 1
Hello, hope you have a few minutes to lend me your thoughts on why my code doesn't do anything. I'm trying to run a looping slideshow of 3 or more pictures, fading in and out. At the moment, nothing happens. The first image is displayed statically in position, no fading or changing image at all.

my code:
in the head I declare my images
Expand|Select|Wrap|Line Numbers
  1.     <script type="text/javascript">
  2.     <!--
  3.         var image1=new Image()
  4.         image1.src="media/home/image1.jpg"
  5.         var image2=new Image()
  6.         image2.src="media/home/image2.jpg"
  7.         var image3=new Image()
  8.         image3.src="media/home/image3.jpg"
  9.     //-->
  10.     </script>

and this is in the body
Expand|Select|Wrap|Line Numbers
  1. <div id="content">
  2.           <div id="slideshow"> <img src="media/home/image1.jpg"
  3.               alt="oops! The slideshow hasn't loaded! Please try
  4.               refreshing (ctrl+F5) or send us an email to let us know."
  5.               name="slide" height="410" width="600"> </div>
  6.           <div id="nextslide"> <img src="media/home/image2.jpg"
  7.               alt="oops! The slideshow hasn't loaded! Please try
  8.               refreshing (ctrl+F5) or send us an email to let us know."
  9.               name="slide" height="410" width="600"> </div>
  10.           <script type="text/javascript">
  11. <!--
  12. //if browser does not support the image object, exit.
  13. if (!document.images)
  14. return
  15. if (!document.getElementById)
  16. return
  17.  
  18. var slide1 = document.getElementById("slideshow");
  19. var slide2 = document.getElementById("nextslide");
  20. var currentpic = document.getElementById("slide1pic");
  21. var nextpic = document.getElementById("slide2pic");
  22. var changeslide = document.getElementById("slideshow").src;
  23. var duration = 3000; /* fade duration in millisecond */
  24. var showtime = 10000; /* time to stay visible */
  25. //variable that will increment through the images
  26. var step=3;
  27.  
  28. //function to update opacity/alpha filter of slide1 to a given value and of slide2 to the inverse
  29. function SetOpa(Opa) {
  30. Opa2 = 1-Opa;
  31. slide1.style.opacity = Opa;
  32. slide1.style.MozOpacity = Opa;
  33. slide1.style.KhtmlOpacity = Opa;
  34. slide1.style.filter = 'alpha(opacity=' + (Opa * 100) + ');';
  35. slide2.style.opacity = Opa2;
  36. slide2.style.MozOpacity = Opa2;
  37. slide2.style.KhtmlOpacity = Opa2;
  38. slide2.style.filter = 'alpha(opacity=' + (Opa2 * 100) + ');';
  39. }
  40.  
  41. function fade() {
  42. //fade from slide1 to halfway between 1 and 2
  43. for (i = 0; i <= 0.5; i += 0.01) {
  44. setTimeout("SetOpa(" + (1 - i) +")", i * duration);
  45. }
  46. //at halfway point, switch slide images
  47. changeslide=currentpic.src;
  48. document.images.currentpic.src=eval(nextpic.src);
  49. document.images.nextpic.src=changeslide;
  50.  
  51. //complete fade through
  52. for (i = 0.5; i <= 1; i += 0.01) {
  53. setTimeout("SetOpa(" + (1 - i) +")", i * duration);
  54. }
  55. //update nextslide
  56. document.images.slide2.src=eval("image"+(step)".src");
  57.  
  58. if(step < 3)
  59. step++;
  60. else
  61. step=1;
  62.  
  63. //call function fade() every 10 seconds
  64. setTimeout("fade()",showtime);
  65. }
  66.  
  67. fade();
  68. //-->
  69. </script>
  70. </div>
  71.  
can you tell me what i'm doing wrong?
Feb 5 '12 #1
Share this Question
Share on Google+
2 Replies


P: 28
Hi clover8leaf.

Basically from your code, you are only creating the images (image1,image2, and image3). However, you have no code for diplaying those images. I suggest that you create a function:

Expand|Select|Wrap|Line Numbers
  1. function updateFullImage(id, url){
  2.      var image1 = document.getElementById(id);
  3.      img.src = url ; 
Note: Make sure you have an image tag in your HTML and have an ID.
Feb 7 '12 #2

Dormilich
Expert Mod 5K+
P: 8,639
However, you have no code for diplaying those images. I suggest that you create a function:

Expand|Select|Wrap|Line Numbers
  1. function updateFullImage(id, url){
  2.      var image1 = document.getElementById(id);
  3.      img.src = url ; 
except for the issue that you don't change the src of the image you fetch ...
Feb 7 '12 #3

Post your reply

Sign in to post your reply or Sign up for a free account.