Hover bei Bildern in der Listenansicht

[freak_me11]

Hallo.
Ich hätte gerne, dass die Bilder, die ich in dem Modul Katalog-Liste ausgebe schwarz/weiß sind und bei Hover farbig werden. Wie kann ich das umsetzen?
Ich könnte im Katalog zwei Bilder hinterlegen, einmal schwarz/weiß und einmal farbig. Aber was dann?

[freak_me11]

http://de.contaowiki.org/Catalog_Hov...f%C3%BCr_Items
sorry!

[freak_me11]

Aber bei dem Tutorial ist es so, dass es nur das eine Hoverbild gibt, also diesen Leuchteffekt. Wie könnte ich jedem Item ein eigenes Hoverbild zuweisen? Ich würde gerne im Katalog für jedes Produkt zwei Bilder anlegen. Einmal s/w und einmal farbig. Die normale Ansicht in der Liste ist das s/w Bild. Bei Hover dann das entsprechende Bild in Farbe...

[MacKP]

Hallo freak_me11,
dann ersetz den BIldaufruf aus dem Beispiel mit der Variablen wo dein 2. Bild drinn ist.

Rest vom Tutorial hab ich mir nun nicht angesehen...

Viele Grüße

[freak_me11]

hey,

okay.
Hier der wichtige Code des Templates:
<div class="hovereffekt"><a href="<?php echo $entry['url']; ?>"><span class="image first even"><img width="640" height="362" alt="klick mich" src="tl_files/bilddaten/leuchteffekt.png"></span></a></div>

So, mein farbiges Bild heißt (Spaltenname) "image" und das s/w: "imagesw"

-> Dann muss ich also die src ändern:
src="image"></span></a></div>

Aber wie greife ich genau auf die Spalte image zu?
src="image"> Wir nicht richtig sein oder?

[MacKP]

Damit du das herausfinden kannst, habe ich eine kleine Anleitung geschrieben:
http://de.contaowiki.org/Catalog_Templates_anpassen

Viele Grüße

[freak_me11]

danke für den Link, ich habe es auch schon gelesen, aber ich bin einfach noch zu unerfahren für Template Anpassungen...
Ich hätte nun folgendes probiert:
src=<div class="image"><?php echo $data['image']; ?></div>

-> geht aber natürlich nicht...

bzw: src="<?php echo $entry ['image'];" müsste doch eigentlich reichen oder?
Die Quelle ist der Eintrag image und der soll ausgegeben werden...

[MacKP]

Ne, das reicht auf keinen Fall.
Lass dir mal in dienem Template das Arra ausgeben wo alle Inhalte drinn stehen. Wie im Wiki beschrieben.
Dann musst du da das Array durchgehen...
Kannst ja mal die Ausgabe hier Posten, dann kann man da helfen.

Viele Grüße

[freak_me11]

Okay, mach ich. Vielen Dank schon mal! Ich poste es dann!

[dieselboy]

Hallo freak_me11,

ich hatte grad mal Lust was zu basteln. Hier hast du noch eine Alternative in Form von Javascript, falls du nicht weiterkommst.

<script type="text/javascript">
<!--//
  window.addEvent('domready', function() {
    // z.b. meinBild_hover.jpg
    var suffix = '_hover';

    $$('.hovereffekt img').addEvent('mouseenter', function() {
      src = this.get('src');					// speichert den aktuellen Bildpfad
      image = src.slice(0, src.lastIndexOf('.'))		// extrahiert den Bildnamen
      file = src.slice(src.lastIndexOf('.') + 1, src.length);	// extrahiert die Dateiendung
      hoverImage = image + suffix + "." + file;			// setzt das hover-Bild zusammen
      
      this.set('src', hoverImage);			// ersetzt das aktuelle durch das hover-Bild
    }).addEvent('mouseleave', function() {
      this.set('src', src);				// ersetzt das hover-Bild durch das ursprüngliche
    });
  });
//-->
</script>

Zu beachten ist nur, dass die Bilder in der Form gespeichert werden:

• meinBild1.jpg und meinBild1_hover.jpg
• meinBild2.png und meinBild2_hover.png

Die Zeichenkette _hover kannst du in der Variablen suffix ^^ ändern.

Einfach in das entsprechende Template oder das Seitenlayout bauen.

Viele Grüße
Daniel

[freak_me11]

dann muss ich eingetlich nur noch mein imagesw in hoverimage umbennen oder - Also den Spaltennamen!?

[freak_me11]

Also es funktioniert leider nicht so ganz:
Hier was ich gemacht habe:

1. JS in das Seitenlayout bei Eigener JavaScript-Code eingefügt.
2. Bilder umbenannt in meinBild1.jpg und meinBild1_hover.jpg
3. Catalog Felder: Spaltenname für das s/w Bild (dieses ist der Normalzustand) = image
Spaltenname für das hover Bild: hoverImage
4. Im Modul Katalog-Liste: Sichtbare Felder: "image:file" und "hoverImage:file" falsch!?

[dieselboy]

dann muss ich eingetlich nur noch mein imagesw in hoverimage umbennen oder - Also den Spaltennamen!?

