Guten Abend,
ich habe die Extension pmkslimbox_2.1.0 erfolgreich installieren können, möchte nun aber zusätzlich, dass unter jedem Bild, welches auf Klick vergrössert werden kann, ein kleines Lupen-Icon angezeigt wird. Alternativ auch die Lupe im rechten unteren Eck des Bildes.
Die in div. Foren und TYPO3-Kochbüchern gefundenen Lösungen funktionieren alle nicht, da:
1. bei Klick auf die Lupe nicht die JS-Funktion der pmkslimbox-Extension verwendet wird und
2. die Lupe nicht rechtsbündig zum Bild hin dargestellt wird.
Wie kann ich das Problem lösen? Hat jemand eine Idee oder gar vielleicht eine Lösung?
Vielen Dank und Grüße,
Philipp
Hallo Philipp,
weiß nicht, ob das bei dir noch aktuell ist, aber ich hatte ähnliches Problem und dafür auch eine Lösung gefunden:
tt_content.image.20.caption.1 {
required >
prepend = COA
prepend {
if.isTrue.field = image_zoom
10 = TEXT
10.value = vergrößern
10.wrap = <div class="click-enlarge">|</div>
10.typolink {
target = {$styles.content.links.target}
extTarget = {$styles.content.links.extTarget}
# This returns a link, pointing to the path + name of the original image.
# or to the path + name of the resized lightbox image (if maxH or maxW is reached.)
parameter.cObject = IMG_RESOURCE
parameter.cObject.file.import.data = TSFE:lastImageInfo|origFile
parameter.cObject.file.maxW = {$plugin.pmkslimbox.slimBoxMaxW}
parameter.cObject.file.maxH = {$plugin.pmkslimbox.slimBoxMaxH}
# Except if the linkfield is not empty
parameter.override.field = image_link
parameter.override.listNum.stdWrap.data = register : IMAGE_NUM_CURRENT
parameter.override.if.isTrue.field = image_link
# Add the "rel" attribute needed to activate the lightbox effect.
ATagParams = rel="lightbox"
ATagParams.override = rel="lightbox[sb{field:uid}]"
ATagParams.override.if.isTrue = {$plugin.pmkslimbox.imgtext.navigable}
ATagParams.insertData = 1
ATagParams.if.isTrue.field = image_zoom
}
}
}
Trick dabei ist, das man kein Bild einfügt, weil sonst dieses als click-enlarge angezeigt wird. Natürlich kann man über CSS z.B. vor den Text noch ein Lupensymbol bauen:
div.click-enlarge {
text-align: right;
}
div.click-enlarge a {
background: url(img/lupe.png) no-repeat;
padding-left: 26px;
}
Vielleicht hilft dir das ja weiter...
Gruß
Chris