---
title: "Lupe auf das Bild"
url: "https://www.typo3.net/d/113999-lupe-auf-das-bild"
source: "typo3.net"
tags: ["TYPO3","TypoScript","Bilder","Frage","Inhaltselemente"]
created: "2013-02-24"
last_reply: "2013-03-06"
replies: 8
solved: false
page: 1
pages: 1
lang: "de"
---

# Lupe auf das Bild

TYPO3 › TypoScript · 8 Antworten · gestartet 2013-02-24

## Eröffnungsbeitrag

**WebNancy** · 2013-02-24 · [Beitrag #1](https://www.typo3.net/d/113999-lupe-auf-das-bild/1)

Hallo an Alle,
ich arbeite schon einige Zeit mit TYPO3 und bin, denke ich, relativ fit. Allerdings könnte dies besser sein und ab und an kommt man doch an das Ein oder Andere Problem. Daher finde ich dieses Forum sehr gut (habe hier schon sehr viel gelernt) und habe folgendes Problem: ich möchte die Lupe, welche bei der Aktivierung beim "Klick vergrößern" erscheint auf das Bild haben anstatt darunter. Dafür gibt es schon diverse Codes, Tutorials etc. Aber bei mir klappt das immer leider nur so, dass das Bild entweder gar nicht mehr da ist oder die Lupe weg ist oder die Lupe rechts neben dem Bild. Eine für mich brauchbare Lösung war nicht dabei :(. Habt ihr einen Rat?

Hier mein Code:

```typoscript
lib.tt_content.image.20 < tt_content.image.20
# Die Webseite darstellen
   tt_content.image.20 {
          caption {
            1 {
              required >
              prepend = TEXT
              prepend {
                 if.isTrue.field = image_zoom
                 #wrap = | 
                 wrap = <div class="zoom">|</div>
                 value = <img src="fileadmin/images/zoom.gif" alt="vergrößern" /><br/>

            typolink {
              parameter.override.cObject = IMG_RESOURCE
              parameter.override.cObject.file {
              #import.current = 1
                     import = uploads/pics/
                     import.field = image
                    import.listNum.stdWrap.data = register:IMAGE_NUM
                }
              parameter.override.cObject.file.maxW = {$plugin.perfectlightbox.lightBoxMaxW}
              parameter.override.cObject.file.maxH = {$plugin.perfectlightbox.lightBoxMaxH}    
              parameter.override.if.isTrue.field = image_zoom
              parameter.override.if.isFalse.field = image_link

              #ATagParams.if.isTrue.field = image_zoom
             #ATagParams.if.isFalse.field = image_link
              ATagParams = rel="lightbox"
              #userFunc = tx_perfectlightbox->useGlobal
            }
         
         }
         
          }
       }
    }
  }
```

## Antworten

### [#2](https://www.typo3.net/d/113999-lupe-auf-das-bild/2) · Gregor · 2013-02-25

Lass doch einfach Bild und Zoom-Icon-Div mit dem Bild darin in einem Container rendern. Also ein Wrap für Bild und Icon.
Den umschließenden Container dann mit "position:relative" versehen und für den Zoom-Container "position:absolute;right:XY,bottom:XY". Dann wird das Icon immer schön über deinem Bild platziert.

### [#3](https://www.typo3.net/d/113999-lupe-auf-das-bild/3) · WebNancy · 2013-02-25

Hallo Gregor,
danke für den Hinweis.
Habe es zwar jetzt ein wenig anders gelöst, aber manchmal sieht man einfach den Wald vor lauter Bäumen nicht. :o
Nun klappt alles wie gewollt :)

### [#4](https://www.typo3.net/d/113999-lupe-auf-das-bild/4) · Thorsten1508 · 2013-03-04

> **WebNancy schrieb:**
>
> Hallo Gregor,
> danke für den Hinweis.
> Habe es zwar jetzt ein wenig anders gelöst, aber manchmal sieht man einfach den Wald vor lauter Bäumen nicht. :o
> Nun klappt alles wie gewollt :)

Hallo,
wäre schön, wenn Du deine Lösung auch posten würdest. Dann könnten andere evtl. auch davon profitieren...

Ich hänge z. B. gerade an einem ähnlichen Problem:
[/d/114092-klick-vergroessern-mit-verlinktem-lupensymbol-link-geht-immer-nur-auf-letztes-bild](https://www.typo3.net/d/114092-klick-vergroessern-mit-verlinktem-lupensymbol-link-geht-immer-nur-auf-letztes-bild)

Vielen Dank

### [#5](https://www.typo3.net/d/113999-lupe-auf-das-bild/5) · WebNancy · 2013-03-06

hallo thorsten,
ja klar. ich vergass. sorry. hier mein code:

```typoscript
tt_content.image.20 {
1 {
  stdWrap.innerWrap.cObject = COA
  stdWrap.innerWrap.cObject {
  	10 = TEXT
  	10.value = |
  	20 = TEXT
  	20.data = TSFE:lastImageInfo|origFile
  	20.wrap = <div class="zoom"><a href="|" class="group"
  	30 = TEXT
  	30.data = field:uid 
  	30.wrap = rel="sb|" 
  	40 = TEXT
  	40.value = ><img src="fileadmin/images/zoom.gif" alt="" title="" /></a></div>
  }
  stdWrap.innerWrap {
    if.isTrue.field = image_zoom
    ifEmpty.field = image_link
  }
}
}
```

allerdings funkltioniert das dann nicht mehr mit der lightbox. aber das ist eine andere sache o.O
viel erfolg

### [#6](https://www.typo3.net/d/113999-lupe-auf-das-bild/6) · Cubana13 · 2013-03-06

Hallo zusammen,

hier wäre auch noch eine Lösung über CSS.
Schaut euch mal das rechte Bild an.

Gruß Carsten

<http://demo.espend.de/index.php?id=37>

### [#7](https://www.typo3.net/d/113999-lupe-auf-das-bild/7) · Thorsten1508 · 2013-03-06

> **Cubana13 schrieb:**
>
> Hallo zusammen,
>
> hier wäre auch noch eine Lösung über CSS.
> Schaut euch mal das rechte Bild an.
>
> Gruß Carsten
>
> <http://demo.espend.de/index.php?id=37>

Hallo Carsten,
das is ne ganz witzige Methode. Nur leider ist die Lupe hier erst beim Hover zu sehen. Die Lupe soll aber immer sichtbar sein, als Zeichen, dass das Bild angeklickt und gezoomt werden kann.

Gruß Thorsten

### [#8](https://www.typo3.net/d/113999-lupe-auf-das-bild/8) · zeroalpha · 2013-03-06

Hallo Thorsten, die Lupe befindet sich bereits ohne Hover auf dem Bild.

Immer links unten in der Ecke, beim Hover wird sie dann mittig größer dargestellt. Ist auf den ersten Blick schwer zu erkennen. Aber lässt sich mit einer größeren Lupe sicher besser darstellen.

### [#9](https://www.typo3.net/d/113999-lupe-auf-das-bild/9) · WebNancy · 2013-03-06

also ich finde die idee gut und habe auch die lupe im kleinformat gesehen.

allerdings ist mir aufgefallen, dass ich meinen css-code vergessen habe zu posten. sorry. hier ist er:

```css
.zoom {
display: block; 
margin-top: -25px; 
margin-bottom: 0px; 
padding-right: 2px; 
text-align: right; 
text-decoration: none; 
border: transparent;
}
```

---

Quelle: „Lupe auf das Bild“, typo3.net, https://www.typo3.net/d/113999-lupe-auf-das-bild
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.
