Firefox Slideshow

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • jkbarbee37
    New Member
    • Nov 2005
    • 1
    #1

    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:

    Code:
     <html> 
<head>
<script language="JavaScript" type="text/javascript">
<!--
theimages = new Array("images/mathnightpic1.jpg","images/mathnightpic2.jpg","images/mathnightpic3.jpg");
 
//variable that will increment through the images
var thisimage = 0;
var imagecount = theimages.length;
 
function rotate()
{
if (document.images)
{
thisimage++;
if (thisimage == imagecount)
{
thisimage = 0;
}
document.images["mainimage"].src = theimages[thisimage];
setTimeout("rotate()", 3 * 1000);
}
}
//-->
</script>
 
</head>
<body onload="rotate()">
<img src="images/mathnightpic1.jpg" name="mainimage" width=316 height=237>
 
</body>
</html>
    [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
    Last edited by Niheel; Nov 22 '05, 08:17 PM.
    Tags: blendtrans firefox, firefox slideshow
    • Niheel
      Recognized Expert Moderator Top Contributor
      • Jul 2005
      • 2433
      #2
      Found this on codelifter.com:

      Code:
      ===========================================================
Script:   JavaScript Cross-Browser SlideShow Script
		  With Cross-Fade Effect between Images
		  Adjustable Timing and Unlimited Images
Function: Displays images continuously in a slideshow
		  presentation format, with a fade effect on
		  image transitions.
Browsers: All common browsers: NS3-6, IE 4-6
		  Fade effect only in IE; others degrade gracefully
Author:   etLux
===========================================================
Step 1.
Put the following script in the head of your page:
<script>
// (C) 2000 [url="http://www.CodeLifter.com"]www.CodeLifter.com[/url]
// [url="http://www.codelifter.com"]http://www.codelifter.com[/url]
// Free for all users, but leave in this  header
// NS4-6,IE4-6
// Fade effect only in IE; degrades gracefully
// =======================================
// set the following variables
// =======================================
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000
// Duration of crossfade (seconds)
var crossFadeDuration = 3
// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below
Pic[0] = '1.jpg'
Pic[1] = '2.jpg'
Pic[2] = '3.jpg'
Pic[3] = '4.jpg'
Pic[4] = '5.jpg'
// =======================================
// do not edit anything below this line
// =======================================
var t
var j = 0
var p = Pic.length
var preLoad = new Array()
for (i = 0; i < p; i++){
   preLoad[i] = new Image()
   preLoad[i].src = Pic[i]
}
function runSlideShow(){
   if (document.all){
	  document.images.SlideShow.style.filter="blendTrans(duration=2)"
	  document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
	  document.images.SlideShow.filters.blendTrans.Apply()	  
   }
   document.images.SlideShow.src = preLoad[j].src
   if (document.all){
	  document.images.SlideShow.filters.blendTrans.Play()
   }
   j = j + 1
   if (j > (p-1)) j=0
   t = setTimeout('runSlideShow()', slideShowSpeed)
}
</script>
===========================================================
Step 2.
Put this onload event call in your body tag:
  
<body onload="runSlideShow()">  
===========================================================
Step 3.
Put this in the body of your page where you want the 
slide show to appear.  
Set widths and heights same as images
Set image file same as first image in array Pic[] (above)
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height=150 width=150>
<img src="1.jpg" name='SlideShow' width=150 height=150></td>
</tr>
</table>
===========================================================
      See if it works and let us know how it goes.
      niheel @ bytes

        Comment

        • acoder
          Recognized Expert MVP
          • Nov 2006
          • 16032
          #3
          No deficiency in Firefox. The original posted code works fine in Firefox.

            Comment

            Previous template Next
            Working...