Zum Inhalt springen

RTELightBox Lupensymbol per CSS

Erstellt am 22. November 2011 · 2 Antworten · letzte Antwort am 17. Januar 2012

Tags: Bilder, HTML & CSS, Frage

harry7922 ·

Hallo zusammen,

ich habe die Ext RTELightBox im Einsatz um per RTE eingefügte Bilder per Klick in einer Lightbox vergrößern zu lassen.
Das klappt soweit auch wunderbar.

Allerdings möchte ich nun bei Bildern, die ich vergrößern lasse (click-enlarge-Haken gesetzt bei dem Bildobjekt) der Besucher ein Lupensymbol angezeigt bekommt.
Dieses so hatte ich de Hoffnung lasse ich "einfach" über CSS einfügen.

Dazu müsste zwischen Nach dem IMG innerhalb des Links ein CSS-Objekt eingefügt werden.

Bisher schaut der Quellcode so aus:
<div id="c01" class="csc-default">
<div class="csc-textpic csc-textpic-center csc-textpic-above">
<div class="csc-textpic-imagewrap csc-textpic-single-image" style="width: 435px;">
<a href="uploads/pics/Bild.jpg" rel="lightbox-01">
<img src="http://www......com/typo3temp/pics/123.jpg" alt="" border="0" height="321" width="435">
</a>

</div>
</div><div class="csc-textpic-clear"></div>
</div>

Jetzt müsste zwischen den IMG-Tag ind das schliessende a-Tag ein span eingefüt werden:

...
<a href="uploads/pics/Bild.jpg" rel="lightbox-01">
<img src="http://www......com/typo3temp/pics/123.jpg" alt="" border="0" height="321" width="435">
<span class="more">Weiterlesen</span>
</a>
...

Ich habe nun schon etliches über die UserFunc versucht und auch das WWW danach durchforstet, kann aber nichts finden.

Folgendes im Setup, dachte ich müsste mir doch weiterhelfen - macht aber nichts im Quellcode:

lib.parseFunc_RTE.tags.img.postUserFunc.imageLinkWrap.typolink.wrap = | <span class="more">Weiterlesen</span>

Ich weiß nicht mehr weiter und wäre Euch für jede Hilfestelung dankbar!

Danke + Grüße
Hardy

sventb ·

Hallo Hardy,

hast du das Icon schon bei den "normalen" Bildern, also bei denen, die du ganz normal über ein Bild-Inhaltselement angelegt hast?
Dort funktioniert es so (je nach eingesetzter Lightbox sieht das rel-Attribut ein wenig anders aus):

tt_content.image.20.1.imageLinkWrap.typolink {
	wrap = <span class="expand" title="Bild vergr&ouml;&szlig;ern"></span>
	wrap.if.isTrue.field = image_zoom
	ATagBeforeWrap = 1
	ATagParams = class="lightbox" rel="shadowbox"
	ATagParams.override = class="lightbox" rel="shadowbox[sb{field:uid}]"
}

Diesen Code müsstest du für den RTE umschreiben, also wahrscheinlich auf

lib.parseFunc_RTE.tags.img.postUserFunc.imageLinkWrap.typolink

Viele Grüße
Sven

harry7922 ·

Hallo Sven,

vielen Dank für die Hilfe!
Anbei meine Lösung:

lib.parseFunc_RTE.tags.img.postUserFunc.imageLinkWrap.typolink {
wrap = <div class="wie-auch-immer"> | </div>
wrap.if.data = parameters:alt
wrap.if.equals = click-enlarge image
}

Grüße
Hardy