So zeigen Sie Bilder in Modalfenstern an

So funktioniert's

Sie können Bilder in Modalfenstern anzeigen lassen, um deren Darstellung noch benutzerfreundlicher zu gestalten. Dafür ist ein benutzerdefinierter HTML-Code erforderlich. Sie können eine bestehende Lösung nutzen oder Ihren eigenen Code hinzufügen.

Wie komme ich dazu

Bestehende Lösung nutzen

1. Öffnen Sie Ihr Kundenportal-Projekt, und navigieren Sie zum Menüpunkt Storefronts > Websites.
2. Klicken Sie auf Site Builder öffnen.
3. Wenn Ihre Website mehrere Seiten umfasst, wählen Sie die gewünschte Seite aus:
   1. Klicken Sie oben im Editor auf den Titel der aktuellen Seite.
   2. Wählen Sie die gewünschte Seite aus der Drop-down-Liste aus.
4. Fügen Sie das Bild in den gewünschten Block ein. Mögliche Blöcke sind:
   • Beschreibung
   • Galerie
5. Fügen Sie den folgenden Code in den Block Benutzerdefinierter Code ein:

 1<script>
 2(function () {
 3  var blocks = ['.block--description', '.block--gallery'];
 4
 5  var style = document.createElement('link');
 6  style.rel = 'stylesheet';
 7  style.href = 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css';
 8  document.getElementsByTagName('head')[0].appendChild(style);
 9
10  var script = document.createElement('script');
11  script.type = 'text/javascript';
12  script.src = 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js';
13  script.addEventListener('load', function () {
14    var fancyBoxClass = 'image-fancybox';
15    blocks.forEach(function (block) {
16      $(block)
17        .find('[data-bg]')
18        .toArray()
19        .forEach(function (element) {
20          var url = element.getAttribute('data-bg')
21            .replace('url(', '')
22            .replace(')', '')
23            .replace('"', '')
24            .trim();
25          if (url === '') {
26            return;
27          }
28          $(element)
29            .parent()
30            .wrap(`<a style="width: 100%; height: 100%;" class="${fancyBoxClass}" href="${url}"></a>`);
31        });
32    });
33
34    $(`.${fancyBoxClass}`)
35      .fancybox();
36  }, false);
37  document.getElementsByTagName('body')[0].appendChild(script);
38})();
39</script>

6. Geben Sie im Parameter blocks die Namen der CSS-Klassen der Blöcke an, für die Modalfenster zum Einsatz kommen sollen. Nutzen Sie Kommas als Trennzeichen, um die Namen zu separieren. Wenn mehrere identische Blöcke auf der Website vorhanden sind, werden die Einstellungen für alle übernommen. Möglich sind:
   • .block--description (Beschreibung-Block)
   • .block--gallery (Galerie-Block)
7. Klicken Sie auf Vorschau, um sich die Änderungen anzeigen zu lassen.

Tutorial-Video zur Anleitung:

Eigenen Code hinzufügen

1. Klicken Sie im Site Builder auf Block hinzufügen und dann auf Benutzerdefinierter Code.

2. Fügen Sie Ihren eigenen Code in den Block ein.

Nützliche Links