Mit der Javascript-Lösung brauchst du im Katalog nur noch ein Feld, in der du dein Bild auswählst. Von diesem Bild fertigst du eine s/w-Kopie an und speicherst sie mit dem Zusatz _hover (oder wie auch immer du das willst, z.B. bild_hover.jpg) in das gleiche Verzeichnis auf dem Webspace. Das war's.

[freak_me11]

ich schreib dir mal kurz alle meine Einstellungen auf, moment bitte!
Und vielen Dank schonmal für deine Mithilfe!

[freak_me11]

Katalog:
Feldbezeichnung: Image
Beschreibung: Image
Spaltenname: image
Typ: Datei
Pflichtfeld ja
Mehrfachauswahl ja
Als Bildfeld mit Miniaturansicht erstellen ja b:303px h:171px Exaktes Format

Im Eintrag:
Image: beide bilder ausgewählt: meinBild1.JPG und meinBild1_hover.jpg

Im Modul Katalog-Liste:
Sichtbare Felder: Image
Standardlink überschreiben ja
Verknüpfte Felder: Image
Bildgröße überschreiben ja
Bildfeld einfach: Image b:303px h: 171px Exaktes Format

JS-Code im Seitenlayout eingefügt.

Derzeit sieht es so aus wie auf dem Bild: Das eine bild wird angezeigt und das andere ist abgeschnitten darunter.

Ausgabe Array:

Array ( [0] => Array ( [id] => 2 [catalog_name] => Referenzen [parentJumpTo] => 8 [tablename] => referenzen [showLink] => [class] => first last even [link] => Die Details des Eintrags ansehen [url] => index.php/referenzen-details/items/2.html [data] => Array ( [image] => Array ( [label] => Image [type] => file [raw] => a:2:{i:0;s:55:"tl_files/themes/standard_theme/Referenzen/meinBild1.JPG";i:1;s:61:"tl_files/themes/standard_theme/Referenzen/meinBild1_hover.jpg";} [value] =>[files] => Array ( [0] => tl_files/themes/standard_theme/Referenzen/meinBild1.JPG [1] => tl_files/themes/standard_theme/Referenzen/meinBild1_hover.jpg ) [meta] => Array ( [0] => Array ( [src] => system/html/meinBild1-323d5e06.jpg [alt] => MeinBild1 [lb] => lbcataloglist0 [w] => 303 [h] => 171 [wh] => width="303" height="171" [caption] => [metafile] => ) [1] => Array ( [src] => system/html/meinBild1_hover-a21bc8ab.jpg [alt] => MeinBild1 hover [lb] => lbcataloglist0 [w] => 303 [h] => 171 [wh] => width="303" height="171" [caption] => [metafile] => ) ) ) ) ) ) 

Was mach ich falsch?

[dieselboy]

Im Katalog brauchst du nur das s/w-Bild auszuwählen. Das Script erledigt den Rest. Allerdings kann ich dir im Moment nicht sagen, warum das eine unter dem anderen gezeigt wird. Hast du einen Link, den du schicken kannst?

[freak_me11]

ich habe nun das komplette CSS ausgeschalten - daraus ergibt sich folgendes Bild:
Links das Bild für den Normalzustand, also schwarz-weiß. Rechts daneben das farbige Bild.

Wähle ich nur ein bild im Katalog aus, dann wird nur das SW-Bild angezeigt, bei Hover passiert aber nichts...

[dieselboy]

Dann schaue mal bitte, ob die von dir im Posting #5 geschriebene Klass "hovereffekt" noch stimmt.

<div class="hovereffekt">

Wenn nicht, dann passe im Script mal die Zeile 7 an.

$$('.hovereffekt img').addEvent('mouseenter', function() {

Das CSS kannst du ausschalten wie du willst, das Script arbeitet unabhängig davon.
Was sagt denn die Fehlerkonsole (Firebug)? Gibt sie eine Fehlermeldung aus, wenn du mit der Mouse über die Bilder fährst?

Edit: PM hab ich bekommen. Ich schaue später mal drüber.

[freak_me11]

danke dir!!

[dieselboy]

Wie ich schon vermutet hatte, lag es am falschen Selektor im Skript.

.hovereffekt

war der falsche Container und hatte keine Auswirkung.

Die Katalogeinstellung Miniaturansicht im Feld für das Bild darf hier nicht verwendet werden, da Contao ein Thumb generiert, welches im Verzeichnis /system/html/ gespeichert wird und das Script somit das hover-Bild nicht findet. Eine Anpassung des Templates muss hier noch vorgenommen werden, um das <img>-Tag selbst zusammen zu bauen. So funktioniert's:

<div class="field <?php echo $field; ?>">
  <div class="label"><?php echo $data['label']; ?></div>
  <?php if ($field == "firmenname"):
    $firm = $data['raw'];
  elseif ($field == "image"): ?>
    <a href="<?php echo $entry['url']; ?>"><img src="<?php echo $data['raw']; ?>" width="303" alt="<?php echo $firm; ?>" title="<?php echo $firm; ?>" /></a>
  <?php else: ?>
    <div class="value"><?php echo $data['value']; ?></div>
  <?php endif; ?>
</div>

Viele Grüße
Daniel

[freak_me11]

Super!!
Vielen Dank an dieselyboy und MacKP!! War echt super nett von euch!!