DIA-SHOW
Jule
0 Connie0 Jule
0 Antje Hofmann0 Steffen Gerlach
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:
Wer kann mir helfen?!
Jule
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 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ählenhast du CGI und SSI zur Verfügung?
Gruss
Connie
Hallo Connie!
CGI weiss ich 100%ig! PHp weiss ich nicht!!
Jule
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:
- 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
- die bilder sollen in zufälliger Reihenfolge abgespielt werden
hier hilft Math.floor(Math.random()*Bilderanzahl)
- 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
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
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
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
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
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
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