fslightbox in Magix Webdesigner einbinden

Fslightbox in Magix nutzen, so funktioniert es.

Magix Webdesigner erlaubt es einfach Webseiten zu erstellen. Etwas schwieriger wird es jedoch, wenn externe Scripte oder HTML-Code eingebunden werden muss. Dies funktioniert zwar, erfordert aber ein paar Klimmzüge.

Wir wollen uns anschauen, wie wir das “fslightbox”-Script in unsere Magix-Webseite einbinden können, um Bilder in einer Lightbox, bzw. Lightbox-Gallerie öffnen zu können. Voraussetzung ist, dass wir unsere Dateien mittels FTP auf unserem Webspace ablegen können.

Ablage des Scriptes auf dem Websspace

Zuerst müssen wir das “fslightbox”-Script herunterladen und anschließend auf den Webspace laden. Anschließend können wir den folgenden Code in Magix einfügen.

<script src="https://assets.ekiwi.de/fslightbox/3.3.0-2/fslightbox.js"></script> 

Mit dem Beispielcode verwenden Sie das Script auf unserem Webspace, damit können Sie das Script direkt verwenden, alternativ das Script auf ihren eigenen Webspace laden und die URL anpassen.

In Magix Webdesigner gehen wir nun in die “Webeigenschaften” – “Webseite”. Hier können wir den Code nun in den “HTML-Code (body)” einfügen.

Hinweis: der Zugriff auf den Body-Bereich ist nur mit Magix Webdesigner Pro möglich, die Standardfunktion bietet diese Funktion leider nicht.

Nun müssen wir den Code für unsere Bilder einfügen. Hierzu benötigen wir einen Platzhalter, wir verwenden hierfür das Rechteck.

Nach dem Einfügen markieren wir dieses und bearbeiten mit Rechtsklick die “Webeigenschaften”.

Im Tab “Platzhalter” fügen wir nun den Code für unsere Bilder/Lightbox ein.

Hier ein Beispiel:

<a data-fslightbox="gallery" href="https://ekiwi.de/temp/lightbox/1.jpg"> 
    <img src="https://ekiwi.de/temp/lightbox/1_tn.jpg"> 
</a> 

Die Bilder müssen idealerweise auf einem Webserver erreichbar sein.

Das Ergebnis

Fertig! In der Vorschau werden nun die Bilder angezeigt.

Mit einem Klick öffnet sich nun die Lightbox.

Problemlösungen

Link wird nur als Bild geöffnet

Wird nur das Bild als Link geöffnet, konnte die Bibliothek nicht richtig geladen werden, überprüfen Sie daher, ob die fslightbox-Bibliothek richtig einbunden und geladen wurde.

Invalid Source

Wird “Invalid source” angezeigt, konnten die Bilder nicht vom Server geladen werden.

Überprüfen Sie entweder den Link zum Bild. Laden Sie die Bilder von einem anderen Webspace, ist es möglich, dass der Webserver einen CORS-Fehler erzeugt. Dieser verhindert, dass ein Script auf Ressourcen eines anderen Servers zugreifen kann.

In diesem Fall kann es helfen eine .htaccess Datei mit folgendem Inhalt auf dem Server mit den Bildern anzulegen.

Header set Access-Control-Allow-Origin "*"

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert