JS-Library in der WoltLab Suite einbinden

  • Affected 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/

  • Julian Pfeil

    Changed the title of the thread from “JS-Libary in der WoltLab Suite einbinden” to “JS-Library in der WoltLab Suite einbinden”.
  • 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/

  • 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:

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!