[Support request] Correct implementation of Javascript?

Home Forums Support [Support request] Correct implementation of Javascript?

Home Forums Support Correct implementation of Javascript?

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1730941
    Stephan

    Hello,

    as a header, I wanted to implement this on my site:
    https://github.com/hmongouachon/rgbKineticSlider

    So I made one hook (wp_head) with

    <script src="https://cdn.jsdelivr.net/gh/hmongouachon/rgbKineticSlider/js/libs/TweenMax.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/hmongouachon/rgbKineticSlider/js/libs/imagesLoaded.pkgd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/hmongouachon/rgbKineticSlider/js/libs/pixi.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/hmongouachon/rgbKineticSlider/js/libs/pixi-filters.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/hmongouachon/rgbKineticSlider/js/rgbKineticSlider.js"></script>

    to load all the js stuff and one header element with

    <div id="rgbKineticSlider" class="rgbKineticSlider"></div>
    
    <nav>
        <a href="#" class="main-nav prev" data-nav="previous">Prev <span></span></a>
        <a href="#" class="main-nav next" data-nav="next">Next <span></span></a>
    </nav> 
    
    <script>
    			// images setup
    const images = [
         "https://example.com/bilder/pfeil.jpg",
         "https://example.com/bilder/brandenburgertor.jpg",
         "https://example.com/bilder/potsdamerplatz.jpg",
    ];
    
    // content setup
    const texts = [
        ["Earth", "Surface gravity: 9.807 m/s²"],
        ["Mars", "Surface gravity: 3.711 m/s²"],
        ["Venus", "Surface gravity: 8.87 m/s²"],
    ]
    
    // init plugin 
    rgbKineticSlider = new rgbKineticSlider({// images and content sources
    slideImages: images, // array of images >demo size : 1920 x 1080
    itemsTitles: texts, // array of titles / subtitles
    
    // displacement images sources
    backgroundDisplacementSprite: 'img/map-9.jpg', // slide displacement image 
    cursorDisplacementSprite: 'img/displace-circle.png', // cursor displacement image
    
    // cursor displacement effect 
    cursorImgEffect : true, // enable cursor effect
    cursorTextEffect : false, // enable cursor text effect
    cursorScaleIntensity : 0.65, // cursor effect intensity
    cursorMomentum : 0.14, // lower is slower
    
    // swipe 
    swipe: true, // enable swipe
    swipeDistance : window.innerWidth * 0.4, // swipe distance - ex : 580
    swipeScaleIntensity: 2, // scale intensity during swipping
    
    // slide transition
    slideTransitionDuration : 1, // transition duration
    transitionScaleIntensity : 30, // scale intensity during transition
    transitionScaleAmplitude : 160, // scale amplitude during transition
    
    // regular navigation
    nav: true, // enable navigation
    navElement: '.main-nav', // set nav class
    
    // image rgb effect
    imagesRgbEffect : false, // enable img rgb effect
    imagesRgbIntensity : 0.9, // set img rgb intensity
    navImagesRgbIntensity : 80, // set img rgb intensity for regular nav 
    
    // texts settings
    textsDisplay : true, // show title
    textsSubTitleDisplay : true, // show subtitles
    textsTiltEffect : true, // enable text tilt
    googleFonts : ['Playfair Display:700', 'Roboto:400'], // select google font to use
    buttonMode : false, // enable button mode for title
    textsRgbEffect : true, // enable text rgb effect
    textsRgbIntensity : 0.03, // set text rgb intensity
    navTextsRgbIntensity : 15, // set text rgb intensity for regular nav
    
    textTitleColor : 'white', // title color
    textTitleSize : 125, // title size
    mobileTextTitleSize : 125, // title size
    textTitleLetterspacing : 3, // title letterspacing
    
    textSubTitleColor : 'white', // subtitle color ex : 0x000000
    textSubTitleSize : 21, // subtitle size
    mobileTextSubTitleSize : 21, // mobile subtitle size
    textSubTitleLetterspacing : 2, // subtitle letter spacing
    textSubTitleOffsetTop : 90, // subtitle offset top
    mobileTextSubTitleOffsetTop : 90, // mobile subtitle offset top});
    
    </script>
    
    

    It all looks right to me, but the pictures do not load. The config of the effect is not done I know that, but at least it should show up?

    Any hint is highly appreciated!

    Thanks,
    Stephan

    #1731293
    David
    Staff
    Customer Support

    Hi there,

    if your right click and inspect the page you will see a red error in the console: SyntaxError: Unexpected end of script

    Which points to the end of the init script – looks like it doesn’t like there is no space between the last comment and the closing });

    #1731455
    Stephan

    That was it! 🙂 Thank you very much!

    #1731630
    David
    Staff
    Customer Support

    Glad to be of help

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.