Bildershow - absoluter Anfänger Einstellungen

[engelchen301]

Hallo Zusammen,

ich bin ein absoluter Homepageanfänger! Ich bin jetzt dabei mir eine zu erstellen und ich möchte kleine Vorschaubilder auf meiner Page, die, wenn man draufklickt, groß werden. Das hab ich auch schon hingefummelt:
<a href="Foto.jpg"><img src="Foto.jpg" width="200" height="150" alt="Vorschau" border="1">

Jetzt möchte ich aber gerne, daß, wenn man das große Bild auf hat, man mit einem "Weiter" Knopf zum nächsten großen Bild wechseln kann. Damit die Besucher meiner Page dann nicht immer auf zurück müssen und dann das nächste Vorschaubild anklicken müssen. Drück ich mich verständlich aus?

Ich hoffe jemand kann mir helfen, aber bitte kein zu schweres Fachchinesisch, wie gesagt ich bin absoluter Neuling auf dem Gebiet

Danke im Voraus

[Peter Gedamke]

Hallo Ihr Lieben,

ich hab es geschaftt und das hab ich nur Euch zu verdanken. Vielen Dank!!!
ich hab es jetzt (nach längerem Fummeln) mit lightbox hingekriegt. Ich hatte zuerst
Antwort 1 (Verweis auf eine Seite anstatt auf ein Bild) umgesetzt, das war ein echt super
Tip, Danke nochmal. Hätte ich das mit lightbox nicht auf die Reihe gekriegt, wär das
eine super alternative. Und danke auch, das ihr das mit lightbox rausgekriegt habt und für
die ganzen tollen Tips. Ihr seid echt super!

LG
engelchen301

hier mal zum angucken:
www.bratwursttreffen.de
ich bin noch am basteln, deshalb ist nur die eine Seite fertig -> fotos/bwt/2004

Funktioniert bei mir nicht.
Sieht aus, als wäre die Fotos nicht hochgeladen.
Habe FF2.0.4

hmmm, also ich kann auch ausser den ganz normal eingestellten Dateien nüscht von einer Bildershow entdecken

[Peter Gedamke]

Hallo Ihr Lieben,

ich hab es geschaftt und das hab ich nur Euch zu verdanken. Vielen Dank!!!
ich hab es jetzt (nach längerem Fummeln) mit lightbox hingekriegt. Ich hatte zuerst
Antwort 1 (Verweis auf eine Seite anstatt auf ein Bild) umgesetzt, das war ein echt super
Tip, Danke nochmal. Hätte ich das mit lightbox nicht auf die Reihe gekriegt, wär das
eine super alternative. Und danke auch, das ihr das mit lightbox rausgekriegt habt und für
die ganzen tollen Tips. Ihr seid echt super!

LG
engelchen301

hier mal zum angucken:
www.bratwursttreffen.de
ich bin noch am basteln, deshalb ist nur die eine Seite fertig -> fotos/bwt/2004

Funktioniert bei mir nicht.
Sieht aus, als wäre die Fotos nicht hochgeladen.
Habe FF2.0.4

hmmm, also ich kann auch ausser den ganz normal eingestellten Dateien nüscht von einer Bildershow entdecken

[Thomas]

hier mal zum angucken:
www.bratwursttreffen.de

Also bei mir geht es (FF 2.0.0.4, IE 7.0.5730.11). Hier noch ein direkter Link zur Bildseite 2007 (jomal und Peter, vielleicht probiert ihr es auf der falschen Seite?).

Hinweis an die TE: In der Datei sollte als erstes der DOCTYPE stehen. Bei dir steht da " design & layout by Andrea -->". Das würde ich rausnehmen und irgendwo weiter unten als Kommentar oder passendes META-Tag im HEAD-Bereich einfügen.

[jomal]

hier mal zum angucken:
www.bratwursttreffen.de

Also bei mir geht es (FF 2.0.0.4, IE 7.0.5730.11). Hier noch ein direkter Link zur Bildseite 2007 (jomal und Peter, vielleicht probiert ihr es auf der falschen Seite?).

Hinweis an die TE: In der Datei sollte als erstes der DOCTYPE stehen. Bei dir steht da " design & layout by Andrea -->". Das würde ich rausnehmen und irgendwo weiter unten als Kommentar oder passendes META-Tag im HEAD-Bereich einfügen.

Ja, mit dem Link klappts.
Hab mir den Sourcecode nicht angesehen, aber das führende Kommentarzeichen scheint zu fehlen, es sei denn, das ist beabsichtigt.
Gefällt mir soweit, aber der Next-Button stört mich an der Stelle. Und ein Back-Button fehlt auch noch, aber das ist sicher nur Feinarbeit.

