HTML / jQuery Slideshow

[Meowsalot]

Guten Morgen,

kennt ihr eine gute HTML5 und oder jQuery Slideshow die folgendes kann:

• Vollbildmodus
• Ständig nachschauen ob es neue Bild im Ordner gibt und diese dann direkt mit abspielen.

Bis bald!
Meowsalot (Bernd)

[J o]

Moin,

• Vollbildmodus

Vollbild ist nur mit einer Nutzereingabe möglich, sprich ein Button der eine Funktion ausführt der das Browserfenster in den Vollbildmodus setzt.

• Ständig nachschauen ob es neue Bild im Ordner gibt und diese dann direkt mit abspielen.

Du kannst doch einfach alle Bilder in einem Ordner laden und deine Slideshow über diese Bilder laufen lassen. So hat man bei jedem neuen Aufruf alle aktuellen Bilder.

Gruß
Jo

[Meowsalot]

Hallo J,

Du kannst doch einfach alle Bilder in einem Ordner laden und deine Slideshow über diese Bilder laufen lassen. So hat man bei jedem neuen Aufruf alle aktuellen Bilder.

das wäre ja kein Problem, ich möchte die Seite aber nicht jedesmal neu laden müssen wenn neue Bilder hochgeladen werden. Das ganze soll über einen Beamer angezeigt werden.

Bis bald!
Meowsalot (Bernd)

[pl]

Hallo

Du kannst doch einfach alle Bilder in einem Ordner laden und deine Slideshow über diese Bilder laufen lassen. So hat man bei jedem neuen Aufruf alle aktuellen Bilder.

das wäre ja kein Problem, ich möchte die Seite aber nicht jedesmal neu laden müssen wenn neue Bilder hochgeladen werden. Das ganze soll über einen Beamer angezeigt werden.

Idee: Solange ein Bild gezeigt wird, wird das nächste vom Server geholt. MfG

[Meowsalot]

Hallo pl,

Idee: Solange ein Bild gezeigt wird, wird das nächste vom Server geholt.

die Idee ist sehr gut, nur mit fehlt gerade den Ansatz wie ich dieses umsetzen könnte.

Bis bald!
Meowsalot (Bernd)

[pl]

Hallo

Idee: Solange ein Bild gezeigt wird, wird das nächste vom Server geholt.

die Idee ist sehr gut, nur mit fehlt gerade den Ansatz wie ich dieses umsetzen könnte.

Ja, die Idee ist deswegen so gut weil der Upload Ordner nicht unbedingt unterhalb DOCUMENT_ROOT liegen muss was die Rechteverwaltung etwas vereinfacht.

Wenn die Show von selbst laufen soll, könntest Du die onLoad Events (Bild im Browser hat ein onload und ajax~callback ist das andere Ereignis) für die Relaxation verwenden. Plus eine konfigurierbare Verweildauer eines Bildes im Browser. MfG

[Meowsalot]

Hallo pl,

ich habe bis jetzt folgendes erledigt

foreach ($alledateien as $datei) {
     
      $dateiinfo = pathinfo($ordner."/".$datei); 
      
      if ($datei != "." && 
          $datei != ".."  && 
          $datei != "_notes" && 
          $bildinfo['basename'] != "Thumbs.db") { 
    
      $bildtypen = array("jpg", "jpeg", "png");
          
      if(in_array($dateiinfo['extension'],$bildtypen)) {
      ?>
      <li><img src="bilder/<?php echo htmlspecialchars($dateiinfo['basename']);?>"></li>
      <?php } $i++; 
      }
} ?>

Jetzt bleibt die Frage, wie kann ich per jQuery jedes Bild der Reihe nach Abrufen? Ich denke das wäre wirklich die beste Lösung. Ich rechne dass im laufe des Events so ca. 300 - 800 Bilder im Ordner sind.

Bis bald!
Meowsalot (Bernd)

[pl]

Die Bilder müssen numerisch durchnumeriert sein damit sie sortiert werden können. Untenstehend ein bischen Code wie ich das mal gemacht habe:

<p style="text-align:center">
<img onerror="weiter(true)" src="/korfu/1.jpeg" alt="dia" id="dia" onLoad="window.setTimeout('weiter()',3000)">
</p>

</script>
function weiter(cpp){
    if( this.number == null) { this.number = 1 }
    var dia = document.getElementById('dia');

    number++;
    if(number > %max%) { number = 1 }

    if(cpp != null) number++;

    dia.src = '/%place%/'+number+'.jpeg';
    dia.alt = '/%place%/'+number+'.jpeg';
}
</script>

Serverseitig 

Mit rewrite werden .jpeg auf das Script umgeschossen


print eval{
    $ENV{REDIRECT_URL} =~ /^\/(\w+)\/(\d+)\.jpeg$/;
    
    die "Kein Verzeichnis im Request\n" unless $1;
    die "Dateiname nicht numerisch\n" unless $2;

    chdir $ENV{DOCUMENT_ROOT}."/".$1 or die "Verzeichnis $1 gibt es nicht\n"; 
    my @files = <*.*> or die "Keine Dateien im Verzeichnis\n";
    @files = sort @files;
    my $max = scalar @files;

    my $file = $files[$2 - 1];
    my $fh = IO::File->new;
    $fh->open($file, O_BINARY|O_RDONLY) or die "$!\n";
    read($fh, my $bin, -s $fh);
    my $lastmod = http_date({}, (stat($fh))[9]);
    $fh->close;

    "Last-Modified: $lastmod\nContent-Type: image/jpeg\n\n".$bin;
} || do{
    "Status: 502\nContent-Type: text/plain\n\n $@";
};

Nur so als Idee...

