Catalog Hovereffekt für Items: Unterschied zwischen den Versionen

Aus Contao Community Documentation

(Die Seite wurde neu angelegt: „Category:Catalog == '''STEP 1 - Hovereffekt beim überfahren eines Catalog-Items''' == ''In diesem Beispiel bezogen auf das Teaserbild'' <pre>Gehen wir dav…“)
 
(Korrekturen)
 
Zeile 2: Zeile 2:
  
  
== '''STEP 1 - Hovereffekt beim überfahren eines Catalog-Items''' ==
+
=Hovereffekt beim Überfahren eines Catalog-Items==
 
''In diesem Beispiel bezogen auf das Teaserbild''
 
''In diesem Beispiel bezogen auf das Teaserbild''
  
<pre>Gehen wir davon aus euer Listener stellt für jedes Item ein Teaserbild dar, auf diesem man zur Detailansicht kommt.
+
Als Ausgangsbasis stellt der Listener 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.</pre>
+
Nun möchte man einen Hovereffekt beim Überfahren mit der Maus, in diesem Beispiel ein png Bild mit Leuchteffekt.
  
 
+
==Template des Listeners modifizieren==
----
+
Die [[Templates_bearbeiten|Templates]] findet man in ''/system/modules/catalog/templates''.<br />
 
+
Im Listener Template (zb. catalog_liste.tpl) wird bei der Zeile
== STEP 2 - Template des Listeners modifizieren ==
+
<source lang="php">
 
+
 
+
<pre>Die Templates findet ihr in ''/system/modules/catalog/templates''</pre>
+
{{Hinweis|Editieren könnt ihr die tpls gut mit dem kostenlosen notepad++}}
+
<pre>Im Listener Template (zb. catalog_liste.tpl) wird bei der Zeile</pre>
+
<source lang="css">
+
 
<div class="value"><?php echo $data['value']; ?>
 
<div class="value"><?php echo $data['value']; ?>
 
</source>
 
</source>
<pre>alle (von euch aktivierten)Felder, im FrontEnd ausgegeben und dargestellt pro item.
+
alle (aktivierten) Felder pro Item im FrontEnd ausgegeben und dargestellt.<br />
Wenn wir einen Hovereffekt haben wollen, nehmen wir ein DIV das übergeblendet werden soll.  
+
Will man einen Hovereffekt haben, nimmt man ein DIV das übergeblendet werden soll.<br />
Innerhalb dieses DIVs können wir Farbflächen, Text oder Bilddaten setzen, völlig egal.  
+
Innerhalb dieses DIVs kann man Farbflächen, Text oder Bilddaten setzen, völlig egal.<br />
Das DIV erstellen wir, indem wir nach der oben genannten Zeile</pre>
+
Das DIV erstellt man, indem man nach der oben genannten Zeile
<source lang="css">
+
<source lang="php">
<div class="deinhovereffekt" ></div>  
+
<div class="deinhovereffekt"></div>  
 
</source>
 
</source>
<pre>einsetzen. Das DIV überlappt das Teaserbild, dadurch haben wir keinen Link mehr zur Detailansicht.
+
einsetzt. Das DIV überlappt das Teaserbild, dadurch hat man keinen Link mehr zur Detailansicht.<br />
Also geben wir noch den Link des Items hinzu den wir mit $entry['url'] bekommen.
+
Also gibt man noch den Link des Items hinzu den man mit ''$entry['url']'' bekommt.<br />
''Kurz erklärt $entry ist das Array das alle Felder enthält und ausgibt. ['url'] ist eines der Kinder des Arrays,
+
''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.''</pre>
+
also ein Feld und zwar die URL zur Detailseite.''
<source lang="css">
+
<source lang="php">
<div class="deinhovereffekt" ><a href="<?php echo $entry['url']; ?>"></a></div>
+
<div class="deinhovereffekt"><a href="<?php echo $entry['url']; ?>"></a></div>
 
</source>
 
</source>
<pre>Weil wir hier ein '''Bild''' als Hovereffekt nehmen wollen, geben wir noch ein ''span'' samt url zum Bild gleich mit.
+
Weil man hier ein '''Bild''' als Hovereffekt nehmen will, gibt man noch ein ''span'' samt url zum Bild gleich mit.<br />
Im Endeffekt der gleiche den auch Catalog fürs Teaserbild generiert.</pre>
+
Im Endeffekt der Gleiche, den auch Catalog fürs Teaserbild generiert.
<source lang="css">
+
<source lang="php">
<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>
+
<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>
 
