Slideshow erzeugen

Html

Erfahrenes Mitglied
Hallo,liebe user. Hab mal wieder ein Problem bzw. ne Frage.
Und zwar habe ich eine seite mit thumbnails. Beim klick auf ein Bild öffnet sich ein Popup mit dem dazugehörigen original Bild. In diesem popup kann ich mir jetzt über "vor" und "zurück" die Bilder ansehen. Jetzt möchte ich allerdings noch gerne eine slideshow-funktion hinzufügen.

Die Steuerung der Bilder im Popup erfolgt mit folgendem code:

Code:
<!--

var i = opener.i;
images = opener.images
i2=images.length-1;

var ball = images.length-1;

function showPages()
{
	document.getElementById('pagediv').innerHTML = i+"/"+ball;
}


function previmg(val){
if (i > 1) {
if(!val){
i --;
document.img.src = images[i];
}
document.getElementById('previous').disabled=false;
}
if (i == 1)document.getElementById('previous').disabled=true;
if (i < i2)document.getElementById('next').disabled=false;

showPages();

}
function nextimg(val){
if (i < i2) {
if(!val){
i ++;
document.img.src = images[i];
}
document.getElementById('next').disabled=false;
}
if (i > 1)document.getElementById('previous').disabled=false;
if (i == i2)document.getElementById('next').disabled=true;

showPages();

}



window.onload=function(){previmg(1);nextimg(1);

}
//-->

Jetzt muss doch in diesem code noch eine funktion oder so hinzugefügt werden welche die bilder auch automatisch durchlaufen lässt. Und zusätzlich wieder stoppen kann.

Hier ist übrigens noch der code wie das popup erzeugt wird:

Code:
<!--



function OpenGallery(foto)
{  
  

  i = foto
   
 
       
  var Ausgabe = open("", "Bildergalerie", "width=700, height=600, scrollbars=no, resizable=no left=0,top=20");
  var gallery = Ausgabe.document;

  var Inhalt =
    "<html> "
   +"<head> "
   +"<script type=\"text/javascript\" src=\"../../../../javascript/bildershow/bildershow.js\"></script> "
  +"<link href=\"../../../../css/text.css\" rel=\"stylesheet\" type=\"text/css\">"
   +"</head> "
   +"<body bgcolor=\"#FFFFFF\" topmargin=\"5\" leftmargin=\"0\" "
   +"marginwidth=\"5\" marginheight=\"5\" > "
   +"<table width=\"100%\" height=\"80%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" >"

   +"<tr height=\"480\" align=\"center\" valign=\"middle\"> "
   +"<td width=\"100%\" colspan=\"5\" align=\"center\" > "
   +"<img src="+images[i]+" name=\"img\" align=\"center\" > "
   +"</td> "
   +"</tr> "
   +"<tr height=\"40\" valign=\"middle\" align=\"center\"> "
   +"<td width=\"100%\" align=\"center\" colspan=\"5\"> "
   +"<div id=\"pagediv\" class=\"seitenindex\" >"
   +"</div>"
   
   
   +"</td>"
   +"</tr>"
   
   
   +"<tr height=\"30\" valign=\"bottom\" align=\"center\"> "
   +"<td width=\"50\" align=\"center\"> "
   +"</td> "

   +"<td width=\"200\" align=\"center\"> "
   +"<input id=\"previous\" onclick=\"previmg();\" type=\"button\" value=\"< Vorheriges\"> "
   +"</td> "
   +"<td width=\"200\" align=\"center\"> "
   +"<input id=\"close\" onclick=\"window.close();\" type=\"button\" value=\"Fenster schließen\"> "
   +"</td> "
   +"</td> "
   +"<td width=\"200\" align=\"center\"> "
   +"<input id=\"next\" onclick=\"nextimg();\" type=\"button\" value=\"Nächstes >\"> "
 
 
   
   +"</td> "
   +"<td width=\"50\" align=\"center\"> "


+   "</td> "



   +"</tr> "
   +"</table> "
   +"</body> "
   +"</html>";

  gallery.open();
  gallery.write(Inhalt);
  gallery.close();

     
}

//-->

Aber da müssen ja denke ich nachher nur die Buttons zum starten und stoppen eingefügt werden. Die Steuerung erfolgt ja mit dem ersten code.

Also, ich hoffe mir kann da jemand weiterhelfen. Wäre sehr dankbar.

Gruß Olli
 
im Grunde genommen musst du nur in Zeitabständen deiner Wahl per setTimeout() i hochzählen und dann nextimg() mit i als Parameter aufrufen.
 
Hey klasse das die Fragen hier so schnell beantwortet werden. Sorry aber hab wirklich null ahnung von Javascript. Wie muss den der code aussehen damit ich die slideshow mit nem button starten kann und die bilder dann nach einer gewissen zeit weiterlaufen und die show auch wieder mit nem button stoppen kann.

Vielen Dank schonmal, Olli
 

Neue Beiträge

Zurück