[beatovich]

hallo

print eval{ $ENV{REDIRECT_URL} =~ /^/(\w+)/(\d+).jpeg$/;

really? hotti du bist doch sonst immer so auf draht.

[pl]

hallo

print eval{ $ENV{REDIRECT_URL} =~ /^/(\w+)/(\d+).jpeg$/;

really? hotti du bist doch sonst immer so auf draht.

Ja sicher doch. Du verstehst wohl eval nicht!? Ok, ich erklärs Dir: Es macht dasselbe wie try/catch in diesem Kontext. D.h., beim Zugriff aufs Dateisystem muss damit gerechnet werden, daß dieser fehlschlägt. Dem catch() entspricht untenstehender Code:

} || do{
    "Status: 502\nContent-Type: text/plain\n\n $@";
};

# Fehlerursache in $@

MfG

[beatovich]

hallo

hallo

print eval{ $ENV{REDIRECT_URL} =~ /^/(\w+)/(\d+).jpeg$/;

really? hotti du bist doch sonst immer so auf draht.

Ja sicher doch. Du verstehst wohl eval nicht!? Ok, ich erklärs Dir: Es macht dasselbe wie try/catch in diesem Kontext. D.h., beim Zugriff aufs Dateisystem muss damit gerechnet werden, daß dieser fehlschlägt. Dem catch() entspricht untenstehender Code:

} || do{
    "Status: 502\nContent-Type: text/plain\n\n $@";
};

# Fehlerursache in $@

Du erlaubst also partielles Scannen des directories ausserhalb von http-root? Das kann ich gar nicht in Einklang bringen mit deiner Entrüstung in unserer letzten Perl Kontroverse.

[pl]

hallo

Du erlaubst also partielles Scannen des directories ausserhalb von http-root? Das kann ich gar nicht in Einklang bringen mit deiner Entrüstung in unserer letzten Perl Kontroverse.

Bitte sei sogut und erkläre hier worum es Dir geht. Ansonsten kann ich das nicht nachvollziehen.

Btw: chdir $ENV{DOCUMENT_ROOT}."/".$1 or die "Verzeichnis $1 gibt es nicht\n";

ist also mitnichten außerhalb der DOCUMENT_ROOT.

MfG

[beatovich]

hallo

Du erlaubst also partielles Scannen des directories ausserhalb von http-root? Das kann ich gar nicht in Einklang bringen mit deiner Entrüstung in unserer letzten Perl Kontroverse.

Bitte sei sogut und erkläre hier worum es Dir geht. Ansonsten kann ich das nicht nachvollziehen.

ne root gibst du ja an, aber

$ENV{REDIRECT_URL} =~ /^\/(\w+)\/(\d+)\.jpeg$/;
  ....    
  chdir $ENV{DOCUMENT_ROOT}."/".$1

Das wird dann also zu ROOT . "//some-w-chars.jpeg"

Dann

my @files = <*.*> or die "Keine Dateien im Verzeichnis\n";
@files = sort @files;
my $max = scalar @files;

my $file = $files[$2 - 1];

Hier vertraust du darauf, dass sich im ordner nur jpeg Files befinden. Das musst du aber garantieren, bevor du dateien in @files übernimmst.

Gerade bei Bilderorndern gilt: Einmal den Ordner mit dem Dateimanager betrachtet, schon hast du eine zusätzliche Datei drinnen.

Also auch wenn meine ursprüngliche Bedenken irrelevant sind, bitte nachbessern.

[beatovich]

hallo

ne root gibst du ja an, aber

$ENV{REDIRECT_URL} =~ /^\/(\w+)\/(\d+)\.jpeg$/;
  ....    
  chdir $ENV{DOCUMENT_ROOT}."/".$1

wenn schon: use cwd;

[pl]

hallo

ne root gibst du ja an, aber

$ENV{REDIRECT_URL} =~ /^\/(\w+)\/(\d+)\.jpeg$/;
  ....    
  chdir $ENV{DOCUMENT_ROOT}."/".$1

wenn schon: use cwd;

Nein, wenn schon dann use Cwd; also C großgeschrieben. Und dann auch nur, wenn man die current working directory namentlich ermitteln muss. Was in meinem Script nicht der Fall ist, denn da ist sie vorgegeben.

MfG

[pl]

hallo

Du erlaubst also partielles Scannen des directories ausserhalb von http-root? Das kann ich gar nicht in Einklang bringen mit deiner Entrüstung in unserer letzten Perl Kontroverse.

Bitte sei sogut und erkläre hier worum es Dir geht. Ansonsten kann ich das nicht nachvollziehen.

ne root gibst du ja an, aber

$ENV{REDIRECT_URL} =~ /^\/(\w+)\/(\d+)\.jpeg$/;
  ....    
  chdir $ENV{DOCUMENT_ROOT}."/".$1

Das wird dann also zu ROOT . "//some-w-chars.jpeg"

Nein wirds nicht. \w umfasst nur Buchstaben, Ziffern und den Unterstrich. Außerdem muss \d+ matchen.

Hier vertraust du darauf, dass sich im ordner nur jpeg Files befinden. Das musst du aber garantieren, bevor du dateien in @files übernimmst.

Das Event <img onError="weiter(true)"> würde solche Fälle abfangen. Also wenn die Datei kein jpeg ist, wird einfach weiter gezählt.

Und wie bereits eingangs festgestellt: Das Script soll nur die Idee beschreiben. Es steht jedem frei es besser zu machen.

MfG

PS: Rewrite und Script sind noch aktiv: http://rolfrost.de/astro/1.jpeg bis 155.jpeg

[pl]

Hier eine Demo. Mit goßen Bildern im Vollbildmodus (F11) ieht das richtig gut aus 😉

[Meowsalot]

Hallo pl,

wow, das ist genau das, was ich suche 😉

Bis bald!
Meowsalot (Bernd)

[pl]

Hi

wow, das ist genau das, was ich suche 😉

Wow freut mich! Also das Perlscript ist auch nicht weiter dramatisch. Die Dateinamen können beliebig sein (gif, jpeg, jpg, png, egal... ) und es ist auch möglich, während der Vorführung weitere Bilder hochzuladen. Die Vorführung läuft endlos.

.htaccess

RewriteRule \.jpeg$ /cgi-bin/img.cgi [L]

Und auch hier bist Du variabel mit der Dateierweiterung. Die kann auch .zitrone heißen hauptsache es kommt eine Grafik hinterher und es gibt eine Übereinstimmung mit dem src=Attr.

MfG

[Meowsalot]

Hallo pl,

achso, das ganze baut auf Perl auf, damit kann ich leider nicht dienen. Hab nur PHP zur Verfügung. Schade.

Bis bald!
Meowsalot (Bernd)

[pl]

Hallo

achso, das ganze baut auf Perl auf, damit kann ich leider nicht dienen. Hab nur PHP zur Verfügung. Schade.

Du kannst es auch mit PHP umsetzen.

MfG

[Meowsalot]

Hallo pl,

ich habe mir deinen Code mal etwas angeschaut und ich denke um diesen Teil geht es? Ich hoffe es ist OK, dass ich diesen hier veröffentliche?

<img onerror="weiter('error')" src="/diaslider.html?img=1" 
                               alt="dia" 
                               id="dia" 
                               onLoad="window.setTimeout('weiter()',3000)">
</p>

function weiter(error){

    if( this.number == null) { this.number = 1 }
    var dia = document.getElementById('dia');

    this.number++;

    if(this.number > "32"){ this.number = 1 }
    if(error){
        this.number = 1;
    }


    dia.src = '/diaslider.html?img='+this.number;
    dia.alt = this.number+'.jpeg';
}

Auch hier gehst du davon aus, dass ich durchnummerierte Bilder habe? Dieses habe ich leider wie vorhin in deinem zweiten Posting bereits erwähnt leider nicht. Gibt es denn für mich sonst noch eine andere Möglichkeit?

Bis bald!
Meowsalot (Bernd)

[JürgenB]

Hallo,

Auch hier gehst du davon aus, dass ich durchnummerierte Bilder habe? Dieses habe ich leider wie vorhin in deinem zweiten Posting bereits erwähnt leider nicht. Gibt es denn für mich sonst noch eine andere Möglichkeit?

hast du meine andere Antwort gelesen?

Gruß
Jürgen

[beatovich]

hallo

Auch hier gehst du davon aus, dass ich durchnummerierte Bilder habe? Dieses habe ich leider wie vorhin in deinem zweiten Posting bereits erwähnt leider nicht. Gibt es denn für mich sonst noch eine andere Möglichkeit?

Im Fussbereich gibt es https://secure.php.net/manual/de/function.filectime.php ein Beispiel für das sortierte Ausgeben von Dateinamen nach Datum

Achtung, das Beipiel ist 8 Jahre alt! Und auf windows muss man eventuell fileatime() statt filectime() verwenden.

Wenn du Buch führst, wann die letzte Prüfung vorlag, kannst du nur die neueren passieren und ausgeben lassen.

[pl]

hi,

noch eine andere Lösung, JavaScript pure. Ist aber nicht ganz so komfortabel, weil die Bilder lückenlos durchnumeriert sein müssen.

MfG

[Meowsalot]

Hallo pl,

noch eine andere Lösung, JavaScript pure. Ist aber nicht ganz so komfortabel, weil die Bilder lückenlos durchnumeriert sein müssen.

darauf habe ich leider kein Einfluss, da die Bilder von einem Externen System auf den FTP Server gespielt werden. Die Dateien sehen später folgendermaßen aus

blau_2018-04-16_17-20-04.jpg, blau_2018-04-16_17-20-25.jpg, blau_2018-04-16_18-05-52.jpg usw..

Bis bald!
Meowsalot (Bernd)

[pl]

hi

noch eine andere Lösung, JavaScript pure. Ist aber nicht ganz so komfortabel, weil die Bilder lückenlos durchnumeriert sein müssen.

darauf habe ich leider kein Einfluss, da die Bilder von einem Externen System auf den FTP Server gespielt werden. Die Dateien sehen später folgendermaßen aus

blau_2018-04-16_17-20-04.jpg, blau_2018-04-16_17-20-25.jpg, blau_2018-04-16_18-05-52.jpg usw..

Die Liste mit den Dateinamen könntest Du auch über PHP direkt ins JavaScript einbauen beim ersten Laden der Seite. Oder per Ajax abholen. Es gibt viele Möglichkeiten 😉

Good Luck.

[Meowsalot]

Hallo pl,

bringt mir aber leider alles nicht wenn ich nicht mal weiß wo ich Anfangen muss.

Bis bald!
Meowsalot (Bernd)

[pl]

Z.B. mal anfangen mit Parametern zu arbeiten:

files=1 bringt die Dateiliste und img=1 bringt Bild 1 aus dieser Liste

Verwendet wird das dann so:

<p style="text-align:center">
<img onerror="weiter('error')" src="/diaslider.html?img=1" alt="dia" id="dia" onLoad="window.setTimeout('weiter()',3000)">
</p>


<script>
function weiter(error){

    if( this.number == null) { this.number = 1 }
    var dia = document.getElementById('dia');

    this.number++;

    // Anhand der Dateiliste ergibt sich die Anzahl
    if(this.number > "32"){ this.number = 1 }

    if(error){
        this.number = 1;
        // alert('fange wieder von vorne an... ')
    }


    dia.src = '/diaslider.html?img='+this.number;
    dia.alt = this.number+'.jpeg';
}

Also in obenstehendem Beispiel wird nur die Anzahl der Bilder als Platzhalter in die JS Funktion eingebaut, damit das Teil dann schön rund läuft 😉

D.h., für die Auslieferung eines Bildes ist nur Parameter img=123 zuständig. Auf dem Server haben die Bilder den Originaldateinamen aber in JS haben die nur noch Nummern.

Mit dem img~Parameter greift sich der serverseitige Prozess das dem Index entsprechende Bild aus der Liste und liefert die dazugehörige Binary als Content-Type: image/jpeg.

Viel Erfolg.

PS:

# das nach PHP umzusetzen dürfte kein Problem sein

    if(my $nr = $self->param('img')){
        
        my $file = $self->{FILES}->[$nr - 1];
        
        my $fh = IO::File->new;
        $fh->open($file, O_BINARY|O_RDONLY) or die "$!\n";
        read($fh, my $bin, -s $fh);
        my $lastmod = $self->http_date((stat($fh))[9]);
        $fh->close;

        $self->header(
            "Last-Modified" => $lastmod,
            "Content-Type"  => "image/jpeg"
        );
        $self->{CONTENT} = $bin;
}

Und ohne Parameter schließlich baust Du mit PHP die Seite selbst auf.

[Meowsalot]

Hallo pl,

danke für deine Erklärung, aber wie bereits gesagt du arbeitest mit Perl und dieses kann ich nicht und verwirrt mich nur noch mehr.

Bis bald!
Meowsalot (Bernd)

[pl]

Pardong 😉 Verwirren war nicht my Absicht. Aber in PHP ist das auch nicht viel anders; das kann auch alle Dateinamen auf ein Array lesen. Und mit dem Parameter $_GET['img'] wird z.B. Bild #3 aus dem Array gefischt file_get_contents() gemacht und das Image mit dem Header image/jpeg ausgeliefert.

Die Last-Modified Geschichte kannst Du später immer noch einbauen und den entsprechenden Header anhängen.

Für'n Anfang würde ich die PHP Serversachen einfach zunächst mal weglassen und die Dateliste in JS händisch einkopieren, dir /b ist Dein Freund.

Mach mit JS ein Preload mit den Dateinamen, und im onload rennt die Show dann los von Bild zu Bild.

GL

Reise nach Korfu mit aufregenden Luftaufnahmen über der Adria, Dachstein, Schladminger Tauern, Klagenfurt, Split, Kroatische Küste, Dalmatien, Albanien, Balken, Greece, Parga, Paxos...

PS: Meine nächste Idee schickt das Bild direkt zum Browser ohne HTML drumherum. Kann aber noch ein paar Tage dauern.

[pl]

PS: Meine nächste Idee schickt das Bild direkt zum Browser ohne HTML drumherum. Kann aber noch ein paar Tage dauern.

Erster Entwurf Wird noch verbessert 😉

[Meowsalot]

Hallo pl,

Erster Entwurf Wird noch verbessert 😉

im Google Chrome unter Windows 10 möchte deine Seite ein PopUp öffnen, hab dieses auch erlaubt, jetzt geht es immer wieder auf und zu.

Bis bald!
Meowsalot (Bernd)

[pl]

Moin

Erster Entwurf Wird noch verbessert 😉

im Google Chrome unter Windows 10 möchte deine Seite ein PopUp öffnen, hab dieses auch erlaubt, jetzt geht es immer wieder auf und zu.

Du kannst im Browser einstellen, daß es offen bleibt. Die ganze Sache ist nun eine reine Ajaxlösung die es ermöglicht, zur Laufzeit Bilder hinzuzufügen oder zu löschen. Hierzu wird mit jedem Bild die Anzahl der auf dem Server verfügbaren Bilder zusammen mit dem Bild selbst in der Response übertragen.

MfG

[Henry]

Hallo Meowsalot,

wow, das ist genau das, was ich suche 😉

Echt? Komme hier ein wenig durcheinander. Also, automatisches Vollbild ist doch nicht wichtig? Und mich würde der Grundgedanke interessieren, warum es wichtig sein kann, bei einer Diashow ständig nachzuschauen ob während dieser relativ kurzen Zeit noch Bilder hinzu gekommen sind.

Für Fullscreen gibt's diverse Möglichkeiten, erst recht wenn du die Kontrolle über den Browser hast(Stichwort kioskmode).

Was die Bilder betrifft, ich würde die Bilder, sofern mir ein Nutzen für deine Anwendung einfällt, erst gar nicht als Bild durchgeben, sondern als PHP-Datei. Das hat den Vorteil, dass diese Datei einiges mehr könnte als nur das Bild durchzureichen, es kann während des Abspielens sortieren, schauen ob Neue da sind, etc... also <img src="images/picture.php?lastindex=xyz"… Das alles mit einfachen JS und/oder CSS Effekten ausgeben und fertig. Nur so ein Gedanke.

Beispiele/Anregungen zur Ausgabe gibt's auch hier im Wiki, sowohl js als auch CSS.

Gruss
Henry

[Meowsalot]

Hallo Henry,

Echt? Komme hier ein wenig durcheinander. Also, automatisches Vollbild ist doch nicht wichtig?

Nein, das ist nicht mehr wichtig. Da ich den Browser mit F11 in den Vollbildmodus versetzten kann, das reicht mir.

Und mich würde der Grundgedanke interessieren, warum es wichtig sein kann, bei einer Diashow ständig nachzuschauen ob während dieser relativ kurzen Zeit noch Bilder hinzu gekommen sind.

Die Bilder werden über einen Beamer angezeigt. Da ist es langweilig immer die selber zu zeigen. Die User laden Bilder hoch und diese sollen dann über den Beamer gezeigt werden. Deshalb ist es wichtig immer zu schauen ob neue da sind.

Bis bald!
Meowsalot (Bernd)

[Henry]

Hallo Meowsalot,

Nein, das ist nicht mehr wichtig. Da ich den Browser mit F11 in den Vollbildmodus versetzten kann, das reicht mir.

ok.

Die Bilder werden über einen Beamer angezeigt. Da ist es langweilig immer die selber zu zeigen. Die User laden Bilder hoch und diese sollen dann über den Beamer gezeigt werden. Deshalb ist es wichtig immer zu schauen ob neue da sind.

Also während des Betriebs? Das wird aber ne lange DIAshow, kommen alte Kindheitserinnerungen hoch mit unsäglich langen Urlaubsdia-Vorführungen. Alle sagen "wie schön" und denken aber "wann sind die Bilder endlich durch" 😉

Gruss
Henry

[Meowsalot]

Hallo Henry,

Also während des Betriebs? Das wird aber ne lange DIAshow, kommen alte Kindheitserinnerungen hoch mit unsäglich langen Urlaubsdia-Vorführungen. Alle sagen "wie schön" und denken aber "wann sind die Bilder endlich durch" 😉

wir haben ab Morgen bei uns im Veedel ein Fest, dieses geht über 4 Tage und da werden sehr viele Bilder gemacht bzw. wurden vom Aufbau, Anlieferung usw. bereits erstellt. Diese werden auf einer großen Leinwand den ganzen Tag abgespielt. Habe also 96 Stunden Zeit ;)

