Click-Enlarge mit Lupe

Kategorie: TYPO3
Publikationsdatum: 15.04.2011
Die Funktion Click-Enlarge gibt es in TYPO3 schon standardmäßig. Fügt man ein Bild ein, gibt es eine Option Klick-Vergrößern. Mit Hilfe dieses Flags wird entschieden, ob ein Bild beim daraufklicken in seiner Originalgröße in einem PopUp geöffnet wird oder nicht. Nun ist es aber benutzerfreundlicher, wenn angezeigt wird, ob so eine Vergrößerung überhaupt vorhanden ist. Sprich man setzt eine Lupe neben das Bild, wenn eine Vergrößerung erwünscht ist.

Als erstes wird das gesamte Bild mittels TypoScript von eine Zusatz-Div umschlossen. Dieses Zusatz-Div wird dann später im Stylesheet angepasst.
TypoScript
  1. tt_content.textpic.stdWrap.dataWrap = <div class="clickenlarge-{field:image_zoom}" > | </div>
  2. tt_content.image.stdWrap.dataWrap = <div class="clickenlarge-{field:image_zoom}" > | </div>
Im Stylesheet wird nun das Zusatz-Div formatiert. Man gibt ihm eine Lupe als Hintergrund und richtet diese entsprechend aus.
CSS
  1. /* Bild Click-Enlarge mit Lupe */
  2. div.clickenlarge-1 img {
  3. padding-right: 20px;
  4. background-image: url(../images/zoom.png);
  5. background-repeat: no-repeat;
  6. background-position: right bottom;
  7. cursor: pointer;
  8. }
  9.  
  10. /* Bild ohne Lupe (Content) */
  11. div.clickenlarge-1 .bodytext img {
  12. padding: 0;
  13. background-image: none;
  14. }
Stichwörter: TYPO3, Click-Enlarge, Lupe
 
 
NACH OBEN