Chris B.: Lightbox Bildergalerie: Wie die Pfeile nach außen verlegen?

Hallo!

Ich habe gestern die Lightbox installiert, damit Besucher auf meiner Website durch ein paar Bilder blättern können. Die Navigationspfeile für vor und zurück erscheinen dabei ja erst bei Mouseover und dabei dann auch rechts und links in/über den Bildern.

Mir würde es besser gefallen, wenn die Pfeile schon gleich sofort und dann auch dauerhaft angezeigt würden und sich dabei rechts und links außerhalb der Bilder befinden würden.

Lässt sich das irgendwie machen? Ich kenne mich da nicht so aus. Ein paar andere Kleingkeiten habe ich schon in der lightbox.css ändern können, aber das mit den Pfeilen außen fest anpinnen bekomme ich nicht hin. Darum würde ich mich über Hilfe sehr freuen.

Grüße
Christopher

Link zur Lightbox-Einbauseite

akzeptierte Antworten

  1. @@Chris B.

    Link zur Lightbox-Einbauseite

    Dann installier ich das mal schnell, um herauszufinden, was du meinst. Nicht. Ich habe besseres zu tun.

    Wie wär’s denn mit einem Link zu deiner Seite, wo du das installiert hast?

    😷 LLAP

    --
    Wenn der Faschismus wiederkehrt, wird er nicht sagen: „Hallo, ich bin der Faschismus.“ Er wird sagen: „Hört auf zu zählen! Ich habe gewonnen!“
    1. Auf meiner Seite sieht's noch ziemlich unfertig aus, aber unter dem Link gibt es eine kleine Beispiel-Galerie. Die Pfeile für vor und zurück erscheinen auch nicht gleichzeitig, sondern jeweils entsprechend nur dann, wenn man mit dem Mauszeiger über die rechte oder die linke Bildhälfte fährt.

      Beispiel

  2. Hi there,

    Lässt sich das irgendwie machen? Ich kenne mich da nicht so aus. Ein paar andere Kleingkeiten habe ich schon in der lightbox.css ändern können, aber das mit den Pfeilen außen fest anpinnen bekomme ich nicht hin. Darum würde ich mich über Hilfe sehr freuen.

    tja, mit:

    .lb-nav a.lb-prev {
    position: relative;
        left: -60px;
    }
    

    kannst Du einmal den "nach-links"-Pfeil nach aussen setzen. (In gleicher und klarer Weise mit right:... den rechten Pfeil). Daß er allerdings immer sichtbar ist wirst Du imho mit CSS alleine nicht hinbekommen, da wirst Du das jQuery-versiffte Javascript leicht ändern müssen. Da wirst Du aber selbst draufkommen müssen fürchte ich, oder Du findest eine beschr gute Seele, die das für Dich macht...

    1. Hallo klawischnigg,

      Daß er allerdings immer sichtbar ist wirst Du imho mit CSS alleine nicht hinbekommen, da wirst Du das jQuery-versiffte Javascript leicht ändern müssen. Da wirst Du aber selbst draufkommen müssen fürchte ich, oder Du findest eine beschr gute Seele, die das für Dich macht...

      Die Werte für opacity und transition zu löschen, sollte helfen.

      Bis demnächst
      Matthias

      --
      Du kannst das Projekt SELFHTML unterstützen,
      indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
      1. Hallo Mathias,

        ich werde diese mal entfernen. Ich gebe dann eine Rückmeldung, ob's geklappt hat.

      2. Hi there,

        Daß er allerdings immer sichtbar ist wirst Du imho mit CSS alleine nicht hinbekommen, da wirst Du das jQuery-versiffte Javascript leicht ändern müssen. Da wirst Du aber selbst draufkommen müssen fürchte ich, oder Du findest eine beschr gute Seele, die das für Dich macht...

        Die Werte für opacity und transition zu löschen, sollte helfen.

        ich wollt' ja nur den Begriff "jQuery-versifftes Javascript" irgendwo unterbringen...

    2. Danke schon mal dafür!

      Ich hatte es an dieser Stelle auch schon zum Testen mal mit -50px; probiert, aber ohne position: relative; . Jetzt, mit dem dazu, klappt es.

      Okay, wegen der dauerhaften Anzeige muss ich halt mal weiter rumprobieren und gucken, ob ich zufällig eine Lösung finde. ;)

      1. Hallo Chris B.,

        Okay, wegen der dauerhaften Anzeige muss ich halt mal weiter rumprobieren und gucken, ob ich zufällig eine Lösung finde. ;)

        Oder meinen Beitrag lesen 😉

        Bis demnächst
        Matthias

        --
        Du kannst das Projekt SELFHTML unterstützen,
        indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
        1. Schon passiert. Du warst mit der AW schneller als ich mit dem Schreiben. :)

        2. Juchheee, es ist nun alles so wie es soll! Die Pfeile sind außen und dauerhaft zu sehen. Perfekt, ich danke euch allen für die schnelle und gute Hilfe! 👍

  3. Ich bin's noch mal. Wie ich gesehen habe, wird ein Bild, wenn man es per Smartphone (im Hochformat) öffnet, über die volle Seitenbreite angezeigt. Die Navigationspfeile, die nun außen liegen, sind dann nicht zu sehen. Kippt man das Smartphone ins Querformat, wird alles perfekt angezeigt und es ist sogar noch Platz nach rechts und links.

    Wie kann ich es wie auf dem beigefügten Bild hinbekommen, dass Bilder im Hochformat nicht auf die volle Breite auseinander gezogen werden (wie bei Bild A)? Dass sie anstatt 100% vielleicht nur 70% breit sind und dadurch die seitlichen Pfeile sichtbar werden (wie bei Bild B)?

    Ich habe auf der css-Seite schon an verschiedenen Stellen die 100%-Werte geändert oder auch irgendwelche seitlichen (left/right) px- oder %-Angaben, aber entweder eier ich da immer geschickt an den korrekten Stellen vorbei oder ich mache grundsätzlich was falsch. Bevor ich jetzt weiter stundenlang rumprobiere und nichts erreiche, frage ich lieber hier noch mal nach.

    Darum: Weiß von euch jemand, wie sich das Bild kleiner machen lässt? Wenn es eine Möglichkeit gibt, dass das dann nur bei Mobiltelefonen geschieht, wäre es toll, aber wenn es nur so geht, dass es dann auch auf allen anderen Geräten verkleinert wird, dann wäre das auch okay.

    Und eine kurze andere Frage: Wie kann man eigentlich einen Code bzw. mehrere Codezeilen in einen Beitrag einfügen? Von anderen Foren kenne ich es so, dass es dafür bei den BBCode-Images über dem Texteingabefeld auch einen Button mit einer Raute (#) gibt. So einen sehe ich hier aber nirgends.

    -- Christopher

    A: So ist es jetzt. B: So soll es werden.

    1. Hallo Chris B.,

      Wie kann ich es wie auf dem beigefügten Bild hinbekommen, dass Bilder im Hochformat nicht auf die volle Breite auseinander gezogen werden (wie bei Bild A)? Dass sie anstatt 100% vielleicht nur 70% breit sind und dadurch die seitlichen Pfeile sichtbar werden (wie bei Bild B)?

      Du suchst https://wiki.selfhtml.org/wiki/CSS/Media_Queries

      Wobei ich ja lieber in solchen Fällen die Pfeile in der ursprünglichen Variante darstellen würde.

      Wie kann man eigentlich einen Code bzw. mehrere Codezeilen in einen Beitrag einfügen? Von anderen Foren kenne ich es so, dass es dafür bei den BBCode-Images über dem Texteingabefeld auch einen Button mit einer Raute (#) gibt. So einen sehe ich hier aber nirgends.

      Hast du schon mal die Buttons oberhalb des Eingabetextfeldes ausprobiert?

      Bis demnächst
      Matthias

      --
      Du kannst das Projekt SELFHTML unterstützen,
      indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
      1. Hi,

        Du suchst https://wiki.selfhtml.org/wiki/CSS/Media_Queries

        Wobei ich ja lieber in solchen Fällen die Pfeile in der ursprünglichen Variante darstellen würde.

        oder unter dem Bild. Platz wär da ja vorhanden.

        cu,
        Andreas a/k/a MudGuard

        1. Das ist auch eine gute Idee, danke. Das muss ich mir noch mal genauer überlegen.

      2. Hallo,

        Wie kann man eigentlich einen Code bzw. mehrere Codezeilen in einen Beitrag einfügen?

        Hast du schon mal die Buttons oberhalb des Eingabetextfeldes ausprobiert?

        Da gibt’s z.B. was für Bilder, für Listen, Quelltext, Zitate usw. aber für Code?

        scnr

        Gruß
        Kalk

      3. @@Matthias Apsel

        Wie kann ich es wie auf dem beigefügten Bild hinbekommen, dass Bilder im Hochformat nicht auf die volle Breite auseinander gezogen werden (wie bei Bild A)? Dass sie anstatt 100% vielleicht nur 70% breit sind und dadurch die seitlichen Pfeile sichtbar werden (wie bei Bild B)?

        Du suchst https://wiki.selfhtml.org/wiki/CSS/Media_Queries

        ?? Ich würde sagen, Chris B. sucht max-width.

        Wobei ich ja lieber in solchen Fällen die Pfeile in der ursprünglichen Variante darstellen würde.

        Dafür bräuchte man (vermutlich) media queries. Man will ja nicht, dass bei einer Zwischengröße die Pfeile halb über, halb neben dem Bild sind.

        😷 LLAP

        --
        Wenn der Faschismus wiederkehrt, wird er nicht sagen: „Hallo, ich bin der Faschismus.“ Er wird sagen: „Hört auf zu zählen! Ich habe gewonnen!“
      4. Hab auch schon überlegt, die Pfeile doch wieder in die Bilder einzufügen. Mal schauen.

        Wegen des Codes: Bei den Buttons oberhalb des Eingabetextfeldes war nicht so ganz der richtige dabei. Eventuell könnte es mit dem für Quelltext gehen. Ich teste das später mal.

    2. Hallo,

      Wie kann man eigentlich einen Code bzw. mehrere Codezeilen in einen Beitrag einfügen?

      Code-Abschnitt markieren, dann den Button </> über dem Posting-Textfeld anklicken. Hinter den einleitenden ~~~, die dann eingefügt werden, kannst du auch noch die Sprache des Codes angeben (z.B. html, css, js, php).

      Von anderen Foren kenne ich es so, dass es dafür bei den BBCode-Images über dem Texteingabefeld auch einen Button mit einer Raute (#) gibt.

      Die Raute für Code? Das erschließt sich mir nicht. Da die Raute im Englischen auch als Number Sign bezeichnet wird, assoziiere ich das Zeichen eher mit der Angabe von Zahlenwerten (in Word z.B. als Platzhalter für die Seitenzahl).

      Live long and pros healthy,
       Martin

      --
      Versuchungen sollte man nachgeben. Wer weiß, ob sie wiederkommen.
      1. Ich werde das wegens des Codes beim nächsten mal so probieren, wie von dir beschrieben. Aus Foren von SMF und Elkarte kenne ich für Codes den Raute-Button. Im Texteingabefeld erscheint dann das hier:

        [code][/code]

        Und dazwischen kann man die Codezeilen einfügen, die dann meistens auch durchnummeriert werden.

        1. Hallo,

          Aus Foren von SMF und Elkarte [...]

          was auch immer das ist.

          Im Texteingabefeld erscheint dann das hier:

          [code][/code]

          Das ist BBCode, ein Schema, das vor allem in phpBB-basierten Foren verwendet wird. Hier kommt stattdessen Markdaown zum Einsatz.

          Live long and pros healthy,
           Martin

          --
          Versuchungen sollte man nachgeben. Wer weiß, ob sie wiederkommen.
          1. @@Der Martin

            Das ist BBCode, ein Schema, das von allem in phpBB-basierten Foren verwendet wird.

            Das wollen wir hier nicht.

            Was wollt ihr dann?

            Hier kommt stattdessen Markdaown zum Einsatz.

            Maoam.

            😷 LLAP

            --
            Wenn der Faschismus wiederkehrt, wird er nicht sagen: „Hallo, ich bin der Faschismus.“ Er wird sagen: „Hört auf zu zählen! Ich habe gewonnen!“
            1. Hallo Gunnar,

              Hier kommt stattdessen Markdaown zum Einsatz.

              Maoam.

              war das mein Tippfehler? ... Tatsächlich. Ich bin wohl reif fürs Bett.

              Gute Nacht,
               Martin

              --
              Versuchungen sollte man nachgeben. Wer weiß, ob sie wiederkommen.
        2. Hallo Chris B.,

          Im Texteingabefeld erscheint dann das hier:

          [code][/code]

          Und dazwischen kann man die Codezeilen einfügen,

          Hier kannst du
          ~~~html
          ~~~
          und dazwischen deinen HTML-Quelltext schreiben.

          Code innerhalb einer Zeile wird durch Backticks ` markiert.

          Bis demnächst
          Matthias

          --
          Du kannst das Projekt SELFHTML unterstützen,
          indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.