Bis bald!
Meowsalot (Bernd)

[marctrix]

Hej Meowsalot,

kennt ihr eine gute HTML5 und oder jQuery Slideshow

Nein, aber Slick ist so eine eierlegende wollmilchsau, die in Bezug auf Accessibility nicht zu den schlechtesten gehört…

Marc

[Meowsalot]

Hallo marctrix,

Nein, aber Slick ist so eine eierlegende wollmilchsau, die in Bezug auf Accessibility nicht zu den schlechtesten gehört…

die kannte ich schon, hat aber kein Vollbildmodus. Habe diese gefunden: http://eikes.github.io/jquery.fullscreen.js/

Jetzt bleibt nur noch die Frage, wie kann ich ständig die Bilder dynamisch nachladen ohne dass die Seite neu aufgebaut werden muss.

Bis bald!
Meowsalot (Bernd)

[marctrix]

Hej Meowsalot,

Nein, aber Slick ist so eine eierlegende wollmilchsau, die in Bezug auf Accessibility nicht zu den schlechtesten gehört…

die kannte ich schon, hat aber kein Vollbildmodus.

Oh, sorry, das war mir nicht bewusst…

Marc

[JürgenB]

Hallo,

• Ständig nachschauen ob es neue Bild im Ordner gibt und diese dann direkt mit abspielen.

wenn du auf dem Server für den Bilderordner das Dirctorylisting einschaltest (z.B. Options +Indexes), kannst du mit einem XMLHttpRequest das Direcorylisting auslesen und damit deine Bilderschow füttern.

Gruß
Jürgen

[Meowsalot]

Hallo JürgenB,

ich habe für den Ordner das Directory Listing aktiviert. Wenn ich diesen Ordner per URL aufrufe sieht dieses so aus

ich rechne dass dieser Ordner später mehrere Hundert Bilder haben kann. Ist es hier wirklich ratsame alle Bilder direkt auszulesen?

Und wie könnte ich per XMLHttpRequest das Verzeichnis auslesen dass ich es damit anzeigt bekomme? https://forum.selfhtml.org/self/2018/apr/16/html-strich-jquery-slideshow/1719625#m1719625

Bis bald!
Meowsalot (Bernd)

[JürgenB]

Hallo,

Und wie könnte ich per XMLHttpRequest das Verzeichnis auslesen dass ich es damit anzeigt bekomme?

auf dieser Beispielseite werden die Datainamen auf Endung „gpx“ geprüft und mit ihnen options im select angelegt. Vielleicht reicht das ja als Anregung.

Hinrer JB.loadFile verbirgt sich ein xmlHttpRequest, der die eingelesenen Daten in result.asciidata liefert. JB.Debug_Info ist im Wesentlichen ein console.log.

