2010-02-24 5 views
1

Le site (www.hilaryandmatthew.com) pour mon mariage à venir a un diaporama JQuery vraiment chouette (courtoisie de www.dynamicdrive.com)jQuery Diaporama qui ne travaillent pas dans IE8, fonctionne très bien dans Safari/Firefox

J'espère Je peux obtenir de l'aide dès que possible, je veux vraiment que mon site soit net avant d'envoyer les invitations. Je ne sais rien à propos de jQuery. Par conséquent, je rencontre le piège de la copie & coller le code open-source.

Je reçois cette erreur lorsque je tente de charger la page dans IE8:


Message: 'imagearray [...] 0' est nulle ou non un objet Ligne: 39 Char : 3 code: 0 URI: http://www.hilaryandmatthew.com/includes/slideshow/fadeslideshow.js


Ce code avec mon réseau d'image qui passe dans la fonction '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> 

Voici le code avec l'erreur dans un fichier .js séparé:

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 DE errror, CI-DESSOUS -

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 
      }) 
     }) 
    } 

Il y a quelques fonctions dans le fichier .. si elles sont pertinentes, la source complète est disponible à http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

Répondre

5

Juste pour clarifier davantage, je passe personnellement quelques-uns temps à trouver ...

<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 

     ], 
4

le problème est directement dans le premier bloc de code que vous avez posté: Internet E xplorer n'aime pas les virgules dans les objets et les tableaux.
Vous avez juste besoin d'enlever la virgule de fin du dernier élément imagearray et il devrait fonctionner (si elle n'a pas, vérifiez d'autres tableaux et objets pour le même numéro)

Questions connexes