code image before /after code doesn"t work

MM3000
New Member
2 0 0

I want to integrate a slide image before/after in my shopify code, but it doesn't work, the bar doesn't move, I stayed all day on it but I can't find if someone has an idea, I post the code:

// code added to theme.js file 

if(document.querySelector(".comparison")) {

function imageBeforeAfter(before,after) {
let urlImageBefore = before;
let urlImageAfter = after;
document.querySelector(".comparison-img").style.backgroundImage = `url(${urlImageBefore})`;
document.querySelector(".comparison-divisor").style.backgroundImage = `url(${urlImageAfter})`;
}

let divisor = document.querySelector(".comparison-divisor"),
handle = document.querySelector(".comparison-handle"),
slider = document.querySelector(".comparison-slider");

function moveDivisor() {
handle.style.left = slider.value+"%";
divisor.style.width = slider.value+"%";
}
window.onload = function() {
moveDivisor();
};
}

// code added to theme.css 

 

.comparison-container {
margin: 15px 0;
max-width: 800px; }

.comparison {
width: 100%;
padding-bottom: 100%;
overflow: hidden;
position: relative; }

.comparison .comparison-img {
position: absolute;
background-size: cover;
font-size: 0;
width: 100%;
height: 100%;
margin: 0; }

.comparison-divisor {
background-size: cover;
position: absolute;
width: 50%;
box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.3);
bottom: 0;
height: 100%; }
.comparison-divisor::before, .comparison-divisor::after {
content: '';
position: absolute;
right: -1px;
width: 2px;
height: calc(50% - 25px);
background: rgba(255, 255, 255, 0.8);
z-index: 3; }
.comparison-divisor::before {
top: 0;
box-shadow: 0 -3px 8px 1px rgba(0, 0, 0, 0.3); }
.comparison-divisor::after {
bottom: 0;
box-shadow: 0 3px 8px 1px rgba(0, 0, 0, 0.3); }

.comparison-handle {
position: absolute;
height: 50px;
width: 50px;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
z-index: 1; }
.comparison-handle::before, .comparison-handle::after {
content: '';
width: 0;
height: 0;
border: 4px inset transparent;
position: absolute;
top: 50%;
margin-top: -5px; }
.comparison-handle::before {
border-right: 5px solid white;
left: 50%;
margin-left: -16px; }
.comparison-handle::after {
border-left: 5px solid white;
right: 50%;
margin-right: -16px; }

.comparison input[type=range] {
max-width: inherit !important;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
outline: none;
position: absolute;
top: 50%;
left: -25px;
transform: translateY(-52%);
background-color: transparent;
width: calc(100% + 50px);
padding: 0;
z-index: 2; }
.comparison input[type=range]:focus, .comparison input[type=range]:active {
border: none;
outline: none; }

.comparison input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 50px;
width: 50px;
border-radius: 50%;
background: transparent;
border: 4px solid white;
box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.3); }

.comparison input[type=range]::-moz-range-track {
-moz-appearance: none;
height: 15px;
width: 100%;
background-color: transparent;
position: relative;
outline: none; }

// the html code that i added in product page 

<div class="comparison-container">
<div class="comparison">
<figure class="comparison-img">
<div class="comparison-handle"></div>
<div class="comparison-divisor"></div>
</figure>
<input type="range" min="0" max="100" value="50" class="comparison-slider" oninput="moveDivisor()"></div>
</div>
<script>
window.addEventListener("DOMContentLoaded", () => {

let urlImageAvant = "https://cdn.shopify.com/s/files/1/0059/9198/9282/files/photoshop-face-before.jpg?v=1612783634";
let urlImageApres = "https://cdn.shopify.com/s/files/1/0059/9198/9282/files/photoshop-face-after.jpg?v=1612783620";

imageBeforeAfter(urlImageAvant,urlImageApres);
});
</script>

the result that i have , as you can see in the picture in my result I can only move the circle that moves without the bar and without the picture


myresult.JPG

the result i should have :

 resultIshouldHave.JPG

 

 

0 Likes