Gruß
Jürgen

[Meowsalot]

Hallo JürgenB,

danke für die Info. Hab es mir getestet. Es werden zwar die Bilder ausgelesen aber wenn neue Bilder in den Ordner geladen werden wird das Dropdown nicht automatisch mit den weiteren Bildern gefüllt. Daher ist es nicht dieses was ich suche.

Bis bald!
Meowsalot (Bernd)

[JürgenB]

Hallo,

danke für die Info. Hab es mir getestet. Es werden zwar die Bilder ausgelesen aber wenn neue Bilder in den Ordner geladen werden wird das Dropdown nicht automatisch mit den weiteren Bildern gefüllt. Daher ist es nicht dieses was ich suche.

du musst natürlich, wenn alle Bilder einmal gezeigt wurden, den Ordner neu auslesen. Hast du das gemacht? In meinem Beispiel ist das nicht eingebaut, weil ich es da nicht benötige.

Gruß
Jürgen

[Meowsalot]

Hallo JürgenB,

du musst natürlich, wenn alle Bilder einmal gezeigt wurden, den Ordner neu auslesen. Hast du das gemacht? In meinem Beispiel ist das nicht eingebaut, weil ich es da nicht benötige.

dann habe ich aber eine Unterbrechung? Am besten wäre wirklich wenn ständig ein Script schaut was auf dem Server los ist und dieses dann irgendwo unten dran hängt.

