jQuery Slideshow not working in IE8, works fine in Safari/Firefox_问答_开发者

The website (www.hilaryandmatthew.com) for my upcoming wedding has a really nifty JQuery slideshow (courtesy of www.dynamicdrive.com)

I hope I can get some help ASAP, I really want my site looking sharp before I send out the Invitations. I don't know anything about jQuery. Hence I experience the pitfall of copy&pasting open-source code.

I am getting this error when I try to load the page in IE8:

Message: 'imagearray[...].0' is null or not an object Line: 39 Char: 3 Code: 0 URI: http://www.hilaryandmatthew.com/includes/slideshow/fadeslideshow.js

This is the code with my image array that passes into the function 'fadeSlideShow(settingarg)'

<script type="text/javascript">

var mygallery=new fadeSlideShow({
    wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    dimensions: [267, 200], //width/height of gallery in pixels. Should reflect dimensions of largest image
    imagearray: [
                ["images/ss1.jpg", "", "", ""],
                ["images/ss2.jpg", "", "", ""],
                ["images/ss3.jpg", "", "", ""],
                ["images/ss4.jpg", "", "", ""],
                ["images/ss5.jpg", "", "", ""],
                ["images/ss6.jpg", "", "", ""],
                ["images/ss7.jpg", "", "", ""],
                ["images/ss9.jpg", "", "", ""],
                ["images/ss10.jpg", "", "", ""],
                ["images/ss11.jpg", "", "", ""],
                ["images/ss12.jpg", "", "", ""],
                ["images/ss13.jpg", "", "", ""],
                ["images/ss14.jpg", "", "", ""],
                ["images/ss15.jpg", "", "", ""],

        ],
    displaymode: {type:'auto', pause:2800, cycles:0, wraparound:false},
    persist: false, //remember last viewed slide and recall within same session?
    fadeduration: 600, //transition duration (milliseconds)
    descreveal: "ondemand",
    togglerid: ""
})
</script>

Here is the code with the error in a separate .js file:

var fadeSlideShow_descpanel={
    controls: [['/includes/slideshow/x.png',7,7], ['/includes/slideshow/restore.png',10,11], ['/includes/slideshow/loading.gif',54,55]], 

//full URL and dimensions of close, restore, and loading images

fontStyle: 'normal 12px Verdana', //font style for text descriptions
slidespeed: 200 //speed of description panel animation (in millisec)
}

//No need to edit beyond here...

jQuery.noConflict()

