admin管理员组

文章数量:1323335

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

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: .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 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)plete){ //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 .htm

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

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./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 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).plete){ //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./dynamicindex14/fadeinslideshow.htm

Share edited Oct 1, 2011 at 23:01 Book Of Zeus 49.9k18 gold badges175 silver badges171 bronze badges asked Feb 24, 2010 at 20:44 Matt H.Matt H. 10.8k9 gold badges48 silver badges63 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 5

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 ma

        ],

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

本文标签: javascriptjQuery Slideshow not working in IE8works fine in SafariFirefoxStack Overflow