Slideshow Problem: "Crash" beim Einfügen von Texten

Ok, ich habe mal versucht das umzusetzen. Nebenbei hab ich noch ein bissl den Code aufgeräumt und paar Sachen übersichtlicher umbenannt.

Ich kann nur nicht testen, ob es funktioniert. Vorher war ja var image = new Array(); nicht in einer function und konnte durch function next() und function previous () angesprochen werden.
Nun bekomme ich die Meldung, dass image in start () nicht defined ist (und somit auch nicht in next () und previous ().

Wie kann ich nun der rechten Seite des "=" Zeichens sagen, dass sich das auf slideshow() bezieht?
PHP: 
function start() {
   document.getElementById("img_container").getElementsByTagName('IMG')[0].src = image[index].src;
   document.getElementById("text_container").innerHTML = image[index].txt;
   document.getElementById("counter").innerHTML = index+" / "+count;
}


Hier der ganze Code. @Sven: Ist das im Prinzip richtig umgesetzt wie Du es in Deinem letzten Post erklärt hast?

PHP: 
/* vars */
// needed for preloadAll ()
var layoutloaded;
// needed for slideshow ()
var imageloaded;
// start index of slideshow images, don't touch
var index = 1;
// total number of slideshow images, adjust here
var count = 3;

/* if JavaScript is activated, write a link to continue */
function jsCheck() {
   document.getElementById("slideshowstart").innerHTML = '<a id="slideshowstartlink" href="res/slideshow.html" title="Slideshow starten"></a>';
}

/* preloads layoutimages */
function preloadAll () {
   // counter
   var i = 0;
   // create object
   imageObj = new Image();
   // set image list
   layoutimages = new Array();
   layoutimages[0]="../img/start_slideshow.gif"
   layoutimages[1]="../img/start_slideshow_green.gif"
   layoutimages[2]="../img/ajax-loader.gif"
   layoutimages[3]="../img/frame.gif"
   layoutimages[4]="../img/arrow_right.gif"
   layoutimages[5]="../img/arrow_right_green.gif"
   layoutimages[6]="../img/arrow_left.gif"
   layoutimages[7]="../img/arrow_left_red.gif"
   // find out length of array
   layoutloaded = layoutimages.length;
   // start preloading
   for(i=0; i<=7; i++) {
      imageObj.onload = function() {
      }
      imageObj.src = layoutimages[i];
   }
   // when layoutimages are loaded, call slideshow ()
   slideshow();
}

/* slideshow preloader */
function slideshow() {
   // create object
   imageObj = new Image();
   // set image array
   var image = new Array();
   // images, edit here
   image[1] = new Image();
   image[1].src = "pics/pic001.jpg";
   image[1].txt = "Title 1";
   image[2] = new Image();
   image[2].src = "pics/pic002.jpg";
   image[2].txt = "Title 2";
   image[3] = new Image();
   image[3].src = "pics/pic003.jpg";
   image[3].txt = "Title 3";
   // find out length of array
   imageloaded = image.length;
   // start preloading
   for(index=1; index<=3; index++) {
      imageObj.onload = function() {
	     // calls preloadInfo to check if visual loader should vanish or not
         preloadInfo();
      }
      imageObj.src = image[index];
    }
	// calls start () to load first image
	start ();
}

/* loading notification, hides the visual loader when everything is loaded */
function preloadInfo() {
   if (document.getElementById) {
   imgloaded--;
      if (!imgloaded)document.getElementById("loadoverlay").style.visibility = "hidden";
   }
}

/* loads first image, first text, sets image-counter to one */
function start() {
   document.getElementById("img_container").getElementsByTagName('IMG')[0].src = image[index].src;
   document.getElementById("text_container").innerHTML = image[index].txt;
   document.getElementById("counter").innerHTML = index+" / "+count;  
} 

/* button next image */   
function next() {
   index ++;
   document.getElementById("img_container").getElementsByTagName('IMG')[0].src = image[index].src;
   document.getElementById("text_container").innerHTML = image[index].txt;
   document.getElementById("navi_previous").style.visibility = "visible";
   document.getElementById("counter").innerHTML = index+" / "+count;
   if (index == count) {
      document.getElementById("navi_next").style.visibility = "hidden";
   }
}






/* button previous image */ 
function previous() {
   index --;
   document.getElementById("img_container").getElementsByTagName('IMG')[0].src = image[index].src;
   document.getElementById("text_container").innerHTML = image[index].txt;
   document.getElementById("navi_next").style.visibility = "visible";
   document.getElementById("counter").innerHTML = index+" / "+count;
   if (index == 1) {
      document.getElementById("navi_previous").style.visibility = "hidden";
   }
}
 
Zuletzt bearbeitet:
Ok, hab nun das ganze so gelöst, indem ich var image = new Array() global definiert hab und die ganzen Bilder in function slideshow() liegen. So kann ich das ganze super ansprechen. Den visuellen Loader hab ich mit .complete gebaut und loadCheckSlide(); kuckt alle 0,5 Sekunden ob das jeweilige Bild schon fertig geladen ist oder nicht. Wenn geladen, verschwindet das Ladebild (<div id="loadoverlay">).

Ungewollter Nebeneffekt: Schau ich meine 60MB Bilder-Galerie online an, erscheint das Ladebild bei Bild 1, verschwindet und zeigt Bild 1 an. Im Hintergrund werden die ganzen Bilder schonmal - ohne dass ich das im Code berücksichtigt habe - geladen. Klickt man sich dann "zu" schnell durch die Slideshow und gelangt an ein Bild, welches noch nicht geladen ist, kommt dann automatisch wieder ein Ladebild. :)
Also hab ich immer noch keinen kontrollierten Ladevorgang hinbekommen, aber damit kann ich gut leben.