Ach, da es zwei Links gibt, ich würde den falschen so ändern, dass er nur noch nen Link auf die aktuelle Seite enthält.

jomal

[Peter Gedamke]

hatte ich wohl :-)
aber wow - da haben ja bereits die Thumb's Grössen von durchschnittlich 45-50 kb
Sonst aber doch gut gemacht! Richtig ist aber, dass "design & layout by Andrea -->" nüscht über dem Doctype zu suchen hat. Gehört in die Metas, evtl. auch in dei Beschreibung etc

[Thomas]

Gefällt mir soweit, aber der Next-Button stört mich an der Stelle. Und ein Back-Button fehlt auch noch, aber das ist sicher nur Feinarbeit.

Klickfläche für das nächste Bild ist auf der kompletten rechten Seite des angezeigten Bildes (außer beim letzten), Klickfläche für das vorherige auf der kompletten linken Seite des Bildes (außer beim ersten). Die Buttons erscheinen nur, wenn die Maus über dem Bild steht, das stört mich eigentlich nicht so sehr. Außerdem funktionieren auch die Cursortasten recht und links (für vor und zurück) und die Escape-Taste (für zurück zur Übersicht).

Ach, da es zwei Links gibt, ich würde den falschen so ändern, dass er nur noch nen Link auf die aktuelle Seite enthält.

Welche Links meinst du? Hier im Forum gibts den auf die Hauptseite, dort musst du auf Fotos, dann auf BWT und dann auf Bratwursttreffen 2004 klicken (so wie es die TE auch geschrieben hat: www.bratwursttreffen.de -> fotos/bwt/2004) und den von mir, der direkt auf die Unterseite von 2007 verlinkt. Funktionieren tuen beide. Oder meinst du etwas anderes?

[edit: fehlendes p ergänzt]

Der Beitrag wurde von Thomas bearbeitet: 30.06.2007 - 14:11

[Thomas]

aber wow - da haben ja bereits die Thumb's Grössen von durchschnittlich 45-50 kb

Das sind auch keine Thumbnails, das sind die großen Bilder, kleinskaliert durch den Browser. Da muss wohl von der TE nochmal nachgearbeitet werden - oder es ist Absicht, damit die Anzeige der Bilder im Großformat schneller abläuft (was ich aber eher nicht glaube)?

@engelchen301: Für die Vorschau solltest du kleinere Versionen der Bilder erzeugen. Du hast sonst z. B. Datenmengen von über einem Megabyte bei der 2007er Seite, was allgemeinhin als zuviel angesehen wird.

[Thomas]

Und noch ein kleiner Hinweis am Rande: Dateinamen mit Leerzeichen funktionieren zwar meistens, aber das muss nicht unbedingt immer der Fall sein. Deshalb würde ich grundsätzlich empfehlen, auf Leerzeichen in Dateinamen zu verzichten und sie ggf. durch einen Unterstrich ('_') zu ersetzen.
Alternativ sollte man zumindest bei der Referenzierung das Leerzeichen durch "%20" ersetzen, also z. B.

HTML

<a href="Familie%20Molly.html"><img src="Familie%20Molly.gif" onMouseOver="this.src='Familie%20Molly1.gif'" onMouseOut="this.src='Familie%20Molly.gif'" border="0" alt="Familie Molly">

statt

HTML

<a href="Familie Molly.html"><img src="Familie Molly.gif" onMouseOver="this.src='Familie Molly1.gif'" onMouseOut="this.src='Familie Molly.gif'" border="0" alt="Familie Molly">

Und was mir beim Kopieren des Quelltextes noch aufgefallen ist: Da sind viele böse Macken im HTML-Code (Tabellen ohne <tr> und <td>, Anker ohne schließendes </a>, Absätze ohne schließendes </p>)! Nichts, was ein aktueller Browser nicht dennoch irgendwie ansatzweise korrekt interpretieren würde - aber eben auch nicht mal ansatzweise korrektes HTML .

[edit: Beispiel deutlicher herausgearbeitet und noch einen weiteren Problempunkt hinzugefügt]

Der Beitrag wurde von Thomas bearbeitet: 30.06.2007 - 14:37

[Peter Gedamke]

um es genau zu sagen, enthält diese Seite alleine 45 Warnungen:

