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

0 24

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

Chris B.
  • grafik
  • html
  • javascript
  1. 1
    Gunnar Bittersmann
    1. 0
      Chris B.
  2. 0
    klawischnigg
    1. 0
      Matthias Apsel
      1. 0
        Chris B.
      2. 1
        klawischnigg
    2. 0
      Chris B.
      1. 0
        Matthias Apsel
        1. 0
          Chris B.
        2. 0
          Chris B.
  3. 0
    Chris B.
    1. 0
      Matthias Apsel
      1. 0
        MudGuard
        1. 0
          Chris B.
      2. 0
        Tabellenkalk
      3. 0
        Gunnar Bittersmann
      4. 0
        Chris B.
    2. 0
      Der Martin
      • css
      • zu diesem forum
      1. 0
        Chris B.
        1. 0
          Der Martin
          1. 0
            Gunnar Bittersmann
            • menschelei
            • zu diesem forum
            1. 0
              Der Martin
        2. 0
          Matthias Apsel
SELF-Forum

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

Chris B. (Versionen)
– Informationen zu den Bewertungsregeln

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

Beitrag melden
–
Informationen zu den Bewertungsregeln

akzeptierte Antworten

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

    Gunnar Bittersmann Homepage des Autors
    +1 Informationen zu den Bewertungsregeln

    @@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!“
    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

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

      Chris B.
      – Informationen zu den Bewertungsregeln

      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

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

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

    klawischnigg
    – Informationen zu den Bewertungsregeln

    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...

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

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

      Matthias Apsel Homepage des Autors
      – Informationen zu den Bewertungsregeln

      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.
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

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

        Chris B.
        – Informationen zu den Bewertungsregeln

        Hallo Mathias,

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

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

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

        klawischnigg
        +1 Informationen zu den Bewertungsregeln

        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...

        Beitrag melden
        +1
        Informationen zu den Bewertungsregeln

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

      Chris B.
      – Informationen zu den Bewertungsregeln

      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. ;)

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

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

        Matthias Apsel Homepage des Autors
        – Informationen zu den Bewertungsregeln

        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.
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

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

          Chris B.
          – Informationen zu den Bewertungsregeln

          Schon passiert. Du warst mit der AW schneller als ich mit dem Schreiben. :)

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

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

          Chris B.
          – Informationen zu den Bewertungsregeln

          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! 👍

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

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

    Chris B.
    – Informationen zu den Bewertungsregeln

    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.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

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

      Matthias Apsel Homepage des Autors
      – Informationen zu den Bewertungsregeln

      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.
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

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

        MudGuard Homepage des Autors
        – Informationen zu den Bewertungsregeln

        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

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

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

          Chris B.
          – Informationen zu den Bewertungsregeln

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

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

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

        Tabellenkalk
        – Informationen zu den Bewertungsregeln

        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

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

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

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@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!“
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

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

        Chris B.
        – Informationen zu den Bewertungsregeln

        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.

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

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

      Der Martin
      – Informationen zu den Bewertungsregeln

      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.
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

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

        Chris B.
        – Informationen zu den Bewertungsregeln

        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.

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

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

          Der Martin (Versionen)
          – Informationen zu den Bewertungsregeln

          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.
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

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

            Gunnar Bittersmann Homepage des Autors (Versionen)
            – Informationen zu den Bewertungsregeln

            @@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!“
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

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

              Der Martin
              – Informationen zu den Bewertungsregeln

              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.
              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

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

          Matthias Apsel Homepage des Autors
          – Informationen zu den Bewertungsregeln

          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.
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln