Javascript Diashow verfeinern

Ich habe eine Javascript Diashow gebastelt:
bauerheerdes.bplaced.net/Bilder/Dia/Bilder.php

Wollte eigentlich eine ohne JS nehmen, aber…

Das Problem:
Ich hätte gerne, dass ein Bild nicht größer ist als die Auflösung des Users.
(Bei HTML würde ich wohl “width=100%” und nen Anker nehmen…)
(und wenn es geht, dass Bilder.php und Bilder-dia.php nicht im selben Ordner wie die Bilder sein muss…)

diashow.js

[code]// diashow.js © 2005 Ingo Turski - http://www.1ngo.de/web/diashow.html

var Galerie=self.location.href, vor, BildNr, nach, Startbild, Bilder;
var d=1, s=60, l=new Array(7);

function initDiashow(vor,Startbild,nach,Bilder) {
if(document.getElementById) {
var x = Galerie.lastIndexOf(".");
var dia = Galerie.substring(0,x) + “-dia” + Galerie.slice(x);
var Dias = document.getElementById(“Dias”);
var a = Dias.getElementsByTagName(“a”);
for (var i=0; i<a.length; i++) {
a[i].href = dia +"?"+encodeURIComponent(vor) +","+parseInt(Startbild+i);
a[i].href +=","+nach +","+Startbild +","+Bilder;
}
}
}

function initDia() {
var Param = self.location.search;
if(Param) {
var P1 = Param.indexOf(",",0); vor = decodeURIComponent(Param.slice(1,P1));
var P2 = Param.indexOf(",",P1+1); BildNr = parseInt(Param.slice(P1+1,P2));
var P3 = Param.indexOf(",",P2+1); nach = Param.slice(P2+1,P3);
var P4 = Param.indexOf(",",P3+1); Startbild = parseInt(Param.slice(P3+1,P4));
Bilder = parseInt(Param.slice(P4+1));
}
var x = Galerie.indexOf("?"); if(x != -1) Galerie = Galerie.substr(0,x);
x = Galerie.lastIndexOf(".");
Galerie = Galerie.substring(0,x-4) + Galerie.slice(x);
document.getElementById(“Galerie”).href = Galerie;
if(!Param || !Bilder) {
alert(“Fehlerhafte Parameter!\n Rufen Sie ein Bild aus der Galerie auf.”);
window.location.href = Galerie;
}
else {
l = document.getElementById(“Intervall”).getElementsByTagName(“a”);
l[6].style.borderColor = “red”; l[6].style.color = “#39c”;
aktiv = window.setInterval(“blaettern(1)”,s*1000);
document.getElementById(“Dia”).src = BildName(BildNr);
if(window.opera) window.setInterval(‘document.getElementById(“Dia”).src = BildName(BildNr)’,2000);
}
}

function BildName(BildNr) {
var Info = document.getElementsByTagName(“var”)[0].firstChild;
Info.data = “Bild “+BildNr+”/”+Bilder;
var nr = (“0”+BildNr.toString()).substr(BildNr>9);
return(vor+nr+nach);
}

function blaettern(d) {
if (s < 75) clearInterval(aktiv);
BildNr = BildNr + d;
if (BildNr > Bilder) BildNr = Startbild;
if (BildNr < Startbild) BildNr = Bilder;
document.getElementById(“Dia”).src = BildName(BildNr);
if (s < 75) aktiv = window.setInterval(“blaettern(1)”,s*1000);
}

function Diashow(d) {
var p = (s<30) ? s/5-1 : 2+s/15;
l[p].style.borderColor = “”; l[p].style.color = “”;
s = d;
p = (s<30) ? s/5-1 : 2+s/15;
l[p].style.borderColor = “red”; l[p].style.color = “#39c”; l[p].blur();
if (s == 75) clearInterval(aktiv);
else blaettern(1);
}[/code]

Bilder.php

[code]

Wasserbüffel aus Masel - Bilder <?php include "../../menu.html"; ?>

Bilder

<?php

for ($bildnummer = 1; $bildnummer <= 57; $bildnummer++) {
if ($bildnummer < 10)
{$bildnummer = “0$bildnummer”;}
echo “<a href=”/Bilder/Dia/Bild$bildnummer.JPG" width=“100%”><img src="/Bilder/Dia/Thumb/Thumb$bildnummer.JPG" width=“5%” alt=“Bild$bildnummer” />";

 }

