Wrap um Bilder, mit aktiviertem „Klick-vergrössern“

igorshmigor · 5. Juli 2006 14:58

Ich möchte Bilder mit der Funktion „Klick-vergrössern“ gesondert darstellen, so dass der User sofort weiß, dass er die Bilder anklicken kann.
Wie mache ich das?

Unbekannter Benutzer · 5. Juli 2006 15:24

Du gibts im Content Bereich, den Du hoffentlich über ein div o.ä. im HTML definiert hast, Bilder die verlinkt sind eine entsprechende Formatierung mit. Oder Du suchst die Klasse des Bildes raus und formatierst diese. Hat das Bild keine Klasse, gibst Du sie über wrap mit (im TSOB zum entsprechenden Objekt durchklicken).

Viele Grüße
Niki

Proximo · 5. Juli 2006 15:24

Sehr allgemeine Frage... Benutze bitte die Suche hier im Forum... die Modifikationen sind möglich über

tt_content.textpic.20.1...

MFG Proximo

EDIT: Ich würd mir das mit CSS ebenfalls überlegen, ist warscheinlich um einiges einfacher

igorshmigor · 5. Juli 2006 15:37

Danke für die Antworten. So richtig weiter hat mich das aber leider nicht gebracht.

Klassen gehen in meinem Fall nicht, ich brauche einen wrap, da ein DIV über das Bild gelegt werden soll (mit Lupensymbol in der Ecke rechts unten).

Ich habe die Suchfunktion genutzt, bin dabei auch auf "tt_content.textpic.20.1. ..." gestoßen. Habe dabei aber nur Informationen gefunden wie ich das aufpoppende Bildfenster verändern kann, nicht jedoch das Bild mit dem Link.

Unbekannter Benutzer · 5. Juli 2006 16:14

Klassen gehen in meinem Fall nicht, ich brauche einen wrap, da ein DIV über das Bild gelegt werden soll (mit Lupensymbol in der Ecke rechts unten).

ehm :o alles durcheinandergeworfen.
Über "wrap" legst Du ein div um das Bild und das div hat eine Klasse. Über die Klasse kannst Du es dann im CSS ansprechen.

Ich habe die Suchfunktion genutzt, bin dabei auch auf "tt_content.textpic.20.1. ..." gestoßen. Habe dabei aber nur Informationen gefunden wie ich das aufpoppende Bildfenster verändern kann, nicht jedoch das Bild mit dem Link.

genau dort bist Du richtig, such noch mal genauer. Vielleicht gibts das wrap um das Bild noch nicht, dann musst Du es anlegen.

Viele Grüße
Niki

igorshmigor · 5. Juli 2006 16:29

Niki schrieb
ehm :o alles durcheinandergeworfen.
Über "wrap" legst Du ein div um das Bild und das div hat eine Klasse. Über die Klasse kannst Du es dann im CSS ansprechen.

Die Frage ist: wie kriege ich es hin, dass nur die Bilder, die vergrößerbar sind per Typo3 die Klasse erhalten, die ich mit CSS ansprechen soll. Die Situation ist folgende: Ich habe viele kleine Bilder im Content, manche davon sind vergrößerbar. Diese und nur diese sollen automatisch ein Lupensymbol erhalten.

Unbekannter Benutzer · 5. Juli 2006 16:31

Ich habe viele kleine Bilder im Content, manche davon sind vergrößerbar. Diese und nur diese sollen automatisch ein Lupensymbol erhalten.

Images mit Popup sind verlinkt. Über den a Tag kannst Du das also im CSS steuern (nur Bilder mit div blablabla und a-tag aussen rum bekommen die entsprechende Formatierung).

Viele Grüße
Niki

igorshmigor · 5. Juli 2006 16:37

Sehr witzig. Mit CSS kann ich nur Hintergrundbilder einfügen. Wenn die CSS-Klasse auf das IMG Tag angewendet wird, dann ist die Lupe im Hintergrund des Bildes und damit nicht sichtbar.

Unbekannter Benutzer · 5. Juli 2006 17:25

Sehr witzig. Mit CSS kann ich nur Hintergrundbilder einfügen. Wenn die CSS-Klasse auf das IMG Tag angewendet wird, dann ist die Lupe im Hintergrund des Bildes und damit nicht sichtbar.

Versuch doch Deine Anforderungen von Anfang an genau zu beschreiben anstatt Dich über Antworten zu beschweren.

Du könntest in diesem Fall den GIFBUILDER verwenden und die Lupe systemseitig drauf rechnen lassen. Problematisch ist hierbei jedoch meist die Grafikqualität die etwas leidet. Oder Du nimmst den A-Tag vom Bild weg und legst ihn um die Lupe die Du in ein div packst das Du über das Bild legst und dort gibts dann ein Hintergrundbild. Macht man beides über den TSOB bzw. das TS Template. Hast Du das gewünschte Ergebnis-HTML schon fertig? Am besten immer erst mal in HTML eine Vorlage bauen und dann in Typo3 umsetzen.

Viele Grüße
Niki

igorshmigor · 5. Juli 2006 17:35

Ich habe kein Problem den entsprechenden HTML und CSS Code zu erstellen. Das ist alles Pipifax.
Das Problem ist, per Typoscript automatisch die anklickbaren Bilder anzusprechen.
Habe ich auch mit tt_content.textpic.20.1...nicht hinbekommen.
Da habe ich schon die wildesten Kombination gebaut bis hin zu tt_content.textpic.20.1.imageLinkWrap.typolink.linkWrap= ...
Hat aber alles nicht funktioniert. Wie muss es richtig aussehen??? #angry#

Versuch doch Deine Anforderungen von Anfang an genau zu beschreiben anstatt Dich über Antworten zu beschweren.

Tut mir leid, ich bin nur frustriert. Ich dachte ich hätte meine Anforderungen genau beschrieben, als ich schrieb „Ich habe viele kleine Bilder im Content, manche davon sind vergrößerbar. Diese und nur diese sollen automatisch ein Lupensymbol erhalten“.

Beispiele sind natürlich besser. Ich habe jetzt eins gefunden: http://www.volkswagen.de/vwcms_publish/vwcms/master_public/virtualmaster/de3/modelle/polo.html
Die machen es genau so, wie auch ich es umsetzen will, nur mit einem kleinen Plus-Icon statt einer Lupe. Wie gesagt, die HTML- und CSS-Codes sind nicht das Problem.

workfare · 5. Juli 2006 17:48

nicht aufregen ...
folgendes stammt hier aus dem Forum (aber ich finde es nicht)und zaubert eine Lupe ins Bild
SETUP

tt_content.image.20 {
    1 {
        stdWrap.innerWrap = {$template.clickEnlarge}
        stdWrap.innerWrap {
            if.isTrue.field = image_zoom
              ifEmpty.field = image_link
          }
    }

Entsprechend Constants

template.clickEnlarge = |<span class="clickenlarge"><img src="fileadmin/infohub/images/Icons/lupe.jpg" /></span>

Und CSS:
.clickenlarge {
display: block;
text-align: right;
padding: 0px 4px;
margin-top: -2em;
height: 2em;
}
.clickenlarge img {
border: 0px !important;
}
unf fertig!
Aber: Die Lupe ist nicht klickbar, man muss NEBEN sie klicken, nicht wirklich intuitiv ...

Unbekannter Benutzer · 5. Juli 2006 18:01

Bei Volkswagen wird das Bild direkt in die Grafik gerechnet sh.
http://www.volkswagen.de/vwcms_publish/etc/medialib/vwcms/virtualmaster/de/promosites/goal.Par.0011.Image.jpg

Das wäre mit TypoScript auch möglich (GIFBUILDER) aber da hast Du das Problem mit der Grafik-Qualität. Muss man aber ausprobieren und auch die diversen Tipps hier im Forum durchwühlen wie man die Grafikqualität des GIFBUILDER verbessert. Evtl. kriegst Du damit die Qualität ausreichend hin. Falls nicht wirds technisch interessant, dann käme der Einsatz einer anderen Bildberechnungssoftware, Änderungen an ImageMagick oder eine eigene Extension mit der Du die Bildrechenoperationen selbst machst in Frage.

Vielleicht hat sonst jemand noch eine Idee? Im Bereich GIFBUILDER bin ich nicht der ausgewiesene Experte. Der Code von workfare schaut auch interessant aus, auf jeden Fall als Alternative zum GIFBUILDER testen!

Viele Grüße
Niki

igorshmigor · 5. Juli 2006 18:15

Niki schrieb
Bei Volkswagen wird das Bild direkt in die Grafik gerechnet sh.
http://www.volkswagen.de/vwcms_publish/etc/medialib/vwcms/virtualmaster/de/promosites/goal.Par.0011.Image.jpg

Tschuldigung, falscher Link. Ich meinte diese Volkswagen-Seite:
http://www.volkswagen.de/vwcms_publish/vwcms/master_public/virtualmaster/de31/beratungundkauf/junge_fahrer.html

Vielen vielen Dank, workfare, ich glaube das ist genau das was ich suche. Werde es gleich morgen ausprobieren. Jetzt ist erst mal Feierabend. Echt super, dass Du dir die Mühe gemacht hast das Script rauszusuchen.

igorshmigor · 5. Juli 2006 18:22

Hab's doch schon jetzt getestet. Und es klappt! Nochmal danke, workfare. Auf die Lösung wäre ich von alleine nie gekommen und im Forum habe ich mich auch schon totgesucht.

if.isTrue.field = image_zoom
ifEmpty.field = image_link

auf so was kommt doch kein Mensch! (ich jedenfalls nicht 😉 )

Unbekannter Benutzer · 5. Juli 2006 18:27

Super dass es jetzt klappt :-)

ganz kurz noch zur VW Seite: auf dem neuen Link haben die das mit HTML / CSS gelöst:

<img class="clickimg" src="/vwcms_publish/vwcms_virtualmaster/images/icon_plus.gif" width="9" height="9" alt="+"></a>

CSS sh. direkt auf der VW Seite.

Viele Grüße
Niki

igorshmigor · 5. Juli 2006 21:41

Ja, Niki, ich weiß wie die das auf der Seite gemacht haben.

igorshmigor schrieb
Ich habe kein Problem den entsprechenden HTML und CSS Code zu erstellen. Das ist alles Pipifax.

igorshmigor schrieb
Wie gesagt, die HTML- und CSS-Codes sind nicht das Problem.

workfare · 6. Juli 2006 13:03

Schön, dass es das war, was du willst.
Aber das Problem bleibt, dass die Lupe selbst nicht klickbar ist oder hast du das gelöst?
Grüße
/
Jens

igorshmigor · 6. Juli 2006 14:11

Nein, Du hast Recht. Ausgerechnet die Lupe selbst ist nicht anklickbar.
Aber damit kann ich erst mal leben.

igorshmigor · 6. Juli 2006 16:45

Die Lupe ist jetzt auch anklickbar. Habe das mit Javascript gelöst:
im TS:

stdWrap.innerWrap = |<script type="text/javascript">zufall=Math.floor(Math.random()*100000);document.write('<div class="enlargepic" name="mylayer'+zufall+'"><a href="#" onclick="openparentlink(this.name)" name="mylink'+zufall+'"><img src="fileadmin/images/lupe.gif" alt="" /></a></div>');</script>

...

page.headerData.10=TEXT
page.headerData.10.value(
	<script type="text/javascript">
		function openparentlink(mydiv){
			var browser = navigator.userAgent.toLowerCase();
			if ((browser.indexOf("msie") != -1) && (browser.indexOf("opera") == -1)){
	       		      		
parentlink=document.all(mydiv).offsetParent.previousSibling.previousSibling.href;

               		}else{
                     		parentlink=document.all(mydiv).parentNode.parentNode.getElementsByTagName("a")[0];

                  	}
                  	openPic(parentlink,'thePicture','width=660,height=403,status=0,menubar=0');
      	  	}
      	  </script>
}

Dabei weise ich der Lupe einen leeren Link zu und gebe ihm mit einer Zufallszahl einen Namen, damit dieser Link im JavaScript über den Namen angesprochen werden kann. Dann erhält der leere Link die Anweisung openparentlink(this.name).
Diese JavaScript Funktion wird weiter unten beschrieben. Sie liest den vorhergehenden Link aus und ruft dann die Typo3-generierte JavaScript-Funktion openPic mit der ausgelesenen URL auf.

Umständlich, aber es funktioniert.

P.S.: Die Breite und Höhe des aufpoppenden Fensters ist in meiner Lösung fest vorgeschrieben mit width=660,height=403. Das funktioniert in meinem Fall, da die Bilder tatsächlich alle diese Größe haben, ist bei verschieden großen Bildern aber natürlich unbrauchbar.

Unbekannter Benutzer · 6. Juli 2006 17:18

Ja, Niki, ich weiß wie die das auf der Seite gemacht haben.

Dann muss ich jetzt doch fragen, warum Du das dann nicht auch so gemacht hast sondern diesen thread gestartet hast? Ist ja schön dass es jetzt auch mit einer anderen Lösung funktioniert, aber die o.g. Lösung hätte so gut wie kein TS erfordert ... und Du hattest glaub ich ziemlich deutlich gemeckert dass Du die Lupe nicht mittels CSS drauflegen kannst aber genau das ist ja auf der VW Seite gemacht worden.

Viele Grüße
Niki