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
- Öffnen Sie Ihr Projekt im Kundenportal.
- Klicken Sie in der Seitenleiste auf Website-Baukasten.
- Klicken Sie auf Website-Baukasten ö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
- html
<script>
(function () {
var blocks = ['.block--description', '.block--gallery'];
var style = document.createElement('link');
style.rel = 'stylesheet';
style.href = 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css';
document.getElementsByTagName('head')[0].appendChild(style);
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js';
script.addEventListener('load', function () {
var fancyBoxClass = 'image-fancybox';
blocks.forEach(function (block) {
$(block)
.find('[data-bg]')
.toArray()
.forEach(function (element) {
var url = element.getAttribute('data-bg')
.replace('url(', '')
.replace(')', '')
.replace('"', '')
.trim();
if (url === '') {
return;
}
$(element)
.parent()
.wrap('<a style="width: 100%; height: 100%;" class="' + fancyBoxClass + '" href="' + url + '"></a>');
});
});
$('.' + fancyBoxClass)
.fancybox();
}, false);
document.getElementsByTagName('body')[0].appendChild(script);
})();
</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:
Eigenen Code hinzufügen
- Klicken Sie im Website-Baukasten auf Block hinzufügen und dann auf Benutzerdefinierter Code.
- Fügen Sie Ihren eigenen Code in den Block ein.
War dieser Artikel hilfreich?
Vielen Dank für Ihr Feedback!
Wir werden Ihr Feedback aufgreifen und dazu nutzen, Ihr Erlebnis verbessern.Diese Seite bewerten
Diese Seite bewerten
Jetzt nicht
Vielen Dank für Ihr Feedback!
Nützliche Links
Letztmalig aktualisiert:
14. Februar 2023
Haben Sie einen Tippfehler oder einen anderen Textfehler gefunden? Wählen Sie den Text aus und drücken Sie Strg+Eingabe.