HTML / jQuery Slideshow

[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.