wechselndes Hintergrundbild für den Seitenkopf

[Therese_mit_Joomla]

Hallo mal wieder ;-)
Danke Jungs! Bin dank eurer Hilfe schon sehr viel weiter gekommen! Danke!
Das Bild ist nun richtig positioniert und wechselt zufällig. Alles schön!

Nun aber noch ein (sicher nur sehr kleines) Problem - wenn man sich denn auskennen würde. Dabei geht es eher darum, dass der Seitenquelltext relativ sauber bleiben soll.
Also wie schon erwähnt, habe ich das ganze ja mit diesem Skript hier gemacht (nur angepasst): http://davidwalsh.name/mootools-slideshow

window.addEvent('domready',function() {  
  /* settings */  
  var showDuration = 3000;  
  var container = $('slideshow-container');  
  var images = container.getElements('img');  
  var currentIndex = 0;  
  var interval;  
  /* opacity and fade */  
  images.each(function(img,i){  
    if(i > 0) {  
      img.set('opacity',0);  
    }  
  });  
  /* worker */  
  var show = function() {  
    images[currentIndex].fade('out');  
    images[currentIndex = currentIndex < images.length - 1 ? currentIndex+1 : 0].fade('in');  
  };  
  /* start once the page is finished loading */  
  window.addEvent('load',function(){  
    interval = show.periodical(showDuration);  
  });  
});

Nun ist das aber dafür gedacht, dass man Bilder, die alle im selben Div liegen "sliden" lässt. Das hat nun aber zur Konsequenz, dass ich theoretisch meine 30 Pfade zu den 30 Bildern in den entsprechenden DIV legen muss:
Also in etwa:

....  
<div id="all">  
         	<div id="header">  
<div id="slideshow-container">  
 <img src="../images/headbackimg/bild01.jpg" alt="TEXT" />  
 <img src="../images/headbackimg/bild01.jpg" alt="TEXT" />  
 <img src="../images/headbackimg/bild01.jpg" alt="TEXT" />  
</div>  
....

Und bei 30 Bildern bläht das den Quelltext um eben dreißig Zeilen unnötig auf.
Deswegen wäre es mmN viiiiieeell eleganter, wenn die Bilder nicht aus dem DIV, sondern direkt aus dem Ordner rausgefischt werden.
Also nicht falsch verstehen, die Lösung darf durchaus sehr einfach sein, ich brauche kein extremst ausgefeiltes Tool, das Dateierweiterungen erkennt und nur bestimmte Bilder ausliest. Die 30 Hintergrundbilder für den Wechsel im Headbereich liegen sauber und allein in einem einzelnen Ordner. Wenn die Angaben zu den dreißig Dateien einzeln in der Javascriptdatei stehen, hätte ich damit kein Problem. Nur der HTML-Code soll eben nicht zuuuuuuuuuuu unübersichtlich werden.

Nun habe ich schon ein wenig herumexperimentiert - aber ich versteh die Javascript-Angaben einfach nicht. In den Bereich var container = $ (...) die Pfadangaben zu den Bildern zu legen geht jedenfalls schonmal nicht *hihi* wäre wohl zu einfach gedacht von mir.
Was macht in dem oben genannten Script was? Und was muss ich demzufolge ändern, damit ich ohne den Umweg über die "img src"s in dem div "slidesho-container" die Bilder angezeigt bekomme?

Danke schonmal für eure Geduld mit mir!

LG
Therese

Hallo,

Da musst du dich wohl bei MooTools kundig machen. Dein Fader jedenfalls ist damit gebaut worden.

Habe mal kurz recherchiert: Welches Bild jeweils angezeigt wird, steht in

var show = function() {

images[currentIndex].fade('out');
    images[currentIndex = currentIndex < images.length - 1 ? currentIndex+1 : 0].fade('in');
  };

> images ist das Array mit den Bildern und currentIndex ist die Bildnummer. Die wird in der 2.Zeile zum Anzeigen des nächsten Bilds immer eins hochgezählt mit `currentIndex+1`{:.language-javascript} oder, wenn das Ende des Arrays erreicht ist, auf 0 gesetzt, so dass die Show wieder von vorn beginnt.  
>   
> Diese 2. Zeile musst du also ändern, damit currentIndex nicht einfach hochgezählt wird, sondern eine zufällige Nummer zugewiesen bekommt.  
> Eine zufällige Zahl bekommt man in MooTools mit `[link:http://mootools.net/docs/core125/core#random@title=$random(min, max)]`{:.language-javascript\} wobei min und max die kleinste bzw. gößte Zahl ist, die man haben will.  
> Deine kleinste Bildnummer ist 0 (Array Indizes fangen bei 0 an) und die größte ist `images.length-1`{:.language-javascript}, also bei vier Bildern z.B. Bild 0 bis 3.  
>   
> Die 2. Zeile muss demnach so aussehen:  
>   
>     ~~~javascript

images[currentIndex = $random(0, images.length - 1)].fade('in');  

> 

Das sollte funktionieren (hab's nicht getestet). Allerdings kann es natürlich vorkommen, dass der Zufall mehrfach hintereinander dasselbe Bild aussucht. Wenn es insgesamt nur wenige Bilder sind, kommt das auch öfter vor.

Willst du das verhindern, dann musst du halt vor der Neuzuweisung an currentIndex in einer Schleife den Zufall solange aussuchen lassen, bis er eine andere Nummer gefunden hat. Das überlasse ich mal dir. Ist ja hier *SELF*HTML :)

Gruß, Don P