Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Хаки » До и после слайдера в новостях?

До и после слайдера в новостях?


     16.07.2022    Все вопросы » Хаки    98

вопрос
здравствуйте, я ищу способ отображения фотографий до и после в моих новостях. я хочу вставить слайдер, который показывает, как выглядит фотография до и после. вот пример: https://codepen.io/josephwong2004/pen/NWRGxdR

Ответил: typeweb


По поводу реализации, всё просто - переместите HTML код к себе в Shortstory или fullstory (смотря где хотите отображать):

<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)`)
});

3 комментария

typeweb
Юзер

typeweb - 17 июля 2022 15:29 -

p.s <body> </body> уберите с HTML который я дал, так как в примере по ссылке что Вы дали - код используется на пустой странице.

xDaMoNx
Юзер

xDaMoNx - 17 июля 2022 16:42 -

спасибо. есть ли возможность использовать html коды в новостях? я бы хотел использовать слайдер до и после несколько раз в новости между текстом.

typeweb
Юзер

typeweb - 18 июля 2022 08:42 -

Проделываете теже самые действия и вставляете через HTML редактор на сайте в полную новость, тогда просто заменяете ссылки на изображения в самом коде, без дополнительных полей.

Либо создаете несколько классов и несколько доп.полей, а после просто вставляете тег доп.поля в саму новость (такую настройку можно включить в самом доп.поле) - в нужном Вам месте.

Второй вариант это сделать табы в которых несколько вкладок по типу "Сравнение 1", "Сравнение 2". Внутри которых будет по 2 доп поля с картинками.

Можно подумать над упрощением и реализацией плагина для автоматизации всего этого дела, но это уже на платной основе :)

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх