Alindberg
-
Posts
5 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Posts posted by Alindberg
-
-
2 minutes ago, rwp said:
Can you post a link to your page?
sure it is in swedish but it should'nt matter. The password is abc123 and the slider is at the bottom of the vfx page
-
7 minutes ago, derricksrandomviews said:
That one does not work with 7.1. She has a version for 7.1 but it's a paid plugin.
-
5 minutes ago, derricksrandomviews said:
I don't know what template you are using, but I suspect you just need a little code tweak or two so maybe this will help:
I'm using this template https://codepen.io/nosurprisethere/pen/xrXjYV
the link you sent is unfortunately an image slider rather than a before after one. The problem i have is that when viewing the code in itself the slider works as intended but on squarespace the before image (on the left) sqeezes into the area to the left of the slider instead of being cropped by it.
-
So I've been trying to create a simple before/after slider for my website and after a while i managed to do some copy pasting that eventually gave me this code.
The code works fine when simply put in a text document and launched as a html file but when added into a code block on squarespace the before picture streches with the slider rather than being cropped by it.
I'm really not good at coding and any help will be appreciated.
<div id="page"> <div class="wrapper"> <div class="before"> <img class="content-image" src="https://static1.squarespace.com/static/5ef72eea964b6e3a6fece508/t/5f11f277df199179a75be322/1595011709533/after.jpg" draggable="false"/> </div> <div class="after"> <img class="content-image" src="https://static1.squarespace.com/static/5ef72eea964b6e3a6fece508/t/5f11f26a402f1548b9366293/1595011696334/before.jpg " draggable="false"/> </div> <div class="scroller"> <svg class="scroller__thumb" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><polygon points="0 50 37 68 37 32 0 50" style="fill:#fff"/><polygon points="100 50 64 32 64 68 100 50" style="fill:#fff"/></svg> </div> </div> </div> <script>// I hope this over-commenting helps. Let's do this! // Let's use the 'active' variable to let us know when we're using it let active = false; // First we'll have to set up our event listeners // We want to watch for clicks on our scroller document.querySelector('.scroller').addEventListener('mousedown',function(){ active = true; // Add our scrolling class so the scroller has full opacity while active document.querySelector('.scroller').classList.add('scrolling'); }); // We also want to watch the body for changes to the state, // like moving around and releasing the click // so let's set up our event listeners document.body.addEventListener('mouseup',function(){ active = false; document.querySelector('.scroller').classList.remove('scrolling'); }); document.body.addEventListener('mouseleave',function(){ active = false; document.querySelector('.scroller').classList.remove('scrolling'); }); // Let's figure out where their mouse is at document.body.addEventListener('mousemove',function(e){ if (!active) return; // Their mouse is here... let x = e.pageX; // but we want it relative to our wrapper x -= document.querySelector('.wrapper').getBoundingClientRect().left; // Okay let's change our state scrollIt(x); }); // Let's use this function function scrollIt(x){ let transform = Math.max(0,(Math.min(x,document.querySelector('.wrapper').offsetWidth))); document.querySelector('.after').style.width = transform+"px"; document.querySelector('.scroller').style.left = transform-25+"px"; } // Let's set our opening state based off the width, // we want to show a bit of both images so the user can see what's going on scrollIt(450); // And finally let's repeat the process for touch events // first our middle scroller... document.querySelector('.scroller').addEventListener('touchstart',function(){ active = true; document.querySelector('.scroller').classList.add('scrolling'); }); document.body.addEventListener('touchend',function(){ active = false; document.querySelector('.scroller').classList.remove('scrolling'); }); document.body.addEventListener('touchcancel',function(){ active = false; document.querySelector('.scroller').classList.remove('scrolling'); });</script> <style>/* You can remove this page div in your website */ #page{ width:100%; height:100%; position:absolute; } /* Our normalize css */ *{ margin:0; box-sizing: border-box; } /* Our wrapper */ .wrapper{ width: 900px; height: 600px; position: absolute; left:50%; top:50%; transform:translate3d(-50%,-50%,0); overflow:hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); } /* Our image information */ .before, .after { width:100%; height:100%; max-width: 100%; background-repeat:no-repeat; background-color: white; background-size: cover; background-position: center; position: absolute; top:0; left:0; pointer-events:none; overflow: hidden; } .content-image{ height:100%; width:relative; } .after{ width:30%; } .scroller{ width: 50px; height:50px; position: absolute; left:100px; top:50%; transform:translateY(-50%); border-radius:50%; background-color: transparent; opacity:0.9; pointer-events:auto; cursor: pointer; } .scroller:hover{ opacity:1; } .scrolling{ pointer-events:none; opacity:1; // z-index: 1; } .scroller__thumb{ width:100%; height:100%; padding:2px; } .scroller:before, .scroller:after{ content:" "; display: block; width: 3px; height: 9999px; position: absolute; left: 50%; margin-left: -1.5px; z-index: 40; transition:0.1s; Background-size: cover; } .scroller:before{ top:100%; } .scroller:after{ bottom:100%; } /* If you want to cahnge the colors, make sure you change the fill in the svgs to match */ .scroller{ border: 5px solid #fff; } .scroller:before, .scroller:after{ background: #fff; }</style>
HTML looks different when used in squarespace vs when view on its own in chrome
in Customize with code
Posted
this one works great! Thanks alot