Lightbox-Vorschaubild mit Lupe?

filfil

Ist jemandem ein LB-Plugin bekannt, bei dem die Vorschaubilder automatisch mit einem Lupen-Symbol o.Ä. versehen werden?

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

marX

Das kann man sich per CSS recht schnell selbst basteln. Das Markup sieht so aus:

HTML

<a href="#" rel="lightbox"><img src="#" alt="" /></a>

Hier kannst du dann einfach dem <a> ein Lupensymbol als transparentes Hintergrundbild geben (GIF oder PNG):

Code

a[rel=lightbox] {
background-image:url(img/lupe.png);
}

filfil

Kommt dieser Code in die style.css des aktiven Themes? Wenn ja, wohin da?

Zitat

HTML-Code:
[COLOR=#008000]<a href=[COLOR=#0000ff]"#"[/COLOR] rel=[COLOR=#0000ff]"lightbox"[/COLOR]>[/COLOR][COLOR=#800080]<img src=[COLOR=#0000ff]"#"[/COLOR] alt=[COLOR=#0000ff]""[/COLOR] />[/COLOR][COLOR=#008000]</a>[/COLOR]

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

Zitat

Code:
a[rel=lightbox] {
background-image:url(img/lupe.png);
}

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

Zitat

url(img/lupe.png)

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

marX

So sieht im Normalfall der Code für ein Bild mit Lightbox-Effekt auf der HTML-Seite aus:

HTML

<a href="#" rel="lightbox"><img src="#" alt="" /></a>

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

a[rel=lightbox] {
background-image:url(img/lupe.png);
}

Den Pfad und Bildnamen musst du selbstverständlich anpassen, so dass er zu deinem Lupen-Icon führt.

filfil

Also ich habe jetzt folgendes in die style.css eingefügt:

Code

a[rel=lightbox] {
  background-image: http://www.espritdescalier.de/Lupe.png;
  }

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?

marX

Code

a[rel=lightbox] {
  background-image:[B][COLOR="#ff0000"]url([/COLOR][/B]http://www.espritdescalier.de/Lupe.png[COLOR="Red"][B])[/B][/COLOR];
  }

Einfach mal ne Doku lesen: ;-)
background-image: Hintergrundbild: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

Zitat

Da ich keine Ahnung habe, wo es genau einzufügen ist, habe ich es ganz ans Ende gesetzt.

Das ist okay.

filfil

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?

marX

Zitat von filfil

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

Hast du dir den Link zur Erklärung von "background" angesehen? Da gibts auch background-position und background-repeat.

Zitat

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?

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.

filfil

Zitat

Hast du dir den Link zur Erklärung von "background" angesehen? Da gibts auch background-position und background-repeat.

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?

marX

Zitat von filfil

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.

background-position: Hintergrund positionieren: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

Zitat

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"?

background-position:bottom right;

Zitat

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?

Vergib dem <a>-Element die Klasse "Lupe". Genau dafür sind Klassen da.

HTML

<a class="lupe" href="#" rel="lightbox"><img src="#" alt="" /></a>

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

filfil

Habe den Hieb mit dem Zaunspfahl verstanden und wechsle reuig ins XHTML-Forum ... Danke, trotzdem.

eric42

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

metoo

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 :)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Lightbox-Vorschaubild mit Lupe?

Jetzt mitmachen!