Jule: DIA-SHOW

Hallo!
Ich habe ein kleines Problem. Mein Vater möchte gerne auf einer seite eine Dia.Show abspielen. Leider muß bei ihm alles immer kompliziert sein.
Die Dia-Show soll:

  1. mitten auf der Seite, also in dem Hauptframe sein
  2. die bilder sollen in zufälliger Reihenfolge abgespielt werden
  3. die einzelnen bilder sollen nicht einzeln definiert werden müssen, sondern einfach zufällig aus einem Ordner aufgerufen weden.

Wer kann mir helfen?!

Jule

  1. Hallo Jule,

    es kommt darauf an, ob du auf dem Server CGI oder z.B. PHP verwenden kannst.

    Ich kenne z.B. ein Perl-Script, das mittels SSI aufgerufen, zufällig Grafiken auf einer Seite ausgibt.
    die Namen der Grafiken werden einmal eingegeben in eine Konfigurationsdatei, aber das dürfte ja kein großes Problem sein. Alternativ müßte man eine solche Routine erweitern um das Auslesen eines Directories und dann per random die Grafiken auswählen

    hast du CGI und SSI zur Verfügung?

    Gruss

    Connie

    1. Hallo Jule,

      es kommt darauf an, ob du auf dem Server CGI oder z.B. PHP verwenden kannst.

      Ich kenne z.B. ein Perl-Script, das mittels SSI aufgerufen, zufällig Grafiken auf einer Seite ausgibt.
      die Namen der Grafiken werden einmal eingegeben in eine Konfigurationsdatei, aber das dürfte ja kein großes Problem sein. Alternativ müßte man eine solche Routine erweitern um das Auslesen eines Directories und dann per random die Grafiken auswählen

      hast du CGI und SSI zur Verfügung?

      Gruss

      Connie

      Hallo Connie!
      CGI weiss ich 100%ig! PHp weiss ich nicht!!

      Jule

  2. Hallo Jule,

    Ich habe ein kleines Problem. Mein Vater möchte gerne auf einer seite eine Dia.Show abspielen. Leider muß bei ihm alles immer kompliziert sein.

    <g> Das haben Väter leider so an sich. Bevor du weiterliest, verhandele erst mal mit deinem Vater.

    Zumindest ein Bonus von mindestens 300 DM sollte rausspringen und dazu eine Fete mit deinen Freunden. Die Liste darfst du beliebig erweitern. Sei nur nicht zu gnädig. :-)

    Verhandlung erfolgreich beendet? Na dann an die Arbeit.

    Hier die Javascriptlösung, naja, der Ansatz:

    Die Dia-Show soll:

    1. mitten auf der Seite, also in dem Hauptframe sein

    die Mitte des Frames kannst du im Netscape Navigator mit
    innerWidth <../../tecb.htm#a5> und
    innerHeight <../../tecb.htm#a4> bestimmen.
    Im IE geht es mit document.body.offsetWidth und document.body.offsetHeight

    1. die bilder sollen in zufälliger Reihenfolge abgespielt werden

    hier hilft Math.floor(Math.random()*Bilderanzahl)

    1. die einzelnen bilder sollen nicht einzeln definiert werden müssen, sondern einfach zufällig aus einem Ordner aufgerufen weden.

    »»

    Das geht mit JAvaScript nicht. Du mußt alle Bilder in einem Array speichern.

    Prinzipiell so:

    bildnamen=new Array("bild1","bild2"...);
    bildbreite=new Array("bildbreite1","bildbreite2"...);
    bildhoehe=new Array("bildhoehe1","bildhoehe2"...);

    im Dokument selbst definierst du einen Layer

    <div id="diashow"></div>

    diesen setzt du mittels css und Javascript in die Mitte

    nach dem Laden des Dokumentes startest du eine Funktion die in verschiedenen Zeitabständen den Inhalt des Divs neu schreibt. Im IE mit innerHTML und im NN mit document.write()

    Beispiel für dieses Vorgehen findest du unter
    #http://www.netcologne.de/~nc-laugksan/home.htm

    Viele Grüße

    Antje

    1. Hi,

      <g> Das haben Väter leider so an sich. Bevor du weiterliest,
      verhandele erst mal mit deinem Vater.

      Hehe ,) typische Vater-Aufgabe: zahlen *g*

      Zumindest ein Bonus von mindestens 300 DM sollte rausspringen und
      dazu eine Fete mit deinen Freunden. Die Liste darfst du beliebig
      erweitern. Sei nur nicht zu gnädig. :-)

      Wenn du ein wenig Perl kannst, kannst du die Liste auch automatisch
      erstellen lassen ,) Dauert keine 2 Sekunden, schon ist die Liste
      dann jedesmal neu generiert ,)

      [...]

      Bis hierhin würd ichs genau so machen ,)

      im Dokument selbst definierst du einen Layer

      <div id="diashow"></div>

      Hier würd ichs anders machen:

      <div id="diashow" name="diashow">
      <img src="" name="dias" id="dias">
      </div>

      Der NN braucht name, der IE id - also einfach beides reinschreiben ,)
      Den img-Tag brauchst du später noch, komme ich noch zu.

      diesen setzt du mittels css und Javascript in die Mitte

      naja, nicht ganz so würd ichs machen

      nach dem Laden des Dokumentes startest du eine Funktion die in
      verschiedenen Zeitabständen den Inhalt des Divs neu schreibt. Im
      IE mit innerHTML und im NN mit document.write()

      Genau da find ich die Anwendung nicht richtig; innerHTML ist zwar
      recht zügig, aber document.write nicht so sehr - vor allem
      im NN nicht.
      Mach das ganze mit einem Rollover:

      if(document.layers)
      {
      document.layers['diashow'].document.images['dias'].src = url;
      } else if (document.all) {
      document.all['diashow'].document.images['dias'].src = url;
      }

      Die Größe steht ja im Array der Bilder drin, also weißt du auch die
      Größe des Layers ,)
      Dadurch kannst du die Mitte ausrechnen - jetzt nur noch neu
      positionieren - fertig ,)

      Ach ja, ich würde den Layer bei der Positionierung und dem Bild-
      Wechsel unsichtbar machen, das wirkt sonst so unruhig.

      mfg
      CK1

      1. Hi!!

        Wenn du ein wenig Perl kannst, kannst du die Liste auch automatisch
        erstellen lassen ,) Dauert keine 2 Sekunden, schon ist die Liste
        dann jedesmal neu generiert ,)

        Das würde mich interressieren!Kannst du da mal was genaueres drüber schreiben?1

        Jule

        1. Hallo Jule,

          Das würde mich interressieren!Kannst du da mal was genaueres drüber schreiben?!

          An dieser Stelle will ich mich mal in die aufmerksam verfolgte Diskussion einklinken.
          Ich gehe jetzt davon aus, daß Du Dich ein bischen in Perl auskennst, oder Dich zukünftig damit beschäftigen möchtest. :-)

          Folgendes Vorgehen sollte zum Erfolg führen:

          Mit 'opendir(DIR,"/verzeichnis/mit/bildern") die $!;' Verzeichnis öffnen und mit '@files = readdir(DIR);' die Bilder in ein Array lesen.
          '$zufall = int(rand() * scalar(@files));' liefert Dir die Zufallszahl, mit der Du über '$bild = $files[$zufall];' das Bild erhälst, daß Du ausgeben möchtest.
          In diesem $bild ist allerdings noch der komplette Serverpfad enthalten. Diesen musst Du mit einer RegEx gegen die entsprechende URL austauschen: '$bild =~ s/$pfadzubildern/$urlzubildern/;'
          Jetzt musst Du nur noch eine HTML-Seite zurückgeben, die im <head> einen meta-refresh auf das Perl-Skript enthält, und im Body mit <img src="$bild" alt="$bild"> das Bild ausgibt.
          Damit ein Bild nicht mehrmals aufgerufen wird, und die Diashow auch ein Ende findet, kannst Du die $zufall-snummern durch Kommata getrennt hinter die Skript-URL hängen ('$viewed = join ",", @viewed, $zufall;'), und im Skript wieder einlesen '@viewed = split /,/, $ENV{'QUERY_STRING'};'. Jetzt musst Du nur noch solange $zufall ein Element von @viewed ist eine neue $zufall-szahl erzeugen.
          Feddisch. ;-)

          Ich hoffe das hilft Dir weiter.

          Gruß AlexBausW

  3. Hi,

    Falls Dir die anderen Lösungen nicht gefallen: Du kannst das, was Du willst, mit drei Zeilen JavaScript bewerkstelligen:

    var
    anzahlbilder=4; //hier eintragen
    sekunden=3; //hier eintragen

    function diashow()
    {
    document.dia.src='Bild'+Math.floor(Math.random()*anzahlbilder)+'.jpg';
    setTimeout("diashow()",sekunden*1000);
    }

    Das Bild kannst Du dabei ganz normal mit HTML-Mitteln auf der Seite positionieren, es muss aber name="dia" im Tag haben. Die Bilder werden zwar nicht automatisch aus dem Verzeichnis geholt (geht nicht mit JavaScript), aber Du musst bei Änderung nur die Anzahl im Script aktualisieren. Die Bilder sollten alle die gleiche Größe haben und "Bild0.jpg" bis "Bildx.jpg" heißen. Die Funktion diashow startest Du mit onload im body-Tag.

    Gruß
    Steffen

    1. Hi,

      Falls Dir die anderen Lösungen nicht gefallen: Du kannst das, was
      Du willst, mit drei Zeilen JavaScript bewerkstelligen:

      [...]

      Das Bild kannst Du dabei ganz normal mit HTML-Mitteln auf der
      Seite positionieren, es muss aber name="dia" im Tag haben.

      Gerade so geht das nicht ,) was machst du z. B., wenn ein Bild
      50px*50px groß ist, das nächste aber 60px*75px?

      mfg
      CK1

      1. Hi,

        Gerade so geht das nicht ,) was machst du z. B., wenn ein Bild
        50px*50px groß ist, das nächste aber 60px*75px?

        Wie schon geschrieben: Die Bilder sollten alle die gleiche Größe haben, denn die automatische Skalierung der Browser sieht bekannter Maßen bescheiden aus. Das sollte aber auch kein Problem sein, denn Bilder lassen sich schließlich bearbeiten (vergrößern, verkleinern, Rand abschneiden, Rand hinzufügen etc.)

        Gruß
        Steffen