?>

Diashow-Script © Ingo Turski

[/code]

Bilder-dia.php

[code]

Wasserbüffel aus Masel - Bilder <?php include "../../menu.html"; ?>

Bilder

Überschrift (Bild)

[ voriges Bild | nächstes Bild ] [ Bildwechsel: alle 5, 10, 15, 20, 30, 45, 60 Sekunden | aus ]

[/code]

Auflösung (also Pixel pro Millimeter etwa) wird dir nicht weiiter nutzen.
Jedenfalls kann man das Größenproblem sinnvoll und allein mit CSS in den Griff bekommen,
JS braucht man da nicht.
Sinnvoll heißt in dem Zusammenhang, daß das Bild nicht großer dargestellt werden soll, als
Platz verfügbar ist und dabei das Aspektverhältnis erhalten bleiben soll.
Bilder für die das zutreffen soll, kennzeichnet man als zu Klasse ‘Skaliere’ gehörig und sagt
dann im CSS-Bereich:

im.Skaliere {max-width: 90%; height: auto}

Bei fehlerhaften, alten Darstellungsprogrammen kann es sein, daß die die Eigenschaft
max-width ignorieren, dann wird das Bild in originaler Größe dargestellt.

Eine andere Variante ergibt sich, wenn man die ‘Diashow’ gleich mit SVG realisiert. Da gibt
es einige Möglichkeiten, die Ausgabe an den verfügbaren Anzeigebereich anzupassen.
In meiner Bildergalerie habe ich eine SVG-Ausgabe, die das macht, eine andere mit Bildern in
Originalgröße.
Die Bildergalerie läuft über PHP-Skripte. Das vermeidet das Problem, daß sie durch
Verwendung von java-script bei vielen Nutzern nur schlecht oder gar nicht funktioniert.

[quote]Bei fehlerhaften, alten Darstellungsprogrammen kann es sein, daß die die Eigenschaft
max-width ignorieren, dann wird das Bild in originaler Größe dargestellt.[/quote]
süß… wie höflich du beim IE bleiben kannst :ps:

[quote]Die Bildergalerie läuft über PHP-Skripte. Das vermeidet das Problem, daß sie durch
Verwendung von java-script bei vielen Nutzern nur schlecht oder gar nicht funktioniert.[/quote]
in der tat sage ich zwar auch immer, wenn jemand schlau genug is um javascript zu deaktivieren, dann weiß er auch was er damit anrichten kann und merkts spätestens bei google :wink: von daher nehme ich keine rücksicht darauf wenns jemand deaktiviert.
dass ein selbstgeschriebenes script (komplexerer natur) überall funktioniert habe ich selbst fast noch nie erlebt. ich musste immer iwo iwas anpassen.
wenn sowas wirklich mit js realisiert werden soll empfehle ich daher libs wie jQuery zu verwenden, die sind da relativ getrimmt und übernehmen die browserkompatibilität.

allerdings muss ich hoffmann zustimmen, ich würde sowas ebenfall mit php realisieren. damit spart man sich ne ganze menge probleme.

seine begeisterung für svg kann ich allerdings nur halb teilen - es mag sicherlich seine anwendungsbereiche haben, dafür gibt es zweifellos mehr als genug sinnvolle beispiele, aber so wie du das hier propagierst könnt man echt meinen du kriegst dafür provision xD :ps:

Bei Goggle funktioniert in der Tat vieles nicht, die sind was internet-Formate anbelangt
größtenteils inkompetent - daher sollte man auch meinen, daß es keine so gute Idee ist, daß
der Autor/Editor von ‘HTML5’ von denen gesponsort wird (um auch das Format zu pessimieren?).
Seit einiger Zeit funktioniert etwa bei Goggle auch die Bildersuche nicht mehr - gut, war nie
sonderlich effektiv verglichen mit den commons aus der wiki-Gruppe, aber immerhin ging die
Anzeige über Jahre einigermaßen, war aber auch da schon als eine Art Bildergalerie nie
besonders ergonomisch oder nutzerfreundlich, was natürlich auch damit zusammenhängt,
daß es bei Bildern noch viel schwieriger als bei Text ist, die inhaltlich automatisch und korrekt
einem Suchbegriff zuzuordnen.

