1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Lightbox-Vorschaubild mit Lupe?

Dieses Thema im Forum "Plugins und Widgets" wurde erstellt von filfil, 3. September 2008.

  1. filfil

    filfil Well-Known Member

    Registriert seit:
    7. September 2007
    Beiträge:
    71
    Zustimmungen:
    0
    Ist jemandem ein LB-Plugin bekannt, bei dem die Vorschaubilder automatisch mit einem Lupen-Symbol o.Ä. versehen werden?
     
  2. marX

    marX Well-Known Member
    Ehrenmitglied

    Registriert seit:
    5. Oktober 2006
    Beiträge:
    12.943
    Zustimmungen:
    0
    Das kann man sich per CSS recht schnell selbst basteln. Das Markup sieht so aus:
    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Hier kannst du dann einfach dem <a> ein Lupensymbol als transparentes Hintergrundbild geben (GIF oder PNG):
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
  3. filfil

    filfil Well-Known Member

    Registriert seit:
    7. September 2007
    Beiträge:
    71
    Zustimmungen:
    0
    Kommt dieser Code in die style.css des aktiven Themes? Wenn ja, wohin da?

    Muss dieser Code dann immer dem jeweiligen Bild beigefügt werden?

    Ist in diesem Abschnitt die Grafik bereits impliziert oder muss ich an dieser Stelle eine Adresse eingeben?

    Leider ziemlich dämliche Fragen, schätze ich. Danke umso mehr für die Geduld!
     
  4. marX

    marX Well-Known Member
    Ehrenmitglied

    Registriert seit:
    5. Oktober 2006
    Beiträge:
    12.943
    Zustimmungen:
    0
    So sieht im Normalfall der Code für ein Bild mit Lightbox-Effekt auf der HTML-Seite aus:
    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Das ist so, und darauf baut mein Code auf.

    Dieser Code kommt in die style.css des Themes und muss eventuell noch angepasst werden. Das ist nur beispielhaft wie es prinzipiell funktioniert.
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Den Pfad und Bildnamen musst du selbstverständlich anpassen, so dass er zu deinem Lupen-Icon führt.
     
  5. filfil

    filfil Well-Known Member

    Registriert seit:
    7. September 2007
    Beiträge:
    71
    Zustimmungen:
    0
    Also ich habe jetzt folgendes in die style.css eingefügt:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Da ich keine Ahnung habe, wo es genau einzufügen ist, habe ich es ganz ans Ende gesetzt.

    Leider tritt der gewünschte Effekt noch nicht ein. Was läuft falsch?
     
  6. marX

    marX Well-Known Member
    Ehrenmitglied

    Registriert seit:
    5. Oktober 2006
    Beiträge:
    12.943
    Zustimmungen:
    0
  7. filfil

    filfil Well-Known Member

    Registriert seit:
    7. September 2007
    Beiträge:
    71
    Zustimmungen:
    0
    So, habe die Dokumentation gelesen und das Fehlende ergänzt.

    Jetzt erscheinen 12,5 Lupen-Icons in einer Reihe ganz unten auf der Seite, unter dem letzten Bild.

    Wie bekomme ich die nun in die rechte untere Ecke eines jeden Vorschaubildes? Ich stoße hier wirklich an meine Grenzen.

    ...

    Ich habe gerade festgestellt, dass die Lupen nicht zufällig gerade rechts unten auf der Seite angezeigt werden, sondern exakt auf einem Textlink, der zu einem mit Lightbox geöffneten Bild führt. Damit sich dieser aber in LB öffnet, musste ich rel="lightbox" einfügen, was ich bei normalen Bildern nicht machen muss, da ich das Plugin Lightbox 2 benutze, das seit einiger Zeit einen "auto-lightboxing code" enthält. Vielleicht funktioniert Dein Code deshalb nicht?
     
    #7 filfil, 6. September 2008
    Zuletzt bearbeitet: 6. September 2008
  8. marX

    marX Well-Known Member
    Ehrenmitglied

    Registriert seit:
    5. Oktober 2006
    Beiträge:
    12.943
    Zustimmungen:
    0
    Hast du dir den Link zur Erklärung von "background" angesehen? Da gibts auch background-position und background-repeat.

    Die Lupe erscheint nur bei Links, die das rel="lightbox" enthalten, ja. Anders gehts nicht, an irgendwas muss CSS ja erkennen, ob dieser Link zur Lightbox führt oder nicht. Das kann entweder das rel-Attribut sein, eine Klasse oder irgendein anderes identifizierendes Merkmal.
     
  9. filfil

    filfil Well-Known Member

    Registriert seit:
    7. September 2007
    Beiträge:
    71
    Zustimmungen:
    0
    Jetzt ja. Vorher habe ich nicht gesehen, dass in der Seitenleiste noch weiterführende Stichworte zum Thema sind. Sorry und danke.

    Somit habe ich "repeat" erfolgreich abstellen können.

    Was nun das Positionieren angeht, habe ich mich auch versucht, indem ich "margin-bottom"- und "margin-right"-Werte eingefügt habe. Dies führte jedoch noch nicht zum gewünschten Ergebnis. Ebenso wenig wie das Einfügen verschiedener "position:relative;right:0px;bottom:0px;"-Werte.

    Das Einfügen eines "padding-right"-Wertes bewirkte allerdings etwas in die Richtung dessen, was ich mir vorstelle. Die Lupe erscheint nun oben neben dem Bild, vor dem ersten Buchstaben des Artikels und reagiert auf einen Klick mit Vergrößerung des nebenstehenden Bildes. Welche Werte benötige ich aber, um die Lupe INS Bild zu bekommen? Ich habe es auch mit Negativwerten probiert, aber da verschwindet die Lupe.

    Sind exakte Werte nicht problematisch, wenn die Vorschaubilder nicht immer das gleiche Format haben? Gibt es da nicht eine Möglichkeit zu definieren: "immer unten rechts"?

    Damit die Lupe nicht auch auf einem Textlink erscheint, habe ich aus rel="lightbox" rel="lupe" gemacht. Somit ist die Lupe von den Textlinks verschwunden, in die ich ja trotz aktiviertem Auto-Lightboxing rel="lightbox" per Hand einfügen muss. Jetzt erscheint die Lupe nur noch bei Bildern, die mit rel="lupe" versehen sind. Problem: Trotz aktiviertem Auto-Lightboxing, fällt beim Hinzufügen von rel="lupe" der Lightbox-Effekt aus. Darf es nur einen Bezug geben? Was lässt sich da machen?
     
  10. marX

    marX Well-Known Member
    Ehrenmitglied

    Registriert seit:
    5. Oktober 2006
    Beiträge:
    12.943
    Zustimmungen:
    0
    background-position: Hintergrund positionieren: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

    background-position:bottom right;

    Vergib dem <a>-Element die Klasse "Lupe". Genau dafür sind Klassen da.
    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Und dann noch ein wenig Basiswissen CSS, weil das alles primär nichtsmit WP zu tun hat:
    CSS 4 You - The Finest in Stylesheets: Workshop CSS: Teil 1 - Basiswissen
    SELFHTML: Stylesheets / CSS-Formate definieren / Zentrale Formate definieren
     
  11. filfil

    filfil Well-Known Member

    Registriert seit:
    7. September 2007
    Beiträge:
    71
    Zustimmungen:
    0
    Habe den Hieb mit dem Zaunspfahl verstanden und wechsle reuig ins XHTML-Forum ... Danke, trotzdem.
     
  12. eric42

    eric42 Member

    Registriert seit:
    11. Mai 2006
    Beiträge:
    11
    Zustimmungen:
    0
    Jetzt ist Lightbox neu...

    Habe eure interessante Diskussion nachvollzogen - und bin über so viel Infos begeistert.

    Allerdings hat das nun bei mir einen großen Haken: Die (vermutlich aktuelle) Version von Lightbox macht nicht rel="lightbox" sondern z.B.
    rel="lightbox[210]" und beim nächsten Bild rel="lightbox[222]"

    Offenbar ist das gleich die Bildauswahl. Das führt ja nun dazu, dass
    das ja nicht im CSS so definieren kann.

    Habe jetzt eine Weile herumprobiert das einfach mit einem class="lupe"
    abzufangen - aber mit ohne Erfolg. Tut mir leid, ich bin auch kein
    CSS-Könner.

    Gibt es denn zwischenzeitlich nicht eine einfacherere Möglichkeit,
    ein Lupensymbol mit einzubauen?

    Grüße + vielen Dank!

    eric
     
  13. metoo

    metoo Active Member

    Registriert seit:
    18. August 2010
    Beiträge:
    39
    Zustimmungen:
    0
    Hallo,
    ich hänge mich dran:
    Ich habe das Nexgen Gallery Plugin in meinem Blog und würde ein Thumbnail Bild im Text gerne durch einen Klick innerhalb des Textes vergrößern lassen.
    (so wie im Screenshot)

    Gibt es hier mittlerweile ein Plugin, oder eine andere Möglichkeit dies umzusetzen?

    Danke :)
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden