Phatfusion Slideshow in IE issues

Question

Hi All,
At the following page......
http://ianf.powweb.com/REDO.html
..... I have the Phatfusion Slideshow working......  kinda.
It works as I've tweaked it in FF, Opera and Safari.
IE  (7), of course, is another story.
Aside form a margin/padding issue on the "copyright layer, it is the actual Slideshow that I need some assistance with.
I cant for the life of me, figure out why IE wont play the slideshow in the built-in container (large grey box) but will "cross-link" the thumbnails to a new page.
Any and all help would be most gratefully received.
Thanks
Ian

Answer 1

OK......
Below is the code I've copied from the page.  I've tweaked only the options "allowed" by Sam, within the "GET OPTONS" section:-
Its strange that this works for all the Browsers except IE.
Hope this helps!
Thanks
Ian
    Script        : SlideShow
    Version        : 1.3
    Authors        : Samuel Birch
    Desc        :
    Licence        : Open Source MIT Licence
var SlideShow = new Class({
    getOptions: function(){
        return {
            effect: 'slide', //fade|wipe|slide|random
            duration: 2000,
            transition: Fx.Transitions.linear,
            direction: 'top', //top|right|bottom|left|random
            color: false,
            wait: 3000,
            loop: false,
            thumbnails: false,
            thumbnailCls: 'outline',
            backgroundSlider: false,
            loadingCls: 'loading',
            onClick: false
    initialize: function(id, container, images, options){
        this.setOptions(this.getOptions(), options);
        this.container = $(container);
        this.container.setStyles({
            position: 'center',
            overflow: 'hidden'
        if(this.options.onClick){
            this.container.addEvent('click', function(){
                this.options.onClick(this.imageLoaded);
            }.bind(this));
        this.imagesHolder = new Element('div').setStyles({
            position: 'absolute',
            overflow: 'hidden',
            top: this.container.getStyle('height'),
            left: 0,
            width: '0px',
            height: '0px',
            display: 'none'
        }).injectInside(this.container);
        if($type(images) == 'string' && !this.options.thumbnails){
            var imageList = [];
            $$('.'+images).each(function(el){
                imageList.push(el.src);
                el.injectInside(this.imagesHolder);
            },this);
            this.images = imageList;
        }else if($type(images) == 'string' && this.options.thumbnails){
            var imageList = [];
            var srcList = [];
            this.thumbnails = $$('.'+images);
            this.thumbnails.each(function(el,i){
                srcList.push(el.href);
                imageList.push(el.getElement('img'));
                el.href = 'javascript:;';
                el.addEvent('click',function(){
                    this.stop();
                    this.play(i);                
                }.bind(this,el,i));
            },this);
            this.images = srcList;
            this.thumbnailImages = imageList;
            if(this.options.backgroundSlider){
                this.bgSlider = new BackgroundSlider(this.thumbnailImages,{mouseOver: false, duration: this.options.duration, className: this.options.thumbnailCls, padding:{top:0,right:0,bottom:0,left:0}});
                this.bgSlider.set(this.thumbnailImages[0]);
        }else{
            this.images = images;
        this.loading = new Element('div').addClass(this.options.loadingCls).setStyles({
            position: 'absolute',
            top: 0,
            left: 0,
            zIndex: 3,
            display: 'none',
            width: this.container.getStyle('width'),
            height: this.container.getStyle('height')
        }).injectInside(this.container);
        this.oldImage = new Element('div').setStyles({
            position: 'absolute',
            overflow: 'hidden',
            top: 0,
            left: 0,
            opacity: 0,
            width: this.container.getStyle('width'),
            height: this.container.getStyle('height')
        }).injectInside(this.container);
        this.newImage = this.oldImage.clone();
        this.newImage.injectInside(this.container);
        this.timer = 0;
        this.image = -1;
        this.imageLoaded = 0;
        this.stopped = true;
        this.started = false;
        this.animating = false;
    load: function(){
        $clear(this.timer);
        this.loading.setStyle('display','block');
        this.image++;
        var img = this.images[this.image];
        delete this.imageObj;
        doLoad = true;
        this.imagesHolder.getElements('img').each(function(el){
            var src = this.images[this.image];
            if(el.src == src){
                this.imageObj = el;
                doLoad = false;
                this.add = false;
                this.show();
        },this);
        if(doLoad){
            this.add = true;
            this.imageObj = new Asset.image(img, {onload: this.show.bind(this)});
    show: function(add){
        if(this.add){
            this.imageObj.injectInside(this.imagesHolder);
        this.newImage.setStyles({
            zIndex: 1,
            opacity: 0
        var img = this.newImage.getElement('img');
        if(img){
            img.replaceWith(this.imageObj.clone());
        }else{
            var obj = this.imageObj.clone();
            obj.injectInside(this.newImage);
        this.imageLoaded = this.image;
        this.loading.setStyle('display','none');
        if(this.options.thumbnails){
            if(this.options.backgroundSlider){
                var elT = this.thumbnailImages[this.image];
                this.bgSlider.move(elT);
                this.bgSlider.setStart(elT);
            }else{
                this.thumbnails.each(function(el,i){
                    el.removeClass(this.options.thumbnailCls);
                    if(i == this.image){
                        el.addClass(this.options.thumbnailCls);
                },this);
        this.effect();
    wait: function(){
        this.timer = this.load.delay(this.options.wait,this);
    play: function(num){
        if(this.stopped){
            if(num > -1){this.image = num-1};
            if(this.image < this.images.length){
                this.stopped = false;
                if(this.started){
                    this.next();
                }else{
                    this.load();
                this.started = true;
    stop: function(){
        $clear(this.timer);
        this.stopped = true;
    next: function(wait){
        var doNext = true;
        if(wait && this.stopped){
            doNext = false;
        if(this.animating){
            doNext = false;
        if(doNext){
            this.cloneImage();
            $clear(this.timer);
            if(this.image < this.images.length-1){
                if(wait){
                    this.wait();
                }else{
                    this.load();   
            }else{
                if(this.options.loop){
                    this.image = -1;
                    if(wait){
                        this.wait();
                    }else{
                        this.load();   
                }else{
                    this.stopped = true;
    previous: function(){
        if(this.imageLoaded == 0){
            this.image = this.images.length-2;   
        }else{
            this.image = this.imageLoaded-2;
        this.next();
    cloneImage: function(){
        var img = this.oldImage.getElement('img');
        if(img){
            img.replaceWith(this.imageObj.clone());
        }else{
            var obj = this.imageObj.clone();
            obj.injectInside(this.oldImage);
        this.oldImage.setStyles({
            zIndex: 0,
            top: 0,
            left: 0,
            opacity: 1
        this.newImage.setStyles({opacity:0});
    effect: function(){
        this.animating = true;
        this.effectObj = this.newImage.effects({
            duration: this.options.duration,
            transition: this.options.transition
        var myFxTypes = ['fade','wipe','slide'];
        var myFxDir = ['top','right','bottom','left'];
        if(this.options.effect == 'fade'){
            this.fade();
        }else if(this.options.effect == 'wipe'){
            if(this.options.direction == 'random'){
                this.setup(myFxDir[Math.floor(Math.random()*(3+1))]);
            }else{
                this.setup(this.options.direction);
            this.wipe();
        }else if(this.options.effect == 'slide'){
            if(this.options.direction == 'random'){
                this.setup(myFxDir[Math.floor(Math.random()*(3+1))]);
            }else{
                this.setup(this.options.direction);
            this.slide();
        }else if(this.options.effect == 'random'){
            var type = myFxTypes[Math.floor(Math.random()*(2+1))];
            if(type != 'fade'){
                var dir = myFxDir[Math.floor(Math.random()*(3+1))];
                if(this.options.direction == 'random'){
                    this.setup(dir);
                }else{
                    this.setup(this.options.direction);
            }else{
                this.setup();
            this[type]();
    setup: function(dir){
        if(dir == 'top'){
            this.top = -this.container.getStyle('height').toInt();
            this.left = 0;
            this.topOut = this.container.getStyle('height').toInt();
            this.leftOut = 0;
        }else if(dir == 'right'){
            this.top = 0;
            this.left = this.container.getStyle('width').toInt();
            this.topOut = 0;
            this.leftOut = -this.container.getStyle('width').toInt();
        }else if(dir == 'bottom'){
            this.top = this.container.getStyle('height').toInt();
            this.left = 0;
            this.topOut = -this.container.getStyle('height').toInt();
            this.leftOut = 0;
        }else if(dir == 'left'){
            this.top = 0;
            this.left = -this.container.getStyle('width').toInt();
            this.topOut = 0;
            this.leftOut = this.container.getStyle('width').toInt();
        }else{
            this.top = 0;
            this.left = 0;
            this.topOut = 0;
            this.leftOut = 0;
    fade: function(){
        this.effectObj.start({
            opacity: [0,1]
        this.resetAnimation.delay(this.options.duration+90,this);
        if(!this.stopped){
        this.next.delay(this.options.duration+100,this,true);
    wipe: function(){
        this.oldImage.effects({
            duration: this.options.duration,
            transition: this.options.transition
        }).start({
            top: [0,this.topOut],
            left: [0, this.leftOut]
        this.effectObj.start({
            top: [this.top,0],
            left: [this.left,0],
            opacity: [1,1]
        },this);
        this.resetAnimation.delay(this.options.duration+90,this);
        if(!this.stopped){
        this.next.delay(this.options.duration+100,this,true);
    slide: function(){
        this.effectObj.start({
            top: [this.top,0],
            left: [this.left,0],
            opacity: [1,1]
        },this);
        this.resetAnimation.delay(this.options.duration+90,this);
        if(!this.stopped){
        this.next.delay(this.options.duration+100,this,true);
    resetAnimation: function(){
        this.animating = false;
SlideShow.implement(new Options);
SlideShow.implement(new Events);