SVG und Bildergalerien - oh, das paßt ganz gut zusammen, insbesondere für jene, die sich
stark zum Design hingezogen fühlen. Bei Bildergalerien hat man oft wenig Text, aber meist ein
Menü mit Vorschaubildern und man will Menü und Hauptbild irgendwie sowohl ergonomisch als
ästhetisch sinnvoll anordnen, gegebenenfalls auch Größen skalieren oder an den
Anzeigebereich anpassen etc. Wenn man sowieso fast nur graphisches Material hat, ist die
Anordnung eben nicht mehr nur dekorativ, wie das beim Konzept von (X)HTML+CSS notwendig
der Fall ist.
Das alles geht mit SVG(+CSS) natürlich viel besser als mit (X)HTML(+CSS), was ja mehr für Text
gedacht ist. Mit SVG läßt sich dann auch sehr leicht dekorierte und positionierte
Zusatzinformation interaktiv mit deklarativer Animation einblenden, da sind die Möglichkeiten bei
CSS ja sehr beschränkt - und weil CSS nicht auf Ereignisse zugreifen kann, ändern da auch die
in Arbeit befindlichen Module Animation und Übergänge nicht viel.
Also SVG eignet sich schon deutlich besser für die Anwendung Bildergalerie als (X)HTML.
Problematisch ist bei SVG viel Text. Bei meiner Bildergalerie biete ich zum einen XHTML+CSS
als Altenative Darstellungen an, zum anderen findet die textbasierte Navigation zwischen
einzelnen Austellungsbereichen auch mit XHTML+CSS statt. Mit PHP kann man da ja sehr
flexibel entscheiden, was man wann wie ausgeben will. Das ist also eher eine 'sowohl als auch’
als ‘entweder oder’, um ein gutes Resultat zu erzielen.
Leider funktioniert XHTML in SVG mit foreignObject noch nicht wirklich so, daß man das
brauchbar verwenden könnte. Selbst textArea von SVG tiny 1.2 funktioniert ja nur in Opera
brauchbar, die meisten anderen browser ignorieren das noch. Daher breche ich
Bildbeschreibungen in meiner Galerie für die SVG-Ausgabe derzeit mit PHP wordwrap um,
zusammen mit der Bestimmung der Textlänge reicht das, um auch kürzere Fließtexte in SVG
sinnvoll auszugeben.
SVG in XHTML geht zwar problemlos, ist aber für Bildergalerien nicht besonders hilfreich, weil
dann ja die oft zentralen Fragen wie Positionierung und Skalierung wieder am CSS hängen,
was nicht optimal oder auch gar nicht funktioniert.

Wenn es also wirklich darum geht, eine Bildergalerie zu optimieren, ist SVG+PHP eine gute Wahl,
java-script braucht man nicht und (X)HTML ist nur ergänzend wichtig.

Ok, Theorie ist ja was schönes, aber … :ps:

Langfassung
Webseiten programmieren ist alles andere als mein liebstes Hobby.
Ursprünglich wurde ich um Hilfe gerufen mit den Angaben: Es ist alles fertig muss nur in die 1und1 Homepage eingefügt werden…

Als ich gemerkt habe wie doof das Teil ist, hab ich selbst geschrieben und denn ganzen Tag verbaselt.

Kurzfassung:
Ich bin nicht wirklich gut in Webseiten basteln (wird wohl damit zu tun haben das ich nicht gerne programmiere :ps: ) und bräuchte Code.^^

Hi,

dir wird wohl kaum jemand hier deinen Code vorkauen. Zumindest nicht solange du dein Sparschwein plünderst. Hilfestellung wist du jedoch erfahren können, sobald du Eigeninitiative zeigst. Das tust du bspw. indem du Google benutzt.

[quote=“kerbination”]
dir wird wohl kaum jemand hier deinen Code vorkauen. Zumindest nicht solange du dein Sparschwein plünderst. Hilfestellung wist du jedoch erfahren können, sobald du Eigeninitiative zeigst. Das tust du bspw. indem du Google benutzt.[/quote]

Hab oben doch ein meine bis auf die “Details” funktionierende Diashow vorgestellt.

Wobei „deine“ hier aber nur bedeutet, dass du dir irgendwo ein Fertigscript gesucht und eingebaut hast …

Wobei „deine“ hier aber nur bedeutet, dass du dir irgendwo ein Fertigscript gesucht und eingebaut hast …[/quote]

Richtig.
Ich habe das Script umgeschrieben so dass es gepassst hat.