Zeile 1 Zeichen 9 - Warnung: Unmaskiertes "&" sollte als "&amp;" geschrieben werden
Zeile 3 Zeichen 1 - Warnung: Fehlende <!DOCTYPE> Deklaration
Zeile 3 Zeichen 1 - Warnung: plain text ist in <head> Elementen nicht erlaubt
Zeile 3 Zeichen 1 - Warnung: [34]<!DOCTYPE> ist nur am Dateianfang erlaubt
Zeile 4 Zeichen 1 - Warnung: Unzulässiges <html> löschen
Zeile 3 Zeichen 1 - Warnung: <head> ist in <body> Elementen nicht erlaubt
Zeile 3 Zeichen 1 - Warnung: <meta> ist in <body> Elementen nicht erlaubt
Zeile 3 Zeichen 1 - Warnung: <title> ist in <body> Elementen nicht erlaubt
Zeile 3 Zeichen 1 - Warnung: <meta> ist in <body> Elementen nicht erlaubt
Zeile 3 Zeichen 1 - Warnung: <meta> ist in <body> Elementen nicht erlaubt
Zeile 3 Zeichen 1 - Warnung: <meta> ist in <body> Elementen nicht erlaubt
Zeile 3 Zeichen 1 - Warnung: <meta> ist in <body> Elementen nicht erlaubt
Zeile 3 Zeichen 1 - Warnung: <meta> ist in <body> Elementen nicht erlaubt
Zeile 3 Zeichen 1 - Warnung: <meta> ist in <body> Elementen nicht erlaubt
Zeile 3 Zeichen 1 - Warnung: <meta> ist in <body> Elementen nicht erlaubt
Zeile 3 Zeichen 1 - Warnung: <link> ist in <body> Elementen nicht erlaubt
Zeile 3 Zeichen 1 - Warnung: <link> ist in <body> Elementen nicht erlaubt
Zeile 3 Zeichen 1 - Warnung: </head> ist in <body> Elementen nicht erlaubt
Zeile 23 Zeichen 1 - Warnung: Unzulässiges <body> löschen
Zeile 37 Zeichen 1 - Warnung: <p> ist in <table> Elementen nicht erlaubt
Zeile 39 Zeichen 19 - Warnung: Fehlendes </a> vor <p>
Zeile 37 Zeichen 1 - Warnung: <p> ist in <table> Elementen nicht erlaubt
Zeile 40 Zeichen 19 - Warnung: Fehlendes </a> vor <p>
Zeile 37 Zeichen 1 - Warnung: <p> ist in <table> Elementen nicht erlaubt
Zeile 41 Zeichen 19 - Warnung: Fehlendes </a> vor <p>
Zeile 37 Zeichen 1 - Warnung: <p> ist in <table> Elementen nicht erlaubt
Zeile 42 Zeichen 19 - Warnung: Fehlendes </a> vor <p>
Zeile 37 Zeichen 1 - Warnung: <p> ist in <table> Elementen nicht erlaubt
Zeile 43 Zeichen 19 - Warnung: Fehlendes </a> vor <p>
Zeile 37 Zeichen 1 - Warnung: <p> ist in <table> Elementen nicht erlaubt
Zeile 46 Zeichen 9 - Warnung: Unzulässiges </div> löschen
Zeile 47 Zeichen 9 - Warnung: Unzulässiges </div> löschen
Zeile 48 Zeichen 24 - Warnung: Fehlendes </font> vor <p>
Zeile 50 Zeichen 19 - Warnung: Erforderliches <font> einfügen
Zeile 89 Zeichen 95 - Warnung: Unzulässiges </a> löschen
Zeile 89 Zeichen 99 - Warnung: Unzulässiges </a> löschen
Zeile 139 Zeichen 57 - Warnung: replacing ungültige numerische Notation in 149
Zeile 156 Zeichen 1 - Warnung: Fehlendes </script>
Zeile 40 Zeichen 19 - Warnung: URI in <a> enthält unzulässige Zeichen
Zeile 42 Zeichen 19 - Warnung: URI in <a> enthält unzulässige Zeichen
Zeile 42 Zeichen 48 - Warnung: URI in <img> enthält unzulässige Zeichen
Zeile 43 Zeichen 19 - Warnung: URI in <a> enthält unzulässige Zeichen
Zeile 44 Zeichen 19 - Warnung: URI in <a> enthält unzulässige Zeichen
Zeile 147 Zeichen 1 - Warnung: Bei <script> das Attribut type hinzufügen
Zeile 156 Zeichen 1 - Warnung: Bei <script> das Attribut type hinzufügen

0 Fehler / 45 Warnungen

[harlequin]

moin!

Nun macht doch mal langsam... Tipps und Hinweise sind zwar schön und eure durchweg richtig, aber die Art und Weise kann schon etwas... abschrecken...

Ich persönlich war damals froh, wenn überhaupt was auf einer Seite, die ich selbst gezimmert hab, angezeigt wurde...

Schöne Wochenende!
Lars

[Google Bot]