Derzeit reden wir von 652 Bilder.

Bis bald!
Meowsalot (Bernd)

[JürgenB]

Hallo,

warum eine Unterbrechung? Der xmlHttpRequest läuft asynchron, das Bilderladen läuft auch asynchron.

Die Logik könnte so aussehen:

Die erste „Schleife“ holt sich, gesteuert durch setInterval, in einem vernünftigem Rythmus den Ordnerinhalt und generiert bzw. aktualisiert das Array mit den Dateinamen und berechnet die Anzahl der Bilder.

Die zweite „Schleife“ geht per setIntertval durch das Array mit den Bildernamen und ändert das „src“ der Bilder. Das Adressieren der Bilder kann über i++; if(i>=xxx.length;i=0) gehen, oder auch über Zufallszugriff.

Beide Schleifen laufen endlos.

Gruß
Jürgen

[Tabellenkalk]

Hallo,

Derzeit reden wir von 652 Bilder.

gähn! mir ist jetzt schon müd…

Gruß
Kalk

[marctrix]

Hej Tabellenkalk,

Derzeit reden wir von 652 Bilder.

gähn! mir ist jetzt schon müd…

Geh, Franzl, mir is so fad - schieß doch halt mal auf den Haushofmeister… 😂

Marc

[Meowsalot]

Hallo marctrix,

Geh, Franzl, mir is so fad - schieß doch halt mal auf den Haushofmeister… 😂

auch dieser Kommentar finde ich ehrlich gesagt unnötig da dieser nicht mit dem Problem zu tun hat. Es sind einfach so viele Bilder die gezeigt werden sollen. Das habe ich nicht in der Hand und ich finde es schön wenn sich die Besucher dafür interessieren und mitmachen. In einer Millionenstadt kommen nun mal viel Besucher ;)

Bis bald!
Meowsalot (Bernd)

[marctrix]

Hej Meowsalot,

Geh, Franzl, mir is so fad - schieß doch halt mal auf den Haushofmeister… 😂

auch dieser Kommentar finde ich ehrlich gesagt unnötig

Das sehe ich genauso. Das sind Witze so gut wie nie. Es sei denn, man empfindet gute Laune als eine Notwendigkeit.

Daher schaue ich Komödien ganz gerne (das hier war ein aus dem Kopf zitierter Bully-Herbig-Spruch, der ohne das, wodraufhin ich ihn geschrieben habe, natürlich unpassend wirkt und nicht persönlich an dich gerichtet war, sondern an die Mitlesenden Freunde von Bully Herbig hier im Forum).

Marc

[Meowsalot]

Hallo Tabellenkalk,

gähn! mir ist jetzt schon müd…

was hat jetzt dieser Kommentar mit meinem Problem zu tun? Oder warst du einfach nur müde?

Bis bald!
Meowsalot (Bernd)

[Meowsalot]

Hallo,

meine nächste Idee wäre diese gewesen

$( document ).ready(function(){
        setInterval(function(){
            $.ajax({
              type: "GET",
              url: "bilder.php",
              success: function(result) {
                $( "#RBSlideshow" ).text(result.wert);
              }
            });
        }, 10000);
      });

Und die Bilder.php dann so

 <ul >
<?php
    include ("inc/function.php");
    $ordner = "bilder/big";
    $alledateien = scandir($ordner);  
    arsort($alledateien);        
    $i = 1; 
    
    //var_dump($alledateien);
    
    foreach ($alledateien as $datei) {
     
      $dateiinfo = pathinfo($ordner."/".$datei); 
      
      if ($datei != "." && $datei != ".."  && $datei != "_notes" && $bildinfo['basename'] != "Thumbs.db") { 
    
      $bildtypen= array("jpg", "jpeg", "png");
          
      if(in_array($dateiinfo['extension'],$bildtypen))
    {
    ?>
    <li><img src="bilder/big/<?php echo $dateiinfo['basename'];?>"></li>
    <?php } $i++;}} 
  
  header('Content-Type: application/json'); 
  echo json_encode($result); 
?>
  </ul>

<div id="container">
    <div id="RBSlideshow">
</div>

Aber auch dieses funktioniert leider nicht. Ich bekomme es einfach nicht zum laufen.

Bis bald!
Meowsalot (Bernd)

[JürgenB]

Hallo,

du solltest die Aufgabe in zwei Teile zerlegen:

1. Transport der Dateinamen der Bilder vom Server zum Browser: Ob das per xmlHttpRequest wie mein Vorschlag geht, oder per php, ist egal. Vergiss aber nicht, diese Prozedur von Zeit zu Zeit zu wiederholen, damit die Änderungen im Browser ankommen.

2. Die eigentliche Slideshow: Hier musst du die Daten nur in die entsprechende Form bringen und dann das Show-Script deiner Wahl starten. Die Slideshow sollte asynchron laufen, um Punkt 1 nicht zu blockieren.

Gruß
Jürgen

[Meowsalot]

Hallo JürgenB,

ich wollte es so lösen

$( document ).ready(function(){
        setInterval(function(){
            $.ajax({
              'type': "POST",
              'dataType': 'json',
              'url': "bilder.php",
              success: function(data) {
                $( "#test" ).empty();
               // $( "#test" ).text(data);
               $( "#test" ).load();
              }
            });
        }, 1000);
      });

