✔ Wie Daumenkino realisieren?

schutzgeist

schutzgeist

Erfahrenes Mitglied
Hallo, ich suche nach einer Möglichkeit eine Art Daumenkino so einfach wie möglich zu realiseren. Ist dies mit JS möglich? Ausweichmöglichkeit kann auch Flash sein...

Ausgangssituation:
Eine Kamera fährt jeden Tag 3 verschiedene Positionen ab und nimmt dort im 10min Takt Bilder auf. Diese Bilder werden dann per FTP hochgeladen.
Also gibt es pro Position und Tag 144 Bilder.
Ist der Intervall vorbei, werden die Bilder mit aktuelleren auf dem FTP überschrieben.

Nun möchte ich die Bilder gern in eine Art Daumenkino packen, damit auf einen Blick gesehen werden kann, ob sich an der Position tagsüber etwas geändert hat.

Ich hab zwar schon gegooglet, aber nur Online-Galerien oder Software gefunden, die 40 Bilder packt.
Da sich das ganze aber selbst aktualisieren soll, bin ich momentan etwas ratlos.

Danke schonmal im Voraus :)
 
Hi

Daumenkino, naja. -> Wie wär es wenn du einfach nur alle paar millisec den Source eines Bildes änderst.

Also:
Code: 
var i = 0;
var bilder = new Array();
function changeSrc(){
    document.getElementById('bild').src = bilder[i];
    i++;
}
function getPics(){
    //per Ajax die Bilder Urls holen
    //diese sind dann durch ein ; getrennt und hast du dann per response.split(";")
    bilder = response.split(";"); 
    startShow();
}
function startShow(){
    changeSrc();
    setTimeout("startShow()", 50);
}
<body onload="getPics">
So in der art und Bilder aus einem Ordner mit php zu holen ist auch kein prob, den Code kann ich dir auf Anfragen auch geben.

MfG
 
C3000 hat gesagt.:
Wie wär es wenn du einfach nur alle paar millisec den Source eines Bildes änderst.
Zum Vergrößern anklicken....

Genau so in der Art hatte ich mir das gedacht :)

Leider hab ich von Ajax absolut keine Ahnung.
Muss der Webserver dazu noch irgendwelche besonderen Anforderungen erfüllen?

Die Bilder holen würde ich wohl mit einer Schleife noch hinbekommen.

Edit: Das mit dem holen wird wohl doch nicht so einfach. War bei dem Teil vom Satz gedanklich noch/schon bei nem anderen Schritt von dem Projekt..
 
Zuletzt bearbeitet:
Hi,

also ich habe das Framework Scriptaculous aber es geht auch ohne:
Code: 
var http = null;
function getPics(){
	if (window.XMLHttpRequest) {
	   http = new XMLHttpRequest();
	} else if (window.ActiveXObject) {
	   http = new ActiveXObject("Microsoft.XMLHTTP");
	}
	if (http != null) {
	   http.open("GET", "pics.php", true);
	   http.onreadystatechange = ausgeben;
	   http.send(null);
	}
}

function ausgeben() {
   if (http.readyState == 4) {
      bilder = http.responseText.split(";");
      startShow();
   }
}
Hab den Code allerdings nicht ausprobiert. Musst mal schauen ob es so geht.
Zudem hab ich den Code von: http://www.galileocomputing.de/openbook/javascript_ajax/18_ajax_002.htm#Xxx999438

und dann noch der php- Code:
Code: 
<?
	function getPicturesOutOfDir( $dir, $pictypes ) {
	    $arr = array();
	    $handle = opendir ($dir);
	    while ($file = readdir ($handle)) {
	        if ( ( $file != "." ) && ( $file != ".." ) ) {
	                if ( in_array( strtolower( substr( $file, ( strrpos( $file, "." ) + 1 ), strlen( $file ) ) ), $pictypes ) ) {
	                    $arr[] = $file;
	                }
	            }
	    }
	    closedir($handle);

	    return $arr;
	}

	$pictypes = array( 'gif' );
	$dir = '../images/';

	$pictures = getPicturesOutOfDir( $dir, $pictypes );

	for( $i = 0; $i < count( $pictures ); $i++ ){
	    echo $pictures[ $i ].';';
	}
?>
Sollte so ungefähr funktionieren.

MfG
 
Vielen Dank für deine Hilfe :)
Leider scheitere ich schon daran, das ganze einzubauen :suspekt:

PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
var http = null;
function getPics(){
	if (window.XMLHttpRequest) {
	   http = new XMLHttpRequest();
	} else if (window.ActiveXObject) {
	   http = new ActiveXObject("Microsoft.XMLHTTP");
	}
	if (http != null) {
	   http.open("GET", "pics.php", true);
	   http.onreadystatechange = ausgeben;
	   http.send(null);
	}
}

