- This topic has 3 replies, 2 voices, and was last updated 2 years, 11 months ago by David.
Viewing 4 posts - 1 through 4 (of 4 total)
-
AuthorPosts
-
April 12, 2021 at 6:33 am #1730941Stephan
Hello,
as a header, I wanted to implement this on my site:
https://github.com/hmongouachon/rgbKineticSliderSo 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,
StephanApril 12, 2021 at 7:19 am #1731293DavidStaffCustomer SupportHi 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
});
April 12, 2021 at 9:14 am #1731455StephanThat was it! 🙂 Thank you very much!
April 12, 2021 at 11:30 am #1731630DavidStaffCustomer SupportGlad to be of help
-
AuthorPosts
Viewing 4 posts - 1 through 4 (of 4 total)
- You must be logged in to reply to this topic.