вопрос
здравствуйте, я ищу способ отображения фотографий до и после в моих новостях. я хочу вставить слайдер, который показывает, как выглядит фотография до и после. вот пример: https://codepen.io/josephwong2004/pen/NWRGxdR
По поводу реализации, всё просто - переместите HTML код к себе в Shortstory или fullstory (смотря где хотите отображать):
После чего добавьте весь CSS код за исключением участка с ссылками на изображениями в свой CSS файл:
Часть кода встройте в Shortstory или fullstory (где будете отображать), чтобы заменить их на теги. Код заключите в
Создайте 2 доп.поля.
photodo - фотографии "До"
photoposle - фотографии "После".
Тип: Загружаемое изображение.
Ну и последнее - добавьте код в JS:
<body>
<div class='container'>
<div class='img background-img'></div>
<div class='img foreground-img'></div>
<input type="range" min="1" max="100" value="50" class="slider" name='slider' id="slider">
<div class='slider-button'></div>
</div>
</body>После чего добавьте весь CSS код за исключением участка с ссылками на изображениями в свой CSS файл:
.container {
position: relative;
width: 900px;
height: 600px;
border: 2px solid white;
.img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: 900px 100%;
}
.slider {
position: absolute;
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 100%;
background: rgba(#f2f2f2, .3);
outline: none;
margin: 0;
transition: all .2s;
@include center;
&:hover {
background: rgba(#f2f2f2, .1);
}
&::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 6px;
height: 600px;
background: white;
cursor: pointer;
}
&::-moz-range-thumb {
width: 6px;
height: 600px;
background: white;
cursor: pointer;
}
}
.slider-button {
$size: 30px;
pointer-events: none;
position: absolute;
width: $size;
height: $size;
border-radius: 50%;
background-color: white;
left: calc(50% - 18px);
top: calc(50% - 18px);
@include center;
@mixin arrow-helper() {
content: '';
padding: 3px;
display: inline-block;
border: solid #5D5D5D;
border-width: 0 2px 2px 0;
}
&:after {
@include arrow-helper();
transform: rotate(-45deg);
}
&:before {
@include arrow-helper();
transform: rotate(135deg);
}
}
}Часть кода встройте в Shortstory или fullstory (где будете отображать), чтобы заменить их на теги. Код заключите в
<style>
.background-img {
background-image: url('[xfvalue_image_url_photodo]');
}
.foreground-img {
background-image: url('[xfvalue_image_url_photoposle]');
width: 50%;
}
</style>
Создайте 2 доп.поля.
photodo - фотографии "До"
photoposle - фотографии "После".
Тип: Загружаемое изображение.
Ну и последнее - добавьте код в JS:
$("#slider").on("input change", (e)=>{
const sliderPos = e.target.value;
// Update the width of the foreground image
$('.foreground-img').css('width', `${sliderPos}%`)
// Update the position of the slider button
$('.slider-button').css('left', `calc(${sliderPos}% - 18px)`)
});