Die Einträge werden zwar geholt aber einfach unten dran geändert. Werde load noch empty funktioniert. Siehst du mein Fehler?

Bis bald!
Meowsalot (Bernd)

[Meowsalot]

Hallo,

Ok, so bekomme ich die Bilder ausgelesen

$( document ).ready(function(){
        setInterval(function(){
            $.ajax({
              'type': "POST",
              'dataType': 'json',
              'url': "bilder.php",
              success: function(data) {
                var objData = data;
                $( "#test" ).empty();
                $( "#test" ).html(objData.data);
              }
            });
        }, 1000);
      });

Und die bilder.php

<?php 
ob_start();
session_start();

include ("inc/function.php");

$ordner = "bilder/big";
$alledateien = scandir($ordner);  
arsort($alledateien);        

foreach ($alledateien as $datei) {
  $dateiinfo = pathinfo($ordner."/".$datei);     
  if ($datei != "." && 
      $datei != ".."  && 
      $datei != "_notes" && 
      $bildinfo['basename'] != "Thumbs.db") { 

  $bildtypen= array("jpg", "jpeg", "png");   

  if(in_array($dateiinfo['extension'],$bildtypen)) {
    $result .= '<img src="bilder/big/'.htmlspecialchars($dateiinfo['basename']).'" alt="">';
  }
}} 
echo json_encode(array('data'=> $result));
?>

Jetzt eine weitere Frage, kann ich das Script irgendwie dazu bringen nur die Bilder zu holen die neu hinzugekommen sind? Dann müsste ich #test nicht immer neu laden sondern könnte mit .after diese einfach unten dran hängen.

Das wäre noch mega!

Bis bald!
Meowsalot (Bernd)

[JürgenB]

Hallo,

ich habe den Punkt 0 noch vergessen, u.A. wegen der großen Anzahl der Bilder:

Wie lange soll ein Bild gezeigt werden?
In welcher Reihenfolge sollen die Bilder gezeigt werden?
Wann sollen neu eingestellte Bilder gezeigt werden?

Gruß
Jürgen

[Meowsalot]

Hallo JürgenB,

Wie lange soll ein Bild gezeigt werden?

Das habe ich irgendwie nicht in der Hand, nehme ein fertiges Plugin https://www.jqueryscript.net/slideshow/Responsive-Fullscreen-Slideshow-Plugin-with-jQuery-RBSlideshow.html

In welcher Reihenfolge sollen die Bilder gezeigt werden?

So wie sie hochgeladen wurden, spielt auch keine große Rolle ob das letzte zuerst oder das erste zuerst angezeigt wird.

Wann sollen neu eingestellte Bilder gezeigt werden?

Immer am Ende, wie ich hier bereits geschrieben habe: https://forum.selfhtml.org/self/2018/apr/16/html-strich-jquery-slideshow/1719827#m1719827

Bis bald!
Meowsalot (Bernd)

[JürgenB]

Hallo,

so ein Durchlauf dauert also über eine Stunde. Daher musst du dir keine Gedanken über die Performance beim Nachladen der Information über neue Bilder machen. Einfach am Ende des Durchlaufs die aktuellen Bildernamen vom Server holen und weiter geht’s.

Zur Reihenfolge:
kommen die Bilder von einer Kammera oder von mehreren. Eventuell musst du die Namen noch sortieren.

Zum Datenvolumen:
Werden die Bilder auf z.B. FullHD resampelt und nachkomprimiert oder willst du >5MB pro Bild übertragen? Was gibt deine Infrastruktur her?

Gruß
Jürgen

PS Manchmal frage ich nur, um zum Nachdenken anzuregen.

[Meowsalot]

Hallo JürgenB,

so ein Durchlauf dauert also über eine Stunde. Daher musst du dir keine Gedanken über die Performance beim Nachladen der Information über neue Bilder machen.

kommt natürlich immer drauf an wie viele Bilder im Verzeichnis liegen. Derzeit bin ich am überlegen ob es sinnvoll ist 400 Bilder von einem Aufbau zu zeigen wo man auf 300 das gleiche sieht ;) Mal sehen wie viel Zeit und Lust ich noch habe das auszusortieren.

Einfach am Ende des Durchlaufs die aktuellen Bildernamen vom Server holen und weiter geht’s.

Und da wären wir dann wieder bei meiner Frage von hier: https://forum.selfhtml.org/self/2018/apr/16/html-strich-jquery-slideshow/1719827#m1719827 wenn ich es schaffe zu sehen ob neue Bilder hochgeladen wurden, dann könnte ich diese mit .after einfach unten dranhängen.

Zur Reihenfolge:
kommen die Bilder von einer Kammera oder von mehreren. Eventuell musst du die Namen noch sortieren.

Die Bilder kommen von einer bzw. mehreren Kameras werden aber beim hochladen dementsprechend umgewandelt.

Zum Datenvolumen:
Werden die Bilder auf z.B. FullHD resampelt und nachkomprimiert oder willst du >5MB pro Bild übertragen? Was gibt deine Infrastruktur her?

Die Bilder werden in FullHD hochgeladen, werden beim Upload umgewandelt und nur eine verkleinerte Version hochgeladen. Die FullHD Bilder werden zwar auch mit hochgeladen aber nur für ein Backup.

Bis bald!
Meowsalot (Bernd)

[JürgenB]

Hallo,

Und da wären wir dann wieder bei meiner Frage von hier: https://forum.selfhtml.org/self/2018/apr/16/html-strich-jquery-slideshow/1719827#m1719827 wenn ich es schaffe zu sehen ob neue Bilder hochgeladen wurden, dann könnte ich diese mit .after einfach unten dranhängen.