PHP: 
/* vars */

// start index of slideshow, don't touch

var index = 1;

// number of entries, edit here

var count = 2;

// setting up image array

var image = new Array();



/* preloads layout images and runs initSlideShow(); in the end */

function start () {

   // local counter

   var i = 0;

   // create object

   imageObj = new Image();

   // set image list

   layoutimage = new Array();

   layoutimage[0]="../img/ajax-loader.gif"

   layoutimage[1]="../img/arrow_right.gif"

   layoutimage[2]="../img/arrow_right_green.gif"

   layoutimage[3]="../img/frame.gif"

   layoutimage[4]="../img/arrow_left.gif"

   layoutimage[5]="../img/arrow_left_red.gif"

   // start preloading

   for(i=0; i<=5; i++) {

      imageObj.src = layoutimage[i];

   }

   // Run initSlideShow(); after 0.5 seconds. This should give the browser some time to preload the layout images

   setTimeout("initSlideShow()",500);

}



/* slideshow */

function slideshow() {

image[1] = new Image();

image[1].src = "pics/pic001.jpg";

image[1].txt = "Text";

image[2] = new Image();
image[2].src = "pics/pic002.jpg";
image[2].txt = "Text";
}



/* loads first image, first text, sets image-counter to one */

function initSlideShow() {

  slideshow(image[index]);

  document.getElementById("img_container").getElementsByTagName('IMG')[0].src = image[index].src;

  document.getElementById("text_container").innerHTML = image[index].txt;

  document.getElementById("counter").innerHTML = index+" / "+count;

  loadCheckSlide();

}



/* button next image */   

function next() {

  document.getElementById("loadoverlay").style.visibility = "visible";

  index++;

  slideshow(image[index]);

  document.getElementById("img_container").getElementsByTagName('IMG')[0].src = image[index].src;

  document.getElementById("text_container").innerHTML = image[index].txt;

  document.getElementById("counter").innerHTML = index+" / "+count;

  document.getElementById("navi_previous").style.visibility = "visible";

  if (index == count) {

     document.getElementById("navi_next").style.visibility = "hidden";

  }

  loadCheckSlide();

}



/* button previous image */ 

function previous() {

   document.getElementById("loadoverlay").style.visibility = "visible";

   index --;

   slideshow(image[index]);

   document.getElementById("img_container").getElementsByTagName('IMG')[0].src=image[index].src;

   document.getElementById("text_container").innerHTML = image[index].txt;

   document.getElementById("counter").innerHTML = index+" / "+count;

   document.getElementById("navi_next").style.visibility = "visible";

   if (index == 1) {

      document.getElementById("navi_previous").style.visibility = "hidden";

   }

   loadCheckSlide();

}



/* Load check for slideshow: checks every 0.5 sec if image is loaded. Visual loader disappears if true */

function loadCheckSlide () {

  if (image[index].complete == true) {

     document.getElementById("loadoverlay").style.visibility = "hidden";

  } else {

     setTimeout("loadCheckSlide()",500);

  }

}

Gruß
mtm
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück