JS-Library in der WoltLab Suite einbinden

  • Betroffene Version
    WoltLab Suite 5.4

    Hey allerseits,

    hat jemand von euch Erfahrungen damit JS-Galerie-Libraries in WSC-CMS-Seiten zu nutzen? Ich habe unter Anderem Lightgallery.js, PhotoSwipe und Nanogallery getestet und alles wird im WSC auf mir unerklärbare Weise unnutzbar (keine Fehlermeldungen, alles korrekt eingebunden, aber dennoch kein Effekt) gemacht.

    Mein Schema sieht wie folgt aus:

    Code: Head-Code
    <link type="text/css" rel="stylesheet" href="custom3rdParty/lightgallery.js/css/lightgallery.css" /> 

    Ganz nach diesem: https://sachinchoolur.github.io/lightgallery.js/docs/

    Managed Webhosting, hochwertige Plugins und individuelle Auftragsarbeiten:

    Julian-Pfeil.de

    2 Mal editiert, zuletzt von Julian Pfeil (25. Juli 2021 um 15:32)

  • Julian Pfeil 25. Juli 2021 um 15:12

    Hat den Titel des Themas von „JS-Libary in der WoltLab Suite einbinden“ zu „JS-Library in der WoltLab Suite einbinden“ geändert.
  • Was genau willst du denn damit umsetzen?

    Eine kleine Galerie.

    Julian Pfeil ich nutze den Wowslider in einem Woltlab Forum von mir. Damit kann man eine Galerie für die Woltlab Suite mit vielen Galerie-Effekten erzeugen und nutzen

    Danke dir, ich werd's mal ausprobieren.


    Darauf geachtet?

    Hab's nun ergänzt. Gab leider keine Veänderung.

    @all:

    Mein Schema sieht wie folgt aus:

    Code: Head-Code
    <link type="text/css" rel="stylesheet" href="custom3rdParty/lightgallery.js/css/lightgallery.css" /> 

    Ganz nach diesem: https://sachinchoolur.github.io/lightgallery.js/docs/

    Managed Webhosting, hochwertige Plugins und individuelle Auftragsarbeiten:

    Julian-Pfeil.de

  • Hallo,

    das Script enthält eine UMD-Definition. Du musst es über require.js laden. Nichts desto trotz wundert mich die Fehlermeldung ein wenig, typischerweise geht nur das eingebettete Script kaputt und nicht unser Code.

    Verwende:

    JavaScript
    require(['{@$__wcf->getPath()}js/3rdParty/chartjs/Chart{if !ENABLE_DEBUG_MODE}.min{/if}.js?v={@LAST_UPDATE_TIME}'], function (Chart) {
     console.log(Chart);
    });

    Ich lass das mal noch hier. Das könnte eventuell mit meinem Problem zutun haben. Umsetzen konnte ich es jedoch bisher nicht erfolgreich.

    Funktioniert leider nicht:

    Code
    <script type="text/javascript" date-relocate="true">
    require(['{@$__wcf->getPath()}custom3rdParty/lightgallery.js/js/lightgallery{if !ENABLE_DEBUG_MODE}.min{/if}.js?v={@LAST_UPDATE_TIME}']);
    </script>
    
    <script type="text/javascript" date-relocate="true">
    document.onload = function() {
    lightGallery(document.getElementById('lightGallery'));
    };
    </script>

    Erzeugt einen Fehler in der require.linearExecution.js unter:

    Managed Webhosting, hochwertige Plugins und individuelle Auftragsarbeiten:

    Julian-Pfeil.de

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!