xfoto: selbsterstelle Fotogalerie brauchbar?

Ich habe hier vor 2-3 Jahren eine tolle Einführung in HTML, CSS und JS bekomnen - nachträglich noch mal Danke ans Forum !!

Eine Bitte: könntet ihr mal mit euren versch. Browsern meine Test-Seite ansehen:
http://www.xfoto.at/xfoto/index.html

Einfache Funktion: Klick auf rechte Fotohàlfte oder daneben = nächstes Foto, links = voriges Foto.
Umgesetzt mit 2 transparenten divs mit onclick.
(Info: Links sind inaktiv)

Ist diese - einfache - Lösung für die gängigen Browser ok bzw. für den gängigen User gut bedienbar?

Danke!

  1. Ist diese - einfache - Lösung für die gängigen Browser ok bzw. für den gängigen User gut bedienbar?

    Beim überfahren mit dem Cursor solltest du einen Indikator einbauen um die sensitiven Bereiche hervorzuheben + ein Tooltip mit "nächstes Bild" bzw. "vorheriges Bild" ansonsten kapieren das vermutlich die wenigsten.

    1. Ist diese - einfache - Lösung für die gängigen Browser ok bzw. für den gängigen User gut bedienbar?

      Beim überfahren mit dem Cursor solltest du einen Indikator einbauen um die sensitiven Bereiche hervorzuheben + ein Tooltip mit "nächstes Bild" bzw. "vorheriges Bild" ansonsten kapieren das vermutlich die wenigsten.

      Das mit dem "Kapieren" befürchte ich je nach Surf-Erfahrenheit auch ein wenig ...

      Vielleicht vor und nach dem Bild je eine grundsätzlich unsichtbare Grafik "<" und ">" einzubauen, die bei Überfahren des jeweiligen div auf Sichtbar mit zB halber Transparenz gesetzt werden?

      1. Vielleicht vor und nach dem Bild je eine grundsätzlich unsichtbare Grafik "<" und ">" einzubauen, die bei Überfahren des jeweiligen div auf Sichtbar mit zB halber Transparenz gesetzt werden?

        Ja, einfach als Hintergrundbild rein und dann bei :hover einfach einblenden - dann weiß man, was Sache ist.

        1. Hi,

          Ja, einfach als Hintergrundbild rein und dann bei :hover einfach einblenden - dann weiß man, was Sache ist.

          Aber nur, wenn man ein Endgerät nutzt, das auch hovern kann – was die meisten mobile devices ausschließt.

          MfG ChrisB

          --
          RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
          1. Hi,

            Ja, einfach als Hintergrundbild rein und dann bei :hover einfach einblenden - dann weiß man, was Sache ist.

            Aber nur, wenn man ein Endgerät nutzt, das auch hovern kann – was die meisten mobile devices ausschließt.

            MfG ChrisB

            Hallo!

            So, hab nun zwei Pfeilgrafiken mit geringer Deckkraft eingebaut, sodass auch ohne hover/mouseover zart zu erkennen ist "Klick-mal-hier". Gefällt mir ganz gut.

            Jetzt muss ich nur noch schnell suchen, wie ich - vermutlich mit JS - die jeweilige Pfeilgrafik mit erhöhter Deckkraft anzeige wenn man mit der Maus über die linke bzw. rechte Fotoseite hovert ...

  2. Moin,

    Ist diese - einfache - Lösung für die gängigen Browser ok bzw. für den gängigen User gut bedienbar?

    Wenn ich weiterklicke, dauert es teilweise einen kurzen Zeitraum bis das Bild angezeigt wird, da es erst geladen werden muss. Für diese Zeit könntest du entweder den Cursor verändern oder ein Lade-Kringel anzeigen oder etwas anderes, was mir zeigt, dass etwas passiert. Beim ersten Mal wusste ich nicht, ob es lädt, hab 3 mal geklickt, und war dann 3 Bilder weiter.

    Noch etwas technisches:
    Dein Javascript ist einfach gehalten und du verwendest keine anderen Skripte. Trotzdem wäre es dringend zu empfehlen dein Skript in ein Objekt zu kapseln. Dann können (falls du das beabsichtigst) auch andere Leute deine Galerie gefahrlos nutzen, und auch du kriegst keine Probleme mit globalen Variablen, die sich und dich behindern können.

    Empfehlenswerte Lektüre: Organisation von Javascripten: Module und Kapselung

    Grüße Marco

    --
    Ich spreche Spaghetticode - fließend.
    1. Moin,

      Ist diese - einfache - Lösung für die gängigen Browser ok bzw. für den gängigen User gut bedienbar?

      Ja. Mir erscheint die Bedienung schon logisch. Aber mir gefällt der "Mauszeiger" nicht, er passt auch nicht recht zur Seite, fällt sogar regelrecht negativ auf - und das obwohl ich kein "Graphikfuzzi" bin.

      Jörg Reinholz

      1. Ja. Mir erscheint die Bedienung schon logisch. Aber mir gefällt der "Mauszeiger" nicht, er passt auch nicht recht zur Seite, fällt sogar regelrecht negativ auf - und das obwohl ich kein "Graphikfuzzi" bin.

        schon geändert ;-)

    2. Wenn ich weiterklicke, dauert es teilweise einen kurzen Zeitraum bis das Bild angezeigt wird, da es erst geladen werden muss. Für diese Zeit könntest du entweder den Cursor verändern oder ein Lade-Kringel anzeigen oder etwas anderes, was mir zeigt, dass etwas passiert. Beim ersten Mal wusste ich nicht, ob es lädt, hab 3 mal geklickt, und war dann 3 Bilder weiter.

      Hab jetzt knapp neben/im Foto zwei Grafiken eingebaut, die darauf hinweisen, dass hier geklickt werden soll.
      Die Sache mit zB temporärer Deckkraftverringerung des aktuellen Fotos (und damit evtl. Zeigen eines darunter liegendem Warte-GIF) bis das neue geladen ist krieg ich nicht hin. Ich schaffs nicht, im Script die CSS-Eigenschaft von Foto zu verändern.

  3. hab nun neben dem klickbaren Foto auch die Pfeiltasten für das vor/zurück eingeteilt: TESTSEITE

    Frage zu CSS:
    Wenn der Viewport zu klein wird um das Foto und die davor und danach liegenden Pfeilgrafiken anzuzeigen entsteht ein häßlicher Umbruch der Grafiken. Wie verhindere ich das?

    1. Frage zu CSS:
      Wenn der Viewport zu klein wird um das Foto und die davor und danach liegenden Pfeilgrafiken anzuzeigen entsteht ein häßlicher Umbruch der Grafiken. Wie verhindere ich das?

      Hinfällig (nowrap in body)