function fadeSlideShow(settingarg){

    this.setting=settingarg
    settingarg=null
    var setting=this.setting
    setting.fadeduration=setting.fadeduration? parseInt(setting.fadeduration) : 500
    setting.curimage=(setting.persist)? fadeSlideShow.routines.getCookie("gallery-"+setting.wrapperid) : 0
    setting.curimage=setting.curimage || 0 //account for curimage being null if cookie is empty
    setting.currentstep=0 //keep track of # of slides slideshow has gone through (applicable in displaymode='auto' only)
    setting.totalsteps=setting.imagearray.length*(setting.displaymode.cycles>0? setting.displaymode.cycles : Infinity) //Total steps limit (applicable in displaymode='auto' only w/ cycles>0)
    setting.fglayer=0, setting.bglayer=1 //index of active and background layer (switches after each change开发者_JAVA技巧 of slide)
    setting.displaymode.randomize=true
        setting.oninit=setting.oninit || function(){}
    setting.onslide=setting.onslide || function(){}
    if (setting.displaymode.randomize) //randomly shuffle order of images?
        setting.imagearray.sort(function() {return 0.5 - Math.random()})
    var preloadimages=[] //preload images
    setting.longestdesc="" //get longest description of all slides. If no desciptions defined, variable contains ""
    for (var i=0; i<setting.imagearray.length; i++){ //preload images
        preloadimages[i]=new Image()

-LINE 39, SOURCE OF ERRROR, BELOW -

 preloadimages[i].src=setting.imagearray[i][0]

                if (setting.imagearray[i][3] && setting.imagearray[i]

[3].length>setting.longestdesc.length)
                setting.longestdesc=setting.imagearray[i][3]
        }
        var closebutt=fadeSlideShow_descpanel.controls[0] //add close button to "desc" panel if descreveal="always"
        setting.closebutton=(setting.descreveal=="always")? '<img class="close" src="'+closebutt[0]+'" style="float:right;cursor:hand;cursor:pointer;width:'+closebutt[1]+'px;height:'+closebutt[2]+'px;margin-left:2px" title="Hide Description" />' : ''
        var slideshow=this
        jQuery(document).ready(function($){ //fire on DOM ready
            var setting=slideshow.setting
            var fullhtml=fadeSlideShow.routines.getFullHTML(setting.imagearray) //get full HTML of entire slideshow
            setting.$wrapperdiv=$('#'+setting.wrapperid).css({position:'relative', visibility:'visible', background:'black', overflow:'hidden', width:setting.dimensions[0], height:setting.dimensions[1]}).empty() //main slideshow DIV
            if (setting.$wrapperdiv.length==0){ //if no wrapper DIV found
                alert("Error: DIV with ID \""+setting.wrapperid+"\" not found on page.")
                return
            }
            setting.$gallerylayers=$('<div class="gallerylayer"></div><div class="gallerylayer"></div>') //two stacked DIVs to display the actual slide
                .css({position:'absolute', left:0, top:0, width:'100%', height:'100%', background:'black'})
                .appendTo(setting.$wrapperdiv)
            var $loadingimg=$('<img src="'+fadeSlideShow_descpanel.controls[2][0]+'" style="position:absolute;width:'+fadeSlideShow_descpanel.controls[2][1]+';height:'+fadeSlideShow_descpanel.controls[2][2]+'" />')
                .css({left:setting.dimensions[0]/2-fadeSlideShow_descpanel.controls[2][1]/2, top:setting.dimensions[1]/2-fadeSlideShow_descpanel.controls[2][2]}) //center loading gif
                .appendTo(setting.$wrapperdiv)
            var $curimage=setting.$gallerylayers.html(fullhtml).find('img').hide().eq(setting.curimage) //prefill both layers with entire slideshow content, hide all images, and return current image
            if (setting.longestdesc!=""){ //if at least one slide contains a description (feature is enabled)
                fadeSlideShow.routines.adddescpanel($, setting)
                if (setting.descreveal=="always"){ //position desc panel so it's visible to begin with
                    setting.$descpanel.css({top:setting.dimensions[1]-setting.panelheight})
                    setting.$descinner.click(function(e){ //asign click behavior to "close" icon
                        if (e.target.className=="close"){
                            slideshow.showhidedescpanel('hide')
                        }
                    })
                    setting.$restorebutton.click(function(e){ //asign click behavior to "restore" icon
                        slideshow.showhidedescpanel('show')
                        $(this).css({visibility:'hidden'})
                    })
                }
                else{ //display desc panel on demand (mouseover)
                    setting.$wrapperdiv.bind('mouseenter', function(){slideshow.showhidedescpanel('show')})
                    setting.$wrapperdiv.bind('mouseleave', function(){slideshow.showhidedescpanel('hide')})
                }
            }
            setting.$wrapperdiv.bind('mouseenter', function(){setting.ismouseover=true}) //pause slideshow mouseover
            setting.$wrapperdiv.bind('mouseleave', function(){setting.ismouseover=false})
            if ($curimage.get(0).complete){ //accounf for IE not firing image.onload
                $loadingimg.hide()
                slideshow.paginateinit($)
                slideshow.showslide(setting.curimage)
            }
            else{ //initialize slideshow when first image has fully loaded
                $loadingimg.hide()
                slideshow.paginateinit($)
                $curimage.bind('load', function(){slideshow.showslide(setting.curimage)})
            }
            setting.oninit.call(slideshow) //trigger oninit() event
            $(window).bind('unload', function(){ //clean up and persist
                if (slideshow.setting.persist) //remember last shown image's index
                    fadeSlideShow.routines.setCookie("gallery-"+setting.wrapperid, setting.curimage)
                jQuery.each(slideshow.setting, function(k){
                    if (slideshow.setting[k] instanceof Array){
                        for (var i=0; i<slideshow.setting[k].length; i++){
                            if (slideshow.setting[k][i].tagName=="DIV") //catches 2 gallerylayer divs, gallerystatus div
                                slideshow.setting[k][i].innerHTML=null
                            slideshow.setting[k][i]=null
                        }
                    }
                })
                slideshow=slideshow.setting=null
            })
        })
    }

There are a few more functions in the file.. if they are relevant, the full source is available at http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

Just to clarify further, I personally spend some time finding it...

<script type="text/javascript">

var mygallery=new fadeSlideShow({
    wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    dimensions: [267, 200], //width/height of gallery in pixels. Should reflect dimensions of largest image
    imagearray: [
                ["images/ss1.jpg", "", "", ""],
                ["images/ss2.jpg", "", "", ""],
                ["images/ss3.jpg", "", "", ""],
                ["images/ss4.jpg", "", "", ""],
                ["images/ss5.jpg", "", "", ""],
                ["images/ss6.jpg", "", "", ""],
                ["images/ss7.jpg", "", "", ""],
                ["images/ss9.jpg", "", "", ""],
                ["images/ss10.jpg", "", "", ""],
                ["images/ss11.jpg", "", "", ""],
                ["images/ss12.jpg", "", "", ""],
                ["images/ss13.jpg", "", "", ""],
                ["images/ss14.jpg", "", "", ""],
                ["images/ss15.jpg", "", "", ""],   <<==== Delete this comma

        ],

the issue is directly in the first block of code you posted: Internet Explorer doesn't like trailing commas in objects and arrays.
You just need to remove the trailing comma from the last element in imagearray and it should work (if it doesn't, check other arrays and objects for the same issue)