Hallo,
ich bräuchte dringend eine wenig hilfe.
Ich möchte gerne eine das Inhalteelement "Text mit Bild" bzw. Bilderlinks so ändern,
dass anstatt eines popups das Bild größer mit der CSS Hover-Funktion angezeigt wird.-
Beispiel und gleichzeitig auch das CSS dazu habe hier gefunden
http://host.sonspring.com/hoverbox/
um das zu realisieren muß ich das Bild so darstellen
<a href="#"><img src="img/photo01.jpg" alt="description" /><img src="img/photo01.jpg" alt="description" class="preview" /></a>
also das Bild doppelt anzeigen bzw. als erstes das normale klein gerechnete Bild und danach
das große Bild.
Und hier komme ich nicht weiter ...
kennt jemand eine Extension die das evtl. schon kann
oder hat jemand einen Ansatz für mich wie ich den oben benötigten Link erstellen lassen
kann ?
Leider habe ich bisher noch keinen Eintrag im Forum gefunden.
Falls es hier schon was geben sollte wäre ich auch für den Link dankbar.
mfg
brainage
P.s. Lightbox habe ich mir auch schon angeschaut .. paßt aber eigentlich nicht wie
ich mir das vorstelle ... es sei denn ich hätte eine einstellmöglichkeit übersehen.
Danke an alle :-)
Hallo,
lightbox wird aber wohl die richtige Richtung sein.
lg georg
Hallo danke für die schnelle Antwort aber
lightbox ist eine Lösung mit javascript
ich würde aber gerne eine reine CSS Lösung umsetzen.
Das Lightbox-Verhalten ist mir ein wenig zu dominant.
Ich habe es auch schon mit diesem Ansatz versucht:
tt_content.image >
tt_content.image = COA
tt_content.image {
10 =< lib.stdheader
20 = IMAGE
20 {
file {
import = uploads/pics/
import.field = image
import.listNum = 0
width.field = imagewidth
width.wrap = |m
height.field = imageheight
height.wrap = |m
}
altText.field = altText
titleText.field = titleText
longdescURL.field = longdescURL
wrap = <span class="preview">|</span>
}
nur wie bekomme ich das Bild doppelt angezeigt ?
Hier stehe ich grad toal auf dem Schlauch :-(
Hallo,
das Bild bekommst du so nocheinmal:
20 = IMAGE
20 {
...
}
30 = IMAGE
30 {
...
}
georg
:-)
klar.. danke.. habe ich auch so
nur ich habe jetzt festgestellt warum es nicht
angezeit wird.
Wenn ich das Inhaltselement Text mit Bild nehme
funktionierts nicht.. zwar wird der wrap auch auf
das Bild angewendet aber das Bild wird nur
einmal anzeigt.
Wenn ich aber das Inhaltselement Bild nehme
funktioniert es wie gewünscht..
:-) warum weiß ich aber leider nicht
aber der weg scheint richtig zu sein *freu*
Hallo,
weil es hier ein eigenes cType gibt > tt_content.textpic
georg
Wieder Danke..
Es funktioniert jetzt auch im Text/Image Inhaltselement.
Nur warum wurde dann vorher der wrap auf beides angewendet ?
mfg
brainage
Hallo,
klick mal auf template > template analyzer > css_styled_content
613: tt_content.textpic = COA
614: tt_content.textpic {
615: 10 = COA
616: 10.if.value = 25
617: 10.if.isLessThan.field = imageorient
618: 10.10 = < lib.stdheader
619:
620: 20 = < tt_content.image.20
621: 20.text.10 = COA
622: 20.text.10 {
623: if.value = 24
624: if.isGreaterThan.field = imageorient
625: 10 = < lib.stdheader
626: 10.stdWrap.dataWrap = <div class="csc-textpicHeader csc-textpicHeader-{field:imageorient}">|</div>
627: }
628: 20.text.20 = < tt_content.text.20
629: }
zeile 620 sollte das klären
georg
Ok habs verstanden .. denke ich :-)
danke für die Hilfe
gruß
brainage
leider hab ich doch nochmal ne Frage
und zwar wenn ich das mit den 2 Bildern so mache
20 = IMAGE
20 {
...
}
30 = IMAGE
30 {
...
}
bekomme ich wenn ich die die die Linkfunktion benutze 2 Links
also
<a href="link"><img .. hier das Image.. ></a>
<a href="link"><img .. hier das Image.. ></a>
Ich möchte aber so etwas erhalten
<a href="link"><img .. hier das Image.. ><img .. hier das Image.. ></a>
vom Ansatz her müßte ich ja hier > tt_content.image.20.1
ansetzen und evtl. mit "append" ansetzen .. leider komme ich hier nicht weiter ..
mfg