473,320 Members | 2,004 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Firefox Slideshow

I've done enough poking around lately to realise that there is a deficiency in Firefox when it comes to using document.images to reference an image for the purpose of building a slideshow. The code below works as I expected in IE, but just sits there in Firefox:

Expand|Select|Wrap|Line Numbers
  1.  <html> 
  2. <head>
  3. <script language="JavaScript" type="text/javascript">
  4. <!--
  5. theimages = new Array("images/mathnightpic1.jpg","images/mathnightpic2.jpg","images/mathnightpic3.jpg");
  6.  
  7. //variable that will increment through the images
  8. var thisimage = 0;
  9. var imagecount = theimages.length;
  10.  
  11. function rotate()
  12. {
  13. if (document.images)
  14. {
  15. thisimage++;
  16. if (thisimage == imagecount)
  17. {
  18. thisimage = 0;
  19. }
  20. document.images["mainimage"].src = theimages[thisimage];
  21. setTimeout("rotate()", 3 * 1000);
  22. }
  23. }
  24. //-->
  25. </script>
  26.  
  27. </head>
  28. <body onload="rotate()">
  29. <img src="images/mathnightpic1.jpg" name="mainimage" width=316 height=237>
  30.  
  31. </body>
  32. </html>
  33.  
[color=darkred][color=#000000][/color]
[/color]
My question is if anyone knows of another way to accomplish the same effect using javascript? I know there are java classes that you can by/download and there are some CSS tricks that might do the trick, but I'm looking for a javascript solution. Can anyone help? TIA.

John
Nov 22 '05 #1
2 14873
Niheel
2,460 Expert Mod 2GB
Found this on codelifter.com:

Expand|Select|Wrap|Line Numbers
  1. ===========================================================
  2. Script:   JavaScript Cross-Browser SlideShow Script
  3.           With Cross-Fade Effect between Images
  4.           Adjustable Timing and Unlimited Images
  5. Function: Displays images continuously in a slideshow
  6.           presentation format, with a fade effect on
  7.           image transitions.
  8. Browsers: All common browsers: NS3-6, IE 4-6
  9.           Fade effect only in IE; others degrade gracefully
  10. Author:   etLux
  11. ===========================================================
  12. Step 1.
  13. Put the following script in the head of your page:
  14. <script>
  15. // (C) 2000 www.CodeLifter.com
  16. // http://www.codelifter.com
  17. // Free for all users, but leave in this  header
  18. // NS4-6,IE4-6
  19. // Fade effect only in IE; degrades gracefully
  20. // =======================================
  21. // set the following variables
  22. // =======================================
  23. // Set slideShowSpeed (milliseconds)
  24. var slideShowSpeed = 5000
  25. // Duration of crossfade (seconds)
  26. var crossFadeDuration = 3
  27. // Specify the image files
  28. var Pic = new Array() // don't touch this
  29. // to add more images, just continue
  30. // the pattern, adding to the array below
  31. Pic[0] = '1.jpg'
  32. Pic[1] = '2.jpg'
  33. Pic[2] = '3.jpg'
  34. Pic[3] = '4.jpg'
  35. Pic[4] = '5.jpg'
  36. // =======================================
  37. // do not edit anything below this line
  38. // =======================================
  39. var t
  40. var j = 0
  41. var p = Pic.length
  42. var preLoad = new Array()
  43. for (i = 0; i < p; i++){
  44.    preLoad[i] = new Image()
  45.    preLoad[i].src = Pic[i]
  46. }
  47. function runSlideShow(){
  48.    if (document.all){
  49.       document.images.SlideShow.style.filter="blendTrans(duration=2)"
  50.       document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
  51.       document.images.SlideShow.filters.blendTrans.Apply()      
  52.    }
  53.    document.images.SlideShow.src = preLoad[j].src
  54.    if (document.all){
  55.       document.images.SlideShow.filters.blendTrans.Play()
  56.    }
  57.    j = j + 1
  58.    if (j > (p-1)) j=0
  59.    t = setTimeout('runSlideShow()', slideShowSpeed)
  60. }
  61. </script>
  62. ===========================================================
  63. Step 2.
  64. Put this onload event call in your body tag:
  65.  
  66. <body onload="runSlideShow()">  
  67. ===========================================================
  68. Step 3.
  69. Put this in the body of your page where you want the 
  70. slide show to appear.  
  71. Set widths and heights same as images
  72. Set image file same as first image in array Pic[] (above)
  73. <table border="0" cellpadding="0" cellspacing="0">
  74. <tr>
  75. <td id="VU" height=150 width=150>
  76. <img src="1.jpg" name='SlideShow' width=150 height=150></td>
  77. </tr>
  78. </table>
  79. ===========================================================
  80.  
  81.  
See if it works and let us know how it goes.
Nov 23 '05 #2
acoder
16,027 Expert Mod 8TB
No deficiency in Firefox. The original posted code works fine in Firefox.
Jun 16 '08 #3

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

Similar topics

2
by: Susanna | last post by:
Hi all, I'm using the following slideshow script that I found on the web to display changing images with a crossfade effect. Eventually I will be adding many more images to the slideshow. The...
2
by: lkrubner | last post by:
I'm trying to get a slideshow going on this page: http://www.popefamilytravels.com/index.php?pageId=5 For some reason the debugger in Firefox won't show any errors, but there are clearly some...
5
by: Brian.Steele | last post by:
Greetings everyone. See http://www.spiceisle.com/cgi-bin/slideshow/slideshow.cgi?dir=brian/personal/2005/uk_trip/images&type=jpg The "Pause" button works in IE, but not in Firefox. Any ideas...
2
by: The87Boy | last post by:
Hey I have a problem with a Javascript, which doesn't works in Firefox You can have a mouse over the 2 first pictures, but after the second picture has moved over the screen, nothing is happening...
0
by: tequilamala | last post by:
I have an Iframe in one of the pages i am developing... the iframe is suppose to scroll up and down and the links target the iframe. the problem is that the iframe scrolls side to side on internet...
2
Webwench
by: Webwench | last post by:
For some reason this flash works fine in ie but won't show up or run in firefox- what am I doing wrong? I already redownloaded the flash player. Thanks!!! <object width="213" height="163"...
9
by: derker | last post by:
hi, i am going crazy trying to figure this out. it seems like it should be real easy and probably is, but im kind of a nube flying by night so any thoughts or suggestions would be greatly...
1
by: littlealex | last post by:
IE6 not displaying text correctly - IE 7 & Firefox 3 are fine! Need some help with this as fairly new to CSS! In IE6 the text for the following page doesn't display properly - rather than being...
2
by: g1r2a3 | last post by:
Hello: The following script // ======================================= // do not edit anything below this line // ======================================= var t var j = 0
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.