✔ Bilder Zeitgesteuert laden?

Klopfer · 28. Oktober 2006

Hi zusammen,

ich brauche eine kleine Hilfe von euch.
Ich muss ein Ordner alle bilder auslesen und dann alle 5 oder 10 Sekunden automatisch das alte bild durch das neue ersetzen. Die Seite darf sich dabei nicht neu Laden und die Bilder sind alle gleichgroß.

Wie ich den Ordner auslese (wieviel + welche bilder da drin sind), ist für mich kein Problem, aber nur wie funktioniert das Dynamische anzeigen nun?
Von JS hab ich keine Ahnung, aber habs irgendwie im Gefühl dass es damit gehen müsste.

Sollte ich falsch liegen dann helft mir bitte trotzdem.

Danke
Fabi

Biergamasda · 28. Oktober 2006

Hätt gleich mal ne Frage dazu, und zwar - bleiben die Dateinamen gleich oder ändern sich diese? Wenn sie gleich bleiben würd ich es wie folgt lösen. (Könnte sein dass der Cache des Browsers Probleme macht, bin mir aber nicht sicher)

Hmm, Ich weis nicht ob man mit JS ein Bild direkt neu laden kann, du könntest jedoch versuchen, das Ganze in nen Iframe oder Frame zu packen und nur den Frame/Iframe neu zu laden. Demnach würde die Seite bestehen bleiben und das Bild aktualisiert.

Wennn unbedingt nötig, könntest ja auch für jedes bild nen eigenen iframe machen, obwohl, alle in einem is irgendwie klüger :d

lg

Klopfer · 28. Oktober 2006

Ja an ein IFrame hatte ich auch schon gedacht, aber da wäre die Lösung ja zu einfach und zu simpel ^^
Ich hab das schonmal gesehen, gehen tut das auf jeden Fall ohne IFrame. Vll auch in Flash, wenn man da mit ActionScript das Verzeichniss ausliest und alle x Sekunden das Bild in den Film lädt...

Mir fehlt zu dieser Sache einfach des Coders Know How, Im Forum und Google hatte ich mich auch schon zutode gesucht.

Die Bilder werde ich aufsteigend 1,2,3,4,5... nennen.

Fabi

Samuel · 28. Oktober 2006

PHP:

<?php

	// Erstmal die Bilder aus dem Ordner auslesen
	$folder = './pfad/zum/ordner/';
	$dir = opendir($folder);
	while($file = readdir($dir)) {
		if(preg_match('/\.(jpg|jpeg|gif|giff|png|pneg)/', $file))
			$images[] = $file;
	}
	
	// Dann das JavaScript erstellen
	$array_str = implode('\', \'', $images);
	echo "<script type=\"text/javascript\">\r\n";
	echo "var images = new Array('".$array_str."');\r\n";
	echo "function changeImage(imgID) {\r\n";
	echo "\timgID++;\r\n";
	echo "\tdocument.getElementById('id_deines_img_elementes').src = '".$folder."' + images[imgID]';\r\n";
	echo "\tsetTimeout(\"changeImage(imgID);\", 5000);\r\n";
	echo "}\r\n";
	echo "</script>\r\n";
	
	// Die Funktion kannst du dann mit dem Eventhandler onload starten.
	// zB: <body onload="changeImage(0);">
	
	// Du musst dem IMG-Tag auch die ID zuweisen die du in dem JS verwendest das du von PHP erstellen lässt.
	// zB: <img src="..." id="id_deines_img_elementes" />	
	
?>

eventuell hilft dir das weiter... code wurde nicht geprüft. sollte aber funktionieren.
ansonsten gib laut ;-)

schöne Grüße
Samuel

Klopfer · 29. Oktober 2006

Hi Samuel,

danke für deine schnelle Hilfe,
Bei mir scheint das irgendwie nicht zu funktionieren. Ich poste dir mal meinen Code, vll hab ich ja was falsch gemacht beim anpassen.

PHP:

<?php
echo"

<style type=\"text/css\">
<!--
.Stil1 {
	font-size: 18px;
	font-weight: bold;
}
.Stil2 {
	font-size: 14px;
	font-weight: bold;
}
-->
</style>

//Hier stand in deinem Script "changeImage(0)";

<body onload=\"changeImage(imgID);\">
";


$dbverbindung = mysql_connect ($host, $user, $password);
$dbanfrage = "SELECT * FROM gebrauchtmarkt WHERE id = '$id'";
$result = mysql_db_query ($dbname, $dbanfrage, $dbverbindung);
 while ($ausgabe = mysql_fetch_array ($result))
 {


    // Erstmal die Bilder aus dem Ordner auslesen
    $folder = $ausgabe[url];
    $dir = opendir($folder);
    while($file = readdir($dir)) {
        if(preg_match('/\.(jpg|jpeg|gif|giff|png|pneg)/', $file))
            $images[] = $file;
    }
    echo $images[0];


    // Dann das JavaScript erstellen
    $array_str = implode('\', \'', $images);
    echo "<script type=\"text/javascript\">\r\n";
    echo "var images = new Array('".$array_str."');\r\n";
    echo "function changeImage(imgID) {\r\n";
    echo "\timgID++;\r\n";
    echo "\tdocument.getElementById('bilder').src = '".$folder."' + images[imgID]';\r\n";
    echo "\tsetTimeout(\"changeImage(imgID);\", 5000);\r\n";
    echo "}\r\n";
    echo "</script>\r\n";

    
    // Die Funktion kannst du dann mit dem Eventhandler onload starten.
    // zB: <body onload="changeImage(0);">
    
    // Du musst dem IMG-Tag auch die ID zuweisen die du in dem JS verwendest das du von PHP erstellen lässt.
    // zB: <img src="..." id="id_deines_img_elementes" />    



echo"
<table border=0 width=750 cellspacing=0 cellpadding=0>
<tr>
<td align=left valign=top>
	<table border=0 cellspacing=0 cellpadding=0 width=350>
	<tr>
	<td align=left valign=top><p class=\"Stil1\">$ausgabe[bootsname]</p></td>
	</tr>
	<tr>
	<td>&nbsp;</td>
	</tr>
	<tr>

//Hier wie beschrieben die ID auch benennen wie oben

	<td align=left valign=top><img src=\"$ausgabe[url]$ausgabe[thumbnail]\" id=\"bilder\"></td>
	</tr>
	<tr>
	<td>&nbsp;</td>
.
.
.
.
.
<td width=20>&nbsp;</td>
<td align=left valign=top>&nbsp;</td>
<td width=20>&nbsp;</td>
<td align=left valign=top>&nbsp;</td>";
 }
mysql_close ($dbverbindung);

echo"</tr>
</table>";
?>

Klopfer · 29. Oktober 2006

So hab es doch noch geschafft
Die Lösungshilfe poste ich doch falls jemand mal fragt wie das geht

PHP:

<?php

$dbverbindung = mysql_connect ($host, $user, $password);
$dbanfrage = "SELECT * FROM datenbank WHERE id = '$kriterium";
$result = mysql_db_query ($dbname, $dbanfrage, $dbverbindung);
 while ($ausgabe = mysql_fetch_array ($result))
 {

echo"<script language=\"JavaScript\">
<!--
";

// Die Bilder aus dem Ordner auslesen und die Anzahl der im Ordnerbefindlichen Bilder ermitteln
$anz_dateien = "0";
$folder = $ausgabe[url];
$dir = opendir($folder);
while($file = readdir($dir)) {
if(preg_match('/\.(jpg|jpeg|gif|giff|png|pneg)/', $file))
$images[] = $file;

//Die Dateien ".", ".." und "Thumbs.db" überspringen
	if($file == "."){
	}else{
	 if($file == ".."){
	 }else{
	  if($file == "Thumbs.db"){
	  }else{
	  
//Code für die Bilder schreiben lassen die nachher abgespielt werden
if($anz_dateien=="0"){
echo"
var Bilder = new Array(\"".$folder."".$file."\"";
}else{
echo",\"".$folder."".$file."\"";
}
$anz_dateien = $anz_dateien+1;
}
}
}
}

echo");
var Delay = 5000;
";

 
//Glaub der Part ist überflüssig ^^ hatte nur kein nerv mehr das zu probieren obs auch ohne Fehlerfrei geht
$array_str = implode(':', $images);
$pics = explode(':', $array_str, -1);

echo"var BildAnzahl = Bilder.length;
var number = 0;
BildFolge = new Image();
BildFolge.src = Bilder[number];

function change() {

number++;
if (number == BildAnzahl) number = 0;

BildFolge.src = Bilder[number];
document.austausch.src = BildFolge.src;
}

setInterval(\"change()\", Delay);

//-->
</script>";

//Kein <Body onload=.....> verwenden

//das bild wird wie folgt eingebunden damit sich die Bilder auch ändern

<img src=\"bild.jpg\" name=\"austausch\>";
?>

Samuel · 29. Oktober 2006

Wieso einfach wenns auch kompliziert geht?! ;-)

*winken*
Samuel

✔ Bilder Zeitgesteuert laden?

Klopfer

Mitglied

Biergamasda

Erfahrenes Mitglied

Klopfer

Mitglied

Samuel

Erfahrenes Mitglied

Klopfer

Mitglied

Klopfer

Mitglied

Samuel

Erfahrenes Mitglied

Neue Beiträge