Отображение на мобильных девайсах

Question

Столкнулся с такой проблеммой.

Есть гиф файлы с наборами шагов для айфона и андроида, при нажатии на конкретный шаг должна появляться гифка для этого шага (определять по номерам соответственно) и в зависимости от текущего устройства пользователя, если это мак или айфон то инструкция для айфона, в остальных случаях андроид.

$('.js-tab-trigger').click(function() {
  var id = $(this).attr('data-tab'),
    content = $('.js-tab-content[data-tab="' + id + '"]');

  $('.js-tab-trigger.active').removeClass('active');
  $(this).addClass('active');

  $('.js-tab-content.active').removeClass('active');
  content.addClass('active');
});


$('.ios, .iphone, .ipad, .ipod').ready(function() {
  $(".apple_dev").show();
  $(".andro_dev").hide();
});

$('.android, .blackberry, .windows, .fxos, .meego, .television').ready(function() {
  $(".apple_dev").hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-flex align-items-end justify-content-end tabs steps">
  <div class="tab-content device">
    <img class="tab-content__item js-tab-content active andro_dev dev_mob" data-tab="1" data-toggle="collapse" width="186px" height="384px" src="img/gifs/Step_01.gif" alt="step1">
    <img class="tab-content__item js-tab-content apple_dev dev_mob" data-tab="1" data-toggle="collapse" width="186px" height="384px" src="img/gifs/ap_01.gif" alt="step1">
    <img class="tab-content__item js-tab-content andro_dev dev_mob" data-tab="2" data-toggle="collapsed" width="186px" height="384px" src="img/gifs/Step_02.gif" alt="step2">
    <img class="tab-content__item js-tab-content apple_dev dev_mob" data-tab="2" data-toggle="collapse" width="186px" height="384px" src="img/gifs/ap_02.gif" alt="step2">
    <img class="tab-content__item js-tab-content andro_dev dev_mob" data-tab="3" data-toggle="collapsed" width="186px" height="384px" src="img/gifs/Step_03.gif" alt="step3">
    <img class="tab-content__item js-tab-content apple_dev dev_mob" data-tab="3" data-toggle="collapse" width="186px" height="384px" src="img/gifs/ap_03.gif" alt="step3">
    <img class="tab-content__item js-tab-content andro_dev dev_mob" data-tab="4" data-toggle="collapsed" width="186px" height="384px" src="img/gifs/Step_04.gif" alt="step4">
    <img class="tab-content__item js-tab-content apple_dev dev_mob" data-tab="4" data-toggle="collapsed" width="186px" height="384px" src="img/gifs/ap_04.gif" alt="step4">
  </div>

  <div class="tabs stepstoinst">

    <div class="steps_title">
      <h2 class="">Простая установка</h2>
    </div>

    <div class="tab-header step">
      <a href="#step1" class="tab-header__item js-tab-trigger active" data-tab="1"><span class="step_number">1</span><p>В главном меню на сайте выберите<br> версию Android</p></a>
    </div>
    <div class="tab-header step">
      <a href="#step2" class="tab-header__item js-tab-trigger" data-tab="2"><span class="step_number">2</span><p>Сохраните файл на телефон<br> и запустите установку</p></a>
    </div>
    <div class="tab-header step">
      <a href="#step3" class="tab-header__item js-tab-trigger" data-tab="3"><span class="step_number">3</span><p>Разрешите установку<br> приложения из<br> неизвестных источников</p></a>
    </div>
    <div class="tab-header step">
      <a href="#step4" class="tab-header__item js-tab-trigger" data-tab="4"><span class="step_number">4</span><p>Откройте приложение,<br> выберите регистрацию<br> либо вход</p></a>
    </div>
  </div>
</div>

Подскажите пожалуйста, как правильно написать функцию для отображения гифок.

БЛОГ НА HUSL

Отображение на мобильных девайсах

Ответы (0 шт):