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

Öffnen Sie Ihr Projekt im Kundenportal.
Klicken Sie in der Seitenleiste auf Site Builder.
Klicken Sie auf Site Builder öffnen.
Fügen Sie das Bild dem entsprechenden Block hinzu. Möglich sind:
- Beschreibung
- Galerie
Fügen Sie im Block Benutzerdefinierter Code den folgenden Code ein:

Copy

Full screen

Small screen

 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>

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)
Klicken Sie auf Vorschau, um sich die Änderungen anzeigen zu lassen.

Tutorial-Video zur Anleitung: