Catalog Hovereffekt für Items: Unterschied zwischen den Versionen

Version vom 23. April 2011, 22:43 Uhr

STEP 1 - Hovereffekt beim überfahren eines Catalog-Items

In diesem Beispiel bezogen auf das Teaserbild

Gehen wir davon aus euer Listener stellt für jedes Item ein Teaserbild dar, auf diesem man zur Detailansicht kommt.
Wir möchten einen Hovereffekt bei überfahren mit der Maus. Unser Beispiel ein png Bild mit Leuchteffekt.

STEP 2 - Template des Listeners modifizieren

Die Templates findet ihr in ''/system/modules/catalog/templates''

Hinweis: Editieren könnt ihr die tpls gut mit dem kostenlosen notepad++

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

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

alle (von euch aktivierten)Felder, im FrontEnd 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, Text oder Bilddaten setzen, völlig egal. 
Das DIV erstellen wir, indem wir nach der oben genannten Zeile

<div class="deinhovereffekt" ></div>

einsetzen. Das DIV überlappt das Teaserbild, dadurch haben wir keinen Link mehr zur Detailansicht.
Also geben wir noch den Link des Items hinzu den wir mit $entry['url'] bekommen.
''Kurz erklärt $entry ist das Array das alle Felder enthält und ausgibt. ['url'] ist eines der Kinder des Arrays,
also ein Feld und zwar die URL zur Detailseite.''

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

Weil wir hier 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="deinhovereffekt" ><a href="<?php echo $entry['url']; ?>"><span class="image first even"><img width="140" height="100" alt="klick mich" src="tl_files/bilddaten/leuchteffekt.png"></span></a></div>

Wenn euer Item im Listener nicht nur ein Teaserbild sondern auch weitere Felder erhält wie Name,Preis oder ähnliches
hätten wir jetzt das Problem das über '''jedem''' Feld unser neues DIV angezeigt wird. Also beschränken wir es
mit einer IF Abfrage. In diesem Fall wollen wir den Effekt nur auf das Teaserbild. Ihr braucht den Spaltenname eures Teaserbilds.
In meinem Beispiel $field=='teaserbild'
Mit der IF Abfrage sieht der komplette Code nun so aus:

<div class="value"><?php echo $data['value']; ?>
<!-- Ab hier euer Code für den Hovereffekt -->
    <?php if (strlen($data['raw'])&& $field=='seiten_teaserbild'): ?>
    <div class="deinhovereffekt" ><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>
<!-- Hier endet der Code -->

STEP 3 - CSS erweitern

Da das DIV jetzt aber sofort zu sehen ist. Verstecken wir es per CSS mit display: none;
Und beim Hover lassen wir es anzeigen mit display: block;
Ihr legt euch einen neuen Stylesheet an (als beispiel):

.layout_liste .item .deinhovereffekt {
display: none;
position: absolute;
height: 100px;
top: 0;
width: 140px;
}
 
.layout_liste .item:hover .deinhovereffekt {
display: block;
position: absolute;
}