Code Works in codepen but not in blog post. |
Code Works in codepen but not in blog post. |
P4R4G0N |
Feb 10 2023, 11:39 AM
Post
#1
|
Group: Members Posts: 3 Joined: 10-February 23 Member No.: 28,799 |
Hello,
Im new here, so please bear with me if this is not the right place to ask this. I have a small blogger blog, and I want to add an image comparison slider in my posts. The problem I'm facing is the code works fine in codepen but when I add it to my blogger post it doesn't, and gives "Uncaught TypeError: $(...).imagesCompare is not a function" Below is the code, I can also provide more screenshots and the link for the original code if you want. CODE <link rel="stylesheet" href="https://rawcdn.githack.com/Akshat-h/jQuery-Image-compare/726deb3b86a5f83c0855955195e0fe7f4a3680fd/images-compare.css"/> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script> <script type="text/javascript" src="https://rawcdn.githack.com/Akshat-h/jQuery-Image-compare/f9a1123c627ee1f48bed97ba22a7f025ad107b4b/jquery.images-compare-1.js"></script> <script type="text/javascript"> $(function () { var imagesCompareElement = $('.js-img-compare').imagesCompare(); var imagesCompare = imagesCompareElement.data('imagesCompare'); var events = imagesCompare.events(); imagesCompare.on(events.changed, function (event) { console.log(events.changed); console.log(event.ratio); if (event.ratio < 0.4) { console.log('We see more than half of the back image'); } if (event.ratio > 0.6) { console.log('We see more than half of the front image'); } if (event.ratio <= 0) { console.log('We see completely back image'); } if (event.ratio >= 1) { console.log('We see completely front image'); } }); $('.js-front-btn').on('click', function (event) { event.preventDefault(); imagesCompare.setValue(1, true); }); $('.js-back-btn').on('click', function (event) { event.preventDefault(); imagesCompare.setValue(0, true); }); $('.js-toggle-btn').on('click', function (event) { event.preventDefault(); if (imagesCompare.getValue() >= 0 && imagesCompare.getValue() < 1) { imagesCompare.setValue(1, true); } else { imagesCompare.setValue(0, true); } }); }); </script> <div class="page-container"> <div class="js-img-compare"> <div style="display: none;"> <span class="images-compare-label">Before</span> <img src="https://freesvg.org/img/1286146771.png" alt="Before"> </div> <div> <span class="images-compare-label">After</span> <img src="https://freesvg.org/img/navyblue.png" alt="After"> </div> </div> <div> <button class="btn js-front-btn">Show front image</button> <button class="btn js-back-btn">Show back image</button> <button class="btn js-toggle-btn">Toggle</button> </div> </div> Please help me with it to ake it work. |
Lo-Fi Version | Time is now: 26th September 2024 - 12:40 PM |