Hoverffekt für Items (teaserbild)

[izanagi]

Hallöchen,
das Thema hat scheinbar noch niemand aufgegriffen.
Ich versuche gerade den Effekt, von http://www.thyon.com/
bei dem eine DIV Box eingeblendet wird sobald man über ein Item moved.
In meinem Fall ist es kein Text sondern ein transparentes png.

Ich habe dem Listener tpl einen DIV unterhalb des Teaserbilds gegeben.
Dieses DIV ist display-none. Bei thyon.vom ist es opacity=0
keine Ahnung was besser ist.

Auf jedenfall habe ich das Problem das der Itemlink verschwindet wenn das Hover DIV
eingeblendet wird. Es überlappt ja schliesslich.
Krampfhaft versuche ich nun dem Hover DIV den gleichen verlinkungstag zu geben
wie der des Teaserbild. ^^ bekomm ich nicht hin.
Aus <?php echo $data['value']; ?> muss ich irgendwie den href bekommen !?!

Oder gibts schon ne Erweiterung ?

lieben gruss

-------
Hier der Link zum Tutorial im Wiki:

http://de.contaowiki.org/Catalog_Hovereffekt_f%C3%BCr_Items

[izanagi]

Für nen moment hatte ich gedacht ich hätt es....
Der Link befindet sich ja in var $link

Da hab ich versucht:
<div class="overviewhover" href="<?php echo $link; ?>"></div>

Aber ging leider nicht :/

[MacKP]

Hallo izanagi,
ich weiß überhaupt nicht was du meinst...
Und ich weiß auch nicht was das mit dem catalog zu tun haben sollte?
Das ist wenn dann CSS und ein wenig JS für Browser die es nicht nur mit CSS können...

Ein Ausblenden kannst du dir eventuell bei Navigationen die über hover funktionieren abschauen wenn du einen Denkanstoß brauchst.

Viele Grüße

[izanagi]

Uff was wurd denn da kopiert -.-
Nochmal:
<div class="overviewhover" ><a href="<?php echo $link; ?>"></div>

Wieso kann ich Posts eigentlich nicht editieren im forum

[izanagi]

Ne wie das funktioniert weiss ich doch. Aber prinzpiell für den Catalog
wollte ich das ansprechen. Vielleicht hättest du ja auch hinweise
auf ein kommende/bestehende Erweiterung gehabt.

Ich bekomms halt gerade nicht hin, weil die CatalogItems ja so verschachtelt sind.

[MacKP]

Ach das ist dann das Problem?
Dann schau dir doch bitte mal im Wiki an wie man Templates bearbietet ;-)

Ansonsten gibts auch noch einen Template Generator von lindesbs, der einem einiges abnimmt und zumindest den Anfang erleichtert.

Viele Grüße

[izanagi]

Möchte ja auch was beitragen, daher wollte ich das daß Thema mal angesprochen wird.
Gibt sicher einige die mal auf der Suche danach sind.

So, jetzt kannst du den Thread auch als [gelöst] markieren.
Ich schilder mal ein mini Tutorial:



Hovereffekt beim überfahren eines Catalog-Items.

Betroffen: in diesem Beispiel nur das Teaserbild

Im Listener Template (zb. catalog_liste.tpl)
wird bei der Zeile

<div class="value"><?php echo $data['value']; ?>

alle (sichtbaren)Felder ausgegeben und dargestellt pro item.

Wenn wir einen Hovereffekt haben wollen, nehmen wir ein DIV das übergeblendet werden soll. Innerhalb dieses DIVs können wir Farbflächen oder Bilddaten setzen, völlig egal. Das DIV erstellen wir, indem wir nach der oben genannten Zeile

<div class="hoverdivname" ></div> 

einsetzen. Weil wir dort keine Verlinkung haben geben wir noch den Link des Items hinzu den wir mit $entry['url'] bekommen.

<div class="hoverdivname" ><a href="<?php echo $entry['url']; ?>"></a></div>

Weil wir ein Bild als Hovereffekt nehmen wollen, geben wir noch ein span samt url zum bild gleich mit. Im Endeffekt der gleiche den auch Catalog fürs Teaserbild generiert.

<div class="hoverdivname" ><a href="<?php echo $entry['url']; ?>"><span class="image first even"><img width="140" height="100" alt="klick mich" src="tl_files/bilddaten/blende.png"></span></a></div>

Da das DIV aber jetzt unter jedem Feld des Items generiert wird,
beschränken wir es mit einer IF Abfrage. In diesem Fall wollen wir den Effekt nur
auf das Teaserbild. In meinem Beispiel $field=='seiten_teaserbild'
Fertig sieht das ganze so aus

[I]<div class="value"><?php echo $data['value']; ?>[/I]
    <?php if (strlen($data['raw'])&& $field=='seiten_teaserbild'): ?>
    <div class="hoverdivname" ><a href="<?php echo $entry['url']; ?>">
    <span class="image first even"><img width="140" height="100" alt="klick mich" src="tl_files/bilddaten/blende.png"></span></a>
    </div>

Da das DIV jetzt aber zu sehen ist. Verstecken wir es per CSS.
Ihr legt euch nen neuen Stylesheet an (als beispiel)
.layout_liste .item .hoverdivname {
display: none;
height: 100px;
position: absolute;
top: 0;
width: 140px;
}
Und lassen es bei Überfahren einblenden:
.layout_liste .item:hover .hoverdivname{
display: block;
position: absolute;
}

[MacKP]

Sehr schön. Danke fürs Tutorial!
Wenn du magst kannst du das auch sehr gerne ins Wiki schreiben (einfach neue Seite in der Kategorie Catalog anlegen).
Würde mich freuen ;-)

Viele Grüße

[izanagi]

Ja werde ich heute Abend dann mal eintragen

[izanagi]

Hab es eingetragen. Habs nochmal etwas verbessert. Kannst ja mal nachkontrollieren.
viele grüße

[MiTsch]

Hallo izanagi,

könntest Du bitte hier den Link zum Wiki posten, dann wäre es für alle die diesen Thread hier lesen einfacher diesen zu finden und auch zu nutzen. Wäre doch schade wenn Du dir vergebens so viel Mühe gemacht hättest. Danke !

Viele Grüße
MiTsch

[izanagi]

schade das man Beiträge nicht editieren kann. gleich in den ersten Post.


Hier ein Lösungsweg im Contao Wiki:

http://de.contaowiki.org/Catalog_Hovereffekt_f%C3%BCr_Items

[MacKP]

Danke izanagi :-)
Ich habs mir noch nicht angeschaut.. aber die Leute werdens dir schon sagen wenns nicht geht ;-)

Ich hab den Link im ersten Beitrag ergänzt.

Viele Grüße