Manitougs: Korrekturen

2011-05-01T10:32:38Z

Korrekturen

Izanagi: Die Seite wurde neu angelegt: „Category:Catalog == '''STEP 1 - Hovereffekt beim überfahren eines Catalog-Items''' == ''In diesem Beispiel bezogen auf das Teaserbild''

Gehen wir dav…“

2011-04-23T21:43:32Z

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…“

Neue Seite

[[Category:Catalog]]

== '''STEP 1 - Hovereffekt beim überfahren eines Catalog-Items''' ==
''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.
Wir möchten einen Hovereffekt bei überfahren mit der Maus. Unser Beispiel ein png Bild mit Leuchteffekt.</pre>

----

== STEP 2 - Template des Listeners modifizieren ==

<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']; ?>
</source>
<pre>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</pre>
<source lang="css">
<div class="deinhovereffekt" ></div>
</source>
<pre>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.''</pre>
<source lang="css">
<div class="deinhovereffekt" ><a href="<?php echo $entry['url']; ?>"></a></div>
</source>
<pre>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.</pre>
<source lang="css">
<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>

<pre>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:</pre>
<source lang="css">
<div class="value"><?php echo $data['value']; ?>

<?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>

</source>

----

== STEP 3 - CSS erweitern ==

<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">
.layout_liste .item .deinhovereffekt {
display: none;
position: absolute;
height: 100px;
top: 0;
width: 140px;
}

.layout_liste .item:hover .deinhovereffekt {
display: block;
position: absolute;
}

</source>

Catalog Hovereffekt für Items - Versionsgeschichte

Manitougs: Korrekturen

Izanagi: Die Seite wurde neu angelegt: „Category:Catalog == '''STEP 1 - Hovereffekt beim überfahren eines Catalog-Items''' == ''In diesem Beispiel bezogen auf das Teaserbild''
Gehen wir dav…“

@@ 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''
-<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']; ?>
 </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>
-<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>
-<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>
+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']; ?>
 <!-- Ab hier euer Code für den Hovereffekt -->
@@ Zeile 54: / Zeile 47: @@
 </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">
 .layout_liste .item .deinhovereffekt {
@@ Zeile 75: / Zeile 64: @@
 position: absolute;
+}
 </source>