> For the complete documentation index, see [llms.txt](https://coolbax.gitbook.io/coolbax-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://coolbax.gitbook.io/coolbax-docs/handbuecher/storefront/bildvorschau-per-mousehover.md).

# Bildvorschau per Mousehover

## Installation & Demo <a href="#installation" id="installation"></a>

Sie können das Plugin [hier über den Shopware Community Store erwerben](https://store.shopware.com/cbax354566541058/bildvorschau-im-listing-bei-mousehover-sw6.html). Das Plugin wird wie ein ganz gewöhnliches Plugin installiert. Sollten Sie zum ersten Mal ein Plugin installieren, finden Sie unter dem folgenden Link eine Anleitung zur Installation von Plugins:

{% embed url="<https://docs.shopware.com/de/shopware-6-de/Erweiterungen/MeineErweiterungen#meine-plugins>" %}
Shopware Handbuch zur Installation von Apps & Plugins
{% endembed %}

Nach der Installation des Plugins schalten Sie das Plugin aktiv und öffnen die Konfigurationsmaske. Hierzu klicken Sie auf die drei Punkte in der letzten Spalte und wählen "Konfiguration".

**Das Plugin im Demoshop ansehen:**

{% embed url="<https://demo-6.coolbax.com/Fashion/>" %}
Plugin live im Demoshop anschauen
{% endembed %}

## Plugin Einstellungen

{% hint style="warning" %}
Manche Einstellungen werden erst sichtbar, wenn Sie den Cache leeren. Gehen Sie hierfür zu: *Einstellungen > System > Caches & Indizes* und nutzen den Button: *Cache leeren*
{% endhint %}

| Feldname                                                  | Bedeutung                                                                                                 |
| --------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
| Aktiv                                                     | Das Plugin für den jeweiligen Shop aktivieren oder deaktivieren.                                          |
| Anzeigen in                                               | Bestimmung der Anzeige auf Endgeräte (Mehrfachauswahl möglich).                                           |
| [Position des Image Sliders](#position-des-image-sliders) | Vorschaubereich kann nach Innen oder Außen der Produktbox aufgehen.                                       |
| [Maximale Anzahl Bilder](#maximale-anzahl-bilder)         | Maximale Anzahl der Bilder im Vorschaubereich.                                                            |
| Aufklappgeschwindigkeit                                   | Bestimmen Sie die Aufklappgeschwindigkeit des Vorschaubereich.                                            |
| [Hover-Effekt](#hover-effekt)                             | Beim Aktivierung wird ein Schatten und/oder Rahmen um die Produktbox angezeigt (Mehrfachauswahl möglich). |

#### Position des Image Sliders

Der Bereich in dem sich die Vorschaubilder befinden, kann innerhalb oder außerhalb der Produktbox ausgeklappt werden.&#x20;

* **Anzeigemodus = Außen:** Der Bereich mit den Vorschaubilder schiebt sich an der linken Seite der Produktbox nach außen. Elemente welche sich in diesem Bereich befinden, werden überdeckt.

<figure><img src="/files/L5nwZyrlHWC9dEQXRVaO" alt=""><figcaption><p>Beispiel für: <em>Anzeigemodus: Außen</em></p></figcaption></figure>

* **Anzeigemodus = Innen:** Der Bereich mit den Vorschaubilder schiebt sich von der linken Seite nach Innen in die Produktbox und schiebt den Inhalt der Produktbox etwas zusammen.

<figure><img src="/files/OYymTyRKupO5drPaEi39" alt=""><figcaption><p>Beispiel für: <em>Anzeigemodus: Innen</em></p></figcaption></figure>

#### Maximale Anzahl Bilder

Bestimmen Sie, wie viele Bilder sich maximal im eingefahrenen Vorschaubereich befinden können.&#x20;

Sollte der Platz für die Anzahl nicht ausreichen, wird automatisch ein vertikaler Slider eingefügt.&#x20;

Lassen Sie den Platz leer, wenn Sie alle verfügbaren Bilder darstellen möchten.

#### Hover-Effekt

Sie haben die Möglichkeit ein Rahmen und/oder einen Schatten um die Produktbox und den Vorschaubereich zu legen. Beides gleichzeitig ist ebenfalls möglich.

<div><figure><img src="/files/wJpbSOBgYjsEFMO3HCMH" alt=""><figcaption><p>Beispiel: <em>Hover-Effekt: Rahmen</em></p></figcaption></figure> <figure><img src="/files/GXPcemawG6fU4vz6Bp55" alt=""><figcaption><p>Beispiel: <em>Hover-Effekt: Schatten</em></p></figcaption></figure></div>