Wie platziere ich ein Lupen-Icon in Lightbox-Vorschaubild?

Flupke · #1 (**permalink**) 09.09.2008, 19:27

Ich versuche, auf meiner Seite ein Lupen-Icon in meine Lightbox-Vorschaubilder zu integrieren.
Zu diesem Zweck habe ich bereits folgenden (nicht auf meinem Mist gewachsenen) Code in meine "style-css" (Wordpress 2.6.2) eingefügt:

Code:

a[rel=lightbox] {background-image:url(http://www.espritdescalier.de/Lupe.png); background-repeat:no-repeat;padding-left:20px;}

Jetzt erscheint zwar das Lupen-Icon, jedoch noch nicht an der gewünschten Stelle, nämlich rechts unten in jedem Vorschaubild. Nun habe ich versucht, mit Hilfe von CSS 4 You - The Finest in Stylesheets und Firebug (untersuchen - layout) die Lupe richtig zu positionieren, aber meine Kenntnisse sind offenbar noch nicht ausreichend, so dass es mir leider nicht gelingt. Die Lupe landet überall, nur nicht da, wo sie soll. Wäre jemand bitte so nett, mir dabei behilflich zu sein? Danke im Voraus.

IChao · #2 (**permalink**) 09.09.2008, 23:57

Wahrscheinlich müsstest du das Icon absolut positionieren. Wo auch immer es jetzt ist, ich finde es deinen Link folgend nicht.

Deine Seite lädt sehr langsam.

Flupke · #3 (**permalink**) 10.09.2008, 00:07

Das Icon ist gleich auf der Startseite beim ersten Artikel:

Ich teste es nur bei diesem Artikel, deshalb ist es bei den anderen nicht zu sehen. Ich hätte nun also gern die Lupe diagonal nach unten in die rechte untere Ecke des Vorschaubildes verschoben. Nur, wie?

IChao · #4 (**permalink**) 10.09.2008, 00:25

ach da.
wäre das so recht?

Code:

a[rel=lightbox] {
...
background-position:right bottom;
float:left;
}

Flupke · #5 (**permalink**) 10.09.2008, 00:47

Danke, schon viel besser:

Um nun aber nicht so viel Platz auf Kosten des Textes zu verschwenden, hätte ich die Lupe gern IM Bild, so wie ich es jetzt rot angedeutet habe. Das Ende des Lupengriffes soll in der äußersten rechten unteren Ecke beginnen und in Richtung Bildmitte zeigen. Ist das auch so unkompliziert einstellbar?

IChao · #6 (**permalink**) 10.09.2008, 01:07

Nicht einfach. Du müsstest dem Link innen anliegenden img

Code:

a[rel=lightbox] img {

position:relative; 
z-index:-1;
}

geben, damit das background-image des Links (die Lupe) in den foreground rückt. Geht im Firefox, woanders vielleicht nicht.

Dann kannst du dem Icon-PNG im Grafikprogramm etwas mehr unsichtbaren Rand verpassen, damit es mit right bottom (bzw. left bottom) an der richtigen Stelle angezeigt wird (oder zum Testen: background-position: 90% 90%).

Viel Spaß noch beim Experimentieren, ich gehe nun schlafen. Der Tag war sehr lang. Manchmal sind sie so, einfach länger. Weiß auch nicht, warum. Hat sicher keine Bedeutung und keine Bewandtnis. Aber seltsam, schon.

Edit: Code nun etwas klarer.

Flupke · #7 (**permalink**) 10.09.2008, 03:44

Habe leider noch kein zufriedenstellendes Ergebnis erzielen können.

Ein sehr schönes Beispiel für meine Wunschvorstellung lässt sich übrigens bei "focus.de" betrachten, wo man auch Lightbox-Vorschaubilder in Kombination mit einem semitransparenten Lupen-Icon verwendet:

Der Code dafür lautet dort:

PHP-Code:


			
<div class="w467">

<div class="f-xl pd-t17">

<div class="box-article-1 mg-t3">

<div class="box-article-1i">

<div style="overflow: hidden; height: 147px;">

<script type="text/javascript">

</script>

<div style="height: 147px;">

<img class="pc-art-top" alt="Kajo Wasserh�vel wird neuer SPD-Bundesgesch�ftsf�hrer" src="http://p3.focus.de/img/gen/E/H/HBEHxkt7_Pxgen_r_220xA.jpg"/>

<div id="ct_loadLB_2" class="box-lb-loader" style="display: none;"> </div>

<div id="ct_icLB_2" style="display: block;">

</div>

<div id="ct_loadLB_3" class="box-lb-loader" style="display: none;"> </div>

<div id="ct_icLB_3" style="display: block;">

<div onclick="javascript:getomni('','');" style="position: relative; left: 0px; top: -167px; height: 147px; width: 221px; opacity: 0.8; display: block; z-index: 980;">

<a onmouseout="document.getElementById('lupe_trans2').style.display='block';document.getElementById('lupe_akt2').style.display='none'" onmouseover="document.getElementById('lupe_trans2').style.display='none';document.getElementById('lupe_akt2').style.display='block'" rel="lightbox" credit="dpa" descr="Kajo Wasserhövel wird Bundesgeschäftsführer der SPD" href="http://p3.focus.de/img/gen/E/H/HBEHxkt7_Pxgen_r_700xA.jpg?http://p3.focus.de/img/gen/E/H/HBEHxkt7_Pxgen_r_1100xA.jpg?http://p3.focus.de/img/gen/E/H/HBEHxkt7_Pxgen_r_1300xA.jpg">

<img height="147" border="0" width="221" title="vergrößern" src="http://p3.focus.de/fol/pics/dummypics/blank.gif"/>

</a>

</div>

</div>

</div>

</div>

<div class="box-pictxt f-s c-b bgc-g1">Kajo Wasserhövel wird Bundesgeschäftsführer der SPD</div>

</div>

</div>

Da ist ja offenbar auch eine "onmouse..."-Funktion dabei, die zur Folge hat, dass sich die Farbe der Lupenumgebung verändert, wenn mit der Maus drüberfährt. Die brauche ich nicht. Aber es kommt dort auch ein "z-index: 980;" vor. Allerdings nicht negativ. Bei "z-index:-1;" sind die Bilder nicht mehr verlinkt. Sobald ich aus "-1" eine "1" mache, klappt es wieder.

Ließe sich aus obigem Code eine vereinfachte Variante für mich ableiten?

Zitat:

damit das background-image des Links (die Lupe) in den foreground rückt

Ganz naive Frage: ließe sich nicht gleich ein "foreground"-image definieren, das sozusagen über dem anderen Bild schwebt? So sieht es beim Focus auch irgendwie aus, und so "schwebt" es mir auch vor ...

IChao · #8 (**permalink**) 10.09.2008, 09:26

Sicher. Nimm einfach ein zweites Bild mit in den Link und lege das zweite über das erste. Wenn das nicht geht, solltest du dir überlegen, mal einen Webdesigner zu beauftragen. Macht focus auch.

Die Frage, die ich hier reizvoll zu beantworten fand, war, wie man ein background-image dazu bringt, hier sinnvoll zu sein. Der Rest ist Arbeit, und das ist dein Teil.

Flupke · #9 (**permalink**) 11.09.2008, 21:15

Na, dann mal ran an die Arbeit. Danke.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
jcarousel + jquery lightbox plugin	Thorolf	Javascript & Ajax	0	23.02.2011 14:18
Lightbox mit zweiter CSS Datei funktioniert nicht	T4ke	CSS	12	11.12.2007 20:20
Lightbox 2 wie Lightbox 1 öffnen	.wired	Javascript & Ajax	3	31.10.2007 23:35