darüber würde ich mir keine Gedanken machen. Eine Liste mit 500 Dateinamen hat weniger als 100 kB, also weniger als ein Bild, wenn die noch asynchron nachgeladen werden, fällt das überhaupt nicht auf. Da deine Serie ja ca. eine Stunde oder auch viel länger läuft, und neue Bilder hinten angestellt werden, musst du ja auch nicht alle paar Sekunden prüfen, ob es was neues gibt.

Gruß
Jürgen

[Meowsalot]

Hallo JürgenB,

das Problem ist, wenn die Funktion

$( document ).ready(function(){
        setInterval(function(){
            $.ajax({
              'type': "POST",
              'dataType': 'json',
              'url': "bilder.php",
              success: function(data) {
                var objData = data;
                $( "#test" ).empty();
                $( "#test" ).html(objData.data);
              }
            });
        }, 100000);
      });

ausgeführt wird, fängt die SlideShow wieder von vorne an und die Bilder die eigentlich noch da wären gelöscht werden. Ich weiß ja nie wann die Funktion neu gestartet werden soll?

Bis bald!
Meowsalot (Bernd)

[JürgenB]

Hallo,

zwei Ideen:

Lass das Anzeigen und Datenabfragen unabhängig voneinander laufen, also die Abfrageroutine lädt in „vernünftigen“ Zeitabständen die gerade aktuelle Liste mit den Dateinamen in ein Array, und die Anzeigeroutine zeigt einfach permanent zyklisch alles, was in diesem Array steht.

Lass Abfragen und Anzeigen nacheinander laufen:
Alle Bildernamen von Server holen, dann alle Bilder zeigen, und danach wieder alle Bildernamen von Server holen …. Das letzte Bild bleibt dann evtl. etwas länger stehen.

Und bedenke bei allen deinen Planungen, dass niemand konzentriert vor der Leinwand steht und sich alle Bilder ansieht. Ich würde daher eine zufällige Wiedergabe bevorzugen.

Gruß
Jürgen

[Meowsalot]

Hallo JürgenB,

das Problem ist, was ist eine vernünftige Zeit? Bei 10 Bilder schaut es anderes aus als wenn ich 200 Bilder anzeigen lassen möchte. Das ist ja mein Problem.

Kann ich nicht folgendes erreichen:

Hole alle Bilder vom Server wie in meiner jQuery ja bereits vorgesehen. Dann zeige alle an und dann hole wieder einfach alle Bilder?

Bis bald!
Meowsalot (Bernd)

[JürgenB]

Hallo,

natürlich kannst du am Ende des Bilddurchlaufs die Bilderliste aktualisieren und den Bilderdurchlauf dann neu starten.

Du kannst die Wartezeit bis zur nächsten Aktualisierung aber auch aus der aktuell bekannten Anzahl der Bilder und deren Verweildauer auf dem Beamer berechnen. Und wenn die Serie mehrmals durchläuft, bis die nächste Aktualisierung kommt, ist doch auch kein Problem.

Gruß
Jürgen

[Meowsalot]

Hallo JürgenB,

natürlich kannst du am Ende des Bilddurchlaufs die Bilderliste aktualisieren und den Bilderdurchlauf dann neu starten.

klar geht dieses, die Frage ist nur wie man so etwas umsetzt, nach was ich bei Google suchen muss. JavaScript ist einfach nicht mein Ding.

Bis bald!
Meowsalot (Bernd)

[JürgenB]

Hallo,

klar geht dieses, die Frage ist nur wie man so etwas umsetzt, nach was ich bei Google suchen muss. JavaScript ist einfach nicht mein Ding.

da wirst du wohl nichts fertiges finden. Das Auslesen der Liste mit den Dateinamen hast du doch schon hingekriegt. Und Rolf (pl) hat doch eine Slideshow gepostet. Seinen Perl-Teil brauchst du ja nicht, wenn du das Array mit den Bildernamen anderweilig fütterst.

Also noch mal meine Idee:

Das erste setInterval lädt alle 10 Minuten per xmlHTTPRequest die Dateinamen vom Server und speichert sie in einem globalen Array.

Das zweite setInterval setzt alle 10 Sekunden den Inhalt dieser Arrayelemente als src des img, erhöht den globalen Zähler und prüft, ob er größer oder gleich der Anzahl der Bilder ist, wenn ja, wird der Zähler auf 0 gesetzt.

Im html hast du dann nur ein img mit id, über die du darauf zugreifest (<img id="Bildershow">), und als src z.B. das erste Bild. Der Zugriff geht dann z.B. über

var Meowsalot_index = 0;
window.setInterval(function() {
  document.querySelector("#Bildershow").src = Meowsalot_Bilderarray[Meowsalot_index];
  Meowsalot_index ++;
  if (Meowsalot_index >= Meowsalot_Bilderarray.length) Meowsalot_index = 0;
},10000);
(ungetestet)

Anm.: Globale Variablen sind immer mit Risiken verbunden, sollten aber in diesem Fall kein Problem sein. Wenn du auf Nummer Sicher gehen willst, nenn sie Meowsalot_index und Meowsalot_Bilderarray.

Gruß
Jürgen

[marctrix]

Hej Meowsalot,

kennt ihr eine gute HTML5 und oder jQuery Slideshow die folgendes kann:

• Vollbildmodus
• Ständig nachschauen ob es neue Bild im Ordner gibt und diese dann direkt mit abspielen.

Kommt vielleicht ein bisschen spät, aber mir ist es jetzt erst eingefallen: Früher habe ich mal jAlbum genutzt. Weiß aber nicht mehr, ob das ständig das Verzeichnis ausliest.

Marc