Zum Inhalt springen

Lupe auf Bild

Erstellt am 20. Dezember 2010 · 3 Antworten · letzte Antwort am 12. März 2011

Tags: Frage

bravestar ·

Hallo zusammen,

ich weiß, dass das Thema schon oft diskutiert wurde, aber ich stehe grad bei meiner Lösung etwas auf dem Schlauch. Bisher bekomme ich die Lupe auf das Bild:

tt_content.image.20 {
1 {
  stdWrap.innerWrap( 
    |<div class="lupe"><a href="HIER MUSS NOCH WAS HIN" class="group"><img src="fileadmin/images/icons/lupe.png" alt="" title="" /></a></div>
  )
  stdWrap.innerWrap {
    if.isTrue.field = image_zoom
    ifEmpty.field = image_link
  }
}
}

Wie bekomme ich jetzt bei dem href="HIER MUSS NOCH WAS HIN" den Pfad zum dem Originalbild hin? Ich weiß das es TSFE:lastImageInfo|origFile gibt. Aber wenn ich das da rein setze, dann funktioniert das nicht, weil dann ja zwei | dabei sind.

Gruß
Stefan

bravestar ·

So die Lösung ist gefunden:

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="lupe"><a href="|" class="group"
  	30 = TEXT
  	30.data = field:uid 
  	30.wrap = rel="sb|" 
  	40 = TEXT
  	40.value = ><img src="fileadmin/images/icons/lupe.png" alt="" title="" /></a></div>
  }
  stdWrap.innerWrap {
    if.isTrue.field = image_zoom
    ifEmpty.field = image_link
  }
}
}
ISS ·

Hallo bravestar

Danke das du die Lösung mitgeteilt hast.
Jetzt müsstest du nur noch auf Gelöst umschalten 😉

Gruss,
ISS

stevee ·

Hallo bravestar, hallo zusammen

Ich möchte das Script so ähnlich auch bei mir einsetzen.
Praktisch daran ist, dass man damit kein JavaScript braucht, wie z.B. hier:
http://www.elemente-websolutions.ms/blog/2009/02/06/typo3-klick-vergrosern-mit-lupensymbol/

hier zuerstmal mein TS-Setup:

tt_content.image.20.1 {
	stdWrap.innerWrap2.cObject = COA
	stdWrap.innerWrap2.cObject {
		10 = TEXT
		10.value = |
		20 = TEXT
		20.data = TSFE:lastImageInfo|origFile
		20.wrap = <a class="fancybox" href="|" style="display: block; margin-top: -39px; margin-bottom: 0px; padding-right: 2px; text-align: right; text-decoration: none;"
		30 = TEXT
		30.data = field:uid 
		30.wrap = rel="fancybox|"
		40 = TEXT
		40.value = ><img src="fileadmin/images/icons/Lupe2_18x18.png" alt="Klicken, um Bild zu vergr&ouml;ssern" title="Klicken, um Bild zu vergr&ouml;ssern" style="margin-bottom: 0px;"/></a>
	}
	stdWrap.innerWrap2 {
		if.isTrue.field = image_zoom
		ifEmpty.field = image_link
	}
}

Grundsätzlich würde das alles funktionieren, ABER mit meiner Lightbox gibt es ein Problem, und zwar werden die Bilder DOPPELT angezeigt in der Lightbox.
Und zwar nehme ich an, weil es dann zwei mal das Element gibt, was die Eigenschaft "rel="fancyboxZahl" hat.

Lightbox ist dies hier:
http://www.typo3.org/extensions/repository/view/sk_fancybox/current/

Passiert das bei Dir nicht, bei Deiner eingesetzten Lightbox?
(An den Buchstaben sb muss dass eine Slimbox sein...?)

Ich habs jetzt provisorisch mal so gelöst:

tt_content.image.20.1 {
	stdWrap.innerWrap2 =|<div style="height: 20px; width: 20px; margin-top: -39px; margin-bottom: 0px; padding-left: 2px; position: relative; display: block; background-image: url(/fileadmin/images/icons/Lupe2_18x18.png); background-position: left; background-repeat: no-repeat; cursor: pointer;"></div>
	stdWrap.innerWrap2 {
		if.isTrue.field = image_zoom
		if.isFalse.field = image_link
	}
}

Hier seht ihr auch die Demo-Seite:
http://www.lu-wahlen.ch/index.php?id=41
Es ist das Bild gaaaanz unten links (Pascal Merz).

Wie Ihr seht ist hier jetzt kein Link gesetzt und die Lupe als Hintergrundbild definiert.
Aber wenn man mit der Maus über die Lupe fährt wirkt leider der Link vom Bild darunter nicht mehr, daher ist das auch keine super Lösung...

Habt Ihr eine gute Lösung?

Danke für Eure Hilfe
Stevee