# Bildvorschau im Listing bei Mousehover

{% embed url="<https://www.youtube.com/watch?v=lTEBPaaqtzU>" %}

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

Sie können das Plugin über den Shopware Community Store erwerben. Das Plugin wird wie ein ganz gewöhnliches Plugin installiert.

{% embed url="<http://store.shopware.com/detail/index/sArticle/164327>" %}
Plugin über den Shopware Community Store erwerben
{% endembed %}

Nach der Installation des Plugins öffnet sich die Konfigurationsmaske des Plugins.

### Die Einstellungen des Plugins <a href="#plugin_einstellungen" id="plugin_einstellungen"></a>

Nach der erfolgreichen Installation des Plugins können Sie in der Konfigurationsmaske die Einstellungen vornehmen und weitere Parameter ergänzen.

<figure><img src="/files/nb1NEENVQHbsG2o3WlN3" alt="" width="375"><figcaption></figcaption></figure>

| Feldname                   | Bedeutung                                                                                                                                        |
| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| Aktiv                      | Das Plugin für den jeweiligen Shop aktivieren oder deaktivieren                                                                                  |
| Anzeigemodus               | In welche Richtung sollen das Feld mit den Vorschaubilder eingeblendet werden                                                                    |
| Geräte-Größe               | Hier stellen Sie ein, bei welchen Geräten dieser Effekt benutzt werden soll. Mehrfachauswahl möglich.                                            |
| Aufklappen Geschwindigkeit | Hier stellen Sie die Scroll Geschwindigkeit in "ms" ein. Diese Zeit bestimmt, wie lange das Feld mit den Vorschaubildern zum einblenden benötigt |
| Hover-Effekt               | Beim Aktivieren des Effekts kann ein Schatten, ein Rahmen oder beides zusammen dargestellt werden.                                               |

### Die Einstellungen in den Kategorien <a href="#kategorie_einstellungen" id="kategorie_einstellungen"></a>

Sie haben noch einmal im Kategorie Modul die Möglichkeit von Ihrer Einstellung im Plugin (Anzeigemodus) abzuweichen. Entscheiden Sie individuell, ob das Feld mit den Vorschaubildern nach außen oder nach innen aufgehen soll. Solange hier keine Einstellung getroffen wurde, wird die Einstellung im Plugin verwendet.

<figure><img src="/files/K71jpzpCj60moB00hAJo" alt="" width="563"><figcaption></figcaption></figure>

### Darstellung im Frontend <a href="#darstellung_frontend" id="darstellung_frontend"></a>

#### Anzeigemodus: nach außen <a href="#darstellung_anzeigemodus_aussen" id="darstellung_anzeigemodus_aussen"></a>

Hier sehen Sie die Darstellung mit der Einstellung: Anzeigemodus - Nach außen öffnen. Folgende Effekte wurden benutzt (von links nach rechts): Rahmen, Schatten, Rahmen & Schatten.

<div><figure><img src="/files/sfqfUEbEpCPmmDtQUCmh" alt=""><figcaption></figcaption></figure> <figure><img src="/files/QHOnXxmrr8FInapErvsC" alt=""><figcaption></figcaption></figure> <figure><img src="/files/99IBVfJ8Y6rutskp0q8M" alt=""><figcaption></figcaption></figure></div>

#### Anzeigemodus: nach innen <a href="#darstellung_anzeigemodus_innen" id="darstellung_anzeigemodus_innen"></a>

Hier sehen Sie die Darstellung mit der Einstellung: Anzeigemodus - Nach innen öffnen. Folgende Effekte wurden benutzt (von links nach rechts): Rahmen, Schatten, Rahmen & Schatten.

<div><figure><img src="/files/vh9cKICPuvTjHDhwiUp6" alt=""><figcaption></figcaption></figure> <figure><img src="/files/KU3snAteAEeefHsUCpgK" alt=""><figcaption></figcaption></figure> <figure><img src="/files/fhgVU18Ygiq2qd4TIg3U" alt=""><figcaption></figcaption></figure></div>

### Responsive - Tablet, Smartphone <a href="#responsive_darstellung" id="responsive_darstellung"></a>

Die Anzeige der Bildvorschau im Listing bei Mousehover. Dargestellt auf den verschiedenen Endgeräten. Aufgrund von Platzmangel kann, auf dem Smartphone, nur der Anzeigemodus: "nach innen" verwendet werden. Dies erfolgt unabhängig von Ihrer gewählten Einstellung.

<div><figure><img src="/files/Rcp2QpPhuYyZWdyrTQDW" alt=""><figcaption></figcaption></figure> <figure><img src="/files/4y9OkdMiDhcvDKYTkV6n" alt=""><figcaption></figcaption></figure> <figure><img src="/files/Z4da4jwAw8ZNgeLkZfl9" alt=""><figcaption></figcaption></figure></div>

<br>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://coolbax.gitbook.io/coolbax-docs/shopware-5-plugins/storefront/bildvorschau-im-listing-bei-mousehover.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.