</source>
 
</source>
 
+
Wenn das Item im Listener nicht nur ein Teaserbild, sondern auch weitere Felder erhält wie Name, Preis oder ähnliches,
<pre>Wenn euer Item im Listener nicht nur ein Teaserbild sondern auch weitere Felder erhält wie Name,Preis oder ähnliches
+
hätte man jetzt das Problem das über '''jedem''' Feld das neues DIV angezeigt wird. Also beschränkt man es
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 will man den Effekt nur auf das Teaserbild. Dazu braucht man den Spaltenname des Teaserbilds.<br />
mit einer IF Abfrage. In diesem Fall wollen wir den Effekt nur auf das Teaserbild. Ihr braucht den Spaltenname eures Teaserbilds.
+
In diesem Beispiel wird angenommen, dass das Feld ''teaserbild'' heisst ($field=='teaserbild').<br />
In meinem Beispiel $field=='teaserbild'
+
Mit der IF Abfrage sieht der komplette Code nun so aus:
Mit der IF Abfrage sieht der komplette Code nun so aus:</pre>
+
<source lang="php">
<source lang="css">
+
 
<div class="value"><?php echo $data['value']; ?>
 
<div class="value"><?php echo $data['value']; ?>
 
<!-- Ab hier euer Code für den Hovereffekt -->
 
<!-- Ab hier euer Code für den Hovereffekt -->
Zeile 54: Zeile 47:
 
</source>
 
</source>
  
 
+
==CSS erweitern==
----
+
Da das DIV jetzt aber sofort zu sehen ist, versteckt man es per CSS mit ''display: none;''.<br />
 
+
Und beim Hover lässt man es anzeigen mit ''display: block;''.<br />
== STEP 3 - CSS erweitern ==
+
Das Stylesheet könnte zum Beispiel so aussehen:
 
+
<pre>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):</pre>
+
 
<source lang="css">
 
<source lang="css">
 
.layout_liste .item .deinhovereffekt {
 
.layout_liste .item .deinhovereffekt {
Zeile 75: Zeile 64:
 
position: absolute;
 
position: absolute;
 
}
 
}
 
 
</source>
 
</source>

Aktuelle Version vom 1. Mai 2011, 11:32 Uhr


Hovereffekt beim Überfahren eines Catalog-Items=

In diesem Beispiel bezogen auf das Teaserbild

Als Ausgangsbasis stellt der Listener für jedes Item ein Teaserbild dar, auf diesem man zur Detailansicht kommt. Nun möchte man einen Hovereffekt beim Überfahren mit der Maus, in diesem Beispiel ein png Bild mit Leuchteffekt.

Template des Listeners modifizieren

Die Templates findet man in /system/modules/catalog/templates.
Im Listener Template (zb. catalog_liste.tpl) wird bei der Zeile

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

alle (aktivierten) Felder pro Item im FrontEnd ausgegeben und dargestellt.
Will man einen Hovereffekt haben, nimmt man ein DIV das übergeblendet werden soll.
Innerhalb dieses DIVs kann man Farbflächen, Text oder Bilddaten setzen, völlig egal.
Das DIV erstellt man, indem man nach der oben genannten Zeile

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

einsetzt. Das DIV überlappt das Teaserbild, dadurch hat man keinen Link mehr zur Detailansicht.
Also gibt man noch den Link des Items hinzu den man mit $entry['url'] bekommt.
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 man hier ein Bild als Hovereffekt nehmen will, gibt man 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 das Item im Listener nicht nur ein Teaserbild, sondern auch weitere Felder erhält wie Name, Preis oder ähnliches, hätte man jetzt das Problem das über jedem Feld das neues DIV angezeigt wird. Also beschränkt man es mit einer IF Abfrage. In diesem Fall will man den Effekt nur auf das Teaserbild. Dazu braucht man den Spaltenname des Teaserbilds.
In diesem Beispiel wird angenommen, dass das Feld teaserbild heisst ($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 -->

CSS erweitern

Da das DIV jetzt aber sofort zu sehen ist, versteckt man es per CSS mit display: none;.
Und beim Hover lässt man es anzeigen mit display: block;.
Das Stylesheet könnte zum Beispiel so aussehen:

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

Contao Community Documentation

Fork die Wand an!

Tristan Lins
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge