# Add Firefox Compatibility to Existing Slideshow Script



## :z: (Feb 27, 2008)

I've been using a concise JavaScript slideshow on my website and it functions pretty well, except that the fade transition effect doesn't work in Firefox, only IE. I've tried to research this and it seems like I need to enter the following bit of script somewhere into my existing code to get it to work, but I'm pretty clueless when it comes to JavaScript and have no idea how to assimilate it into the existing slideshow script that I have. Thanks to anyone who can help!

I assume this is all I need to insert for cross-browser compatibility (correct me if I'm wrong):

```
function changeOpac(opacity, id) {
        var object = document.getElementById(id).style;
       object.opacity = (opacity / 100);
       object.MozOpacity = (opacity / 100);
       object.KhtmlOpacity = (opacity / 100);
       object.filter = "alpha(opacity=" + opacity + ")";
    }
```
And here's the script I want to put it into:

```
var slideDelay = 4500
var crossFade = 2
var Slide = new Array
("Images/Sample01.jpg","Images/Sample02.jpg","Images/Sample03.jpg","Images/Sample04.jpg","Images/Sample05.jpg","Images/Sample06.jpg");
var a
var b = 0
var c = Slide.length
var preLoad = new Array()
for (i = 0; i < c; i++){
	preLoad[i] = new Image()
	preLoad[i].src = Slide[i]
}
function runSlideShow(){
	if (document.all){
	document.images.SlideShow.style.filter="blendTrans(duration=2)"
	document.images.SlideShow.style.filter="blendTrans(duration=crossFade)"
	document.images.SlideShow.filters.blendTrans.Apply()      
	}
	document.images.SlideShow.src = preLoad[b].src
	if (document.all){
	document.images.SlideShow.filters.blendTrans.Play()
	}
b = b + 1
if (b > (c-1)) b=0
a = setTimeout('runSlideShow()', slideDelay)
}
```


----------



## :z: (Feb 27, 2008)

I've found a decent script I can use, although it's four times larger than the one above. However, I also want to do a fade transition for the script below for another part of my page, if anyone can help me with that.


```
NewImg = new Array ("Image1.jpg","Image2.jpg","Image3.jpg");
var ImgNum = 0; var ImgLength = NewImg.length - 1; var delay = 3000; var lock = false; var run;
function Advance(direction) { if (document.images) { ImgNum = ImgNum + direction; if (ImgNum > ImgLength) { ImgNum = 0; }
if (ImgNum < 0) {ImgNum = ImgLength;} document.Slideshow.src = NewImg[ImgNum];}}
function Auto() {if (lock == true) {lock = false; window.clearInterval(run);}
else if (lock == false) {lock = true;run = setInterval("Advance(1)", delay);}}
```


----------



## MMJ (Oct 15, 2006)

Due to simplicity I'd recommend a JS library with an image fade plugin.

http://www.google.com/search?q=jquery+image+fade


----------



## :z: (Feb 27, 2008)

MMJ:

Thanks for the reply. I found a decent slideshow for my home page that I was able to insert into index, but what I'm looking for now is a fading transition slideshow like the one in my second post, where I'm able to advance forward or backward by clicking on a link using

```
href="javascript:Advance(-1)
```
 or

```
href="javascript:Advance(1)
```
. Basically, the script in my second post is perfect, except that it doesn't do the fade transition. It seems like I should be able to insert the cross-browser transition effect somewhere into the code, but I have no idea how to do that. Any thoughts? Thanks again.


----------



## MMJ (Oct 15, 2006)

That code is seriously outdated and uses what is now considered bad practices, its probably written around 5 years ago.

You can patch it or just use a better over all solution.


----------



## :z: (Feb 27, 2008)

Well, the problem is I've been unable to find _any_ solution. I've found many slideshows, but few that are cross-platform compatible. As I said, I found a newer slideshow for the home page, but for the second bit, I can't find a script that already exists that does what I want it to do. Everything I've found is either a continuous slideshow or a script with links, but where I can only put two pictures into it. I need a script that is flexible enough to work with 2 to 7 photos (where they can be added/subtracted on an as-needed basis) and has "previous" and "next" links and I haven't been able to find it. Do you know of any like that? I appreciate the replies.


----------



## MMJ (Oct 15, 2006)

http://interface.eyecon.ro/docs/slideshow
http://interface.eyecon.ro/demos/slideshow.html

http://bradblogging.com/jquery/9-jquery-slideshow-applications-you-cannot-miss/

http://www.google.com/search?q=jquery+slideshow


----------



## :z: (Feb 27, 2008)

Thanks for the links!

This one looks the most promising (http://interface.eyecon.ro/demos/slideshow.html), although I'd still need to edit it to simplify it to just "Previous" and "Next" links instead of "1, 2, 3, 4, 5, 6". I'll play around with those links and try to figure it out and get back to you.


----------



## :z: (Feb 27, 2008)

I've experimented with a couple of different slideshows from those links and I can't figure it out enough to make it do what I want it to do. I think I'll just have to use my ancient and inelegant script for now and try to teach myself JavaScript before trying to tackle this issue again. Thanks again for the responses.


----------

