Zum Inhalt springen

Lupe auf das Bild

Erstellt am 24. Februar 2013 · 8 Antworten · letzte Antwort am 6. März 2013

Tags: Inhaltselemente, Bilder, Frage

WebNancy ·

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:

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
            }
         
         }
         
          }
       }
    }
  }
Gregor ·

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.

WebNancy ·

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 🙂

Thorsten1508 ·
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:
#114092

Vielen Dank

WebNancy ·

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

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

Thorsten1508 ·
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

zeroalpha ·

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.

WebNancy ·

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:

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