function ausgeben() {
   if (http.readyState == 4) {
      bilder = http.responseText.split(";");
      startShow();
   }
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
</head>

<body>
<?php

	function getPicturesOutOfDir( $dir, $pictypes ) {
	    $arr = array();
	    $handle = opendir ($dir);
	    while ($file = readdir ($handle)) {
	        if ( ( $file != "." ) && ( $file != ".." ) ) {
	                if ( in_array( strtolower( substr( $file, ( strrpos( $file, "." ) + 1 ), strlen( $file ) ) ), $pictypes ) ) {
	                    $arr[] = $file;
	                }
	            }
	    }
	    closedir($handle);

	    return $arr;
	}

	$pictypes = array( 'gif' );
	$dir = 'images/';

	$pictures = getPicturesOutOfDir( $dir, $pictypes );

	for( $i = 0; $i < count( $pictures ); $i++ ){
	    echo $pictures[ $i ].';';
	}
?>

</body>
</html>

Edit: Fehler gefunden. Wie krieg ich die Bilder nun angezeigt? o.O

EDIT 2:

Bilder bekomme ich nun angezeigt
PHP: 
<?php

	function getPicturesOutOfDir( $dir, $pictypes ) {
	    $arr = array();
	    $handle = opendir ($dir);
	    while ($file = readdir ($handle)) {
	        if ( ( $file != "." ) && ( $file != ".." ) ) {
	                if ( in_array( strtolower( substr( $file, ( strrpos( $file, "." ) + 1 ), strlen( $file ) ) ), $pictypes ) ) {
	                    $arr[] = $file;
	                }
	            }
	    }
	    closedir($handle);

	    return $arr;
	}

	$pictypes = array( 'jpg' );
	$dir = 'images/';

	$pictures = getPicturesOutOfDir( $dir, $pictypes );

	for( $i = 0; $i < count( $pictures ); $i++ ){
	    echo '<img src=' .$dir .'/'. $pictures[ $i ] .'>';
	}
	
?>

Allerdings werden sie alle nebeneinander ausgegeben... Nach "Daumenkino" sieht das ganze bisher aber nicht aus...?!
 
Zuletzt bearbeitet:
Das ist jetzt ein ganz Vereinfachter Code:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
var http = null;
var bilder;
var i = 0;
function getPics(){
    if (window.XMLHttpRequest) {
       http = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
       http = new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (http != null) {
       http.open("GET", "pics.php", true);
       http.onreadystatechange = ausgeben;
       http.send(null);
    }
}

function ausgeben() {
   if (http.readyState == 4) {
      bilder = http.responseText.split(";");
      startShow();
   }
}
function startShow(){
    changeSrc();
    setTimeout("startShow()", 100);
}
function changeSrc(){
    document.getElementById('bild').src = bilder[i];
    if(i == (bilder.length - 2))i = 0;
    else i++;
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
</head>
<body onload="getPics()">
<img id="bild" src="" alt="nichts"/>
</body>
</html>
aber bei mir funktioniert er ;-)
Code: 
<?php

    function getPicturesOutOfDir( $dir, $pictypes ) {
        $arr = array();
        $handle = opendir ($dir);
        while ($file = readdir ($handle)) {
            if ( ( $file != "." ) && ( $file != ".." ) ) {
                    if ( in_array( strtolower( substr( $file, ( strrpos( $file, "." ) + 1 ), strlen( $file ) ) ), $pictypes ) ) {
                        $arr[] = $file;
                    }
                }
        }
        closedir($handle);

        return $arr;
    }

    $pictypes = array( 'jpg' );
    $dir = 'images/';

    $pictures = getPicturesOutOfDir( $dir, $pictypes );

    for( $i = 0; $i < count( $pictures ); $i++ ){
        echo $dir .'/'. $pictures[ $i ].";";
    }

?>

Beide Codes sind umgeändert, beachte das bitte.

Schönes WE
 
Entschuldige ich dachte das wäre klar.

Der php-Code muss in meinem Beispiel eine Datei mit namen "pics.php" sein. Und im selben Ordner liegen wie die HTML Datei.

index.html:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
var http = null;
var bilder;
var i = 0;
function getPics(){
    if (window.XMLHttpRequest) {
       http = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
       http = new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (http != null) {
       http.open("GET", "pics.php", true); // pics.php ist die Datei die aufgerufen wird.
       http.onreadystatechange = ausgeben;
       http.send(null);
    }
}

function ausgeben() {
   if (http.readyState == 4) {
      bilder = http.responseText.split(";");
      startShow();
   }
}
function startShow(){
    changeSrc();
    setTimeout("startShow()", 100);
}
function changeSrc(){
    document.getElementById('bild').src = bilder[i];
    if(i == (bilder.length - 2))i = 0;
    else i++;
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
</head>
<body onload="getPics()">
<img id="bild" src="" alt="nichts"/>
</body>
</html>

und das File:

pics.php
PHP: 
<?php

    function getPicturesOutOfDir( $dir, $pictypes ) {
        $arr = array();
        $handle = opendir ($dir);
        while ($file = readdir ($handle)) {
            if ( ( $file != "." ) && ( $file != ".." ) ) {
                    if ( in_array( strtolower( substr( $file, ( strrpos( $file, "." ) + 1 ), strlen( $file ) ) ), $pictypes ) ) {
                        $arr[] = $file;
                    }
                }
        }
        closedir($handle);

        return $arr;
    }

    $pictypes = array( 'jpg' );
    $dir = 'images/';

    $pictures = getPicturesOutOfDir( $dir, $pictypes );

    for( $i = 0; $i < count( $pictures ); $i++ ){
        echo $dir .'/'. $pictures[ $i ].";";
    }

?>

Am Code hab ich nichts geändert. Hoffe das es nun Funktioniert.
MfG
 
Klasse, es funktioniert. Vielen, vielen Dank :)

Kann ich eigentlich noch die Geschwindigkeit bestimmen, in der die Bilder "abgespielt" werden?
 
In der Funktion:
Code: 
function startShow(){
    changeSrc();
    setTimeout("startShow()", 100);
}
kannst du die 100 durch jeden beliebigen wert ersetzten. Die Zahl steht für die Millisekunden die gewartet werden muss, bevor die Methode davor wieder ausgeführt wird. Also je kleiner desto schneller die Bilderwechsel und je größer desto langsamer.

MfG
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück