Адаптивность анимации в JQuery под размер окна

180

17 мая 2018, 14:50

Доброго всем времени суток!

Прошу о помощи в связи с такой проблемой: делаю страницу с галереей в которой идет плавная смена ретро-фото на современный вид. Модуль анимации использует jquery.

Пока картинку не масштабировать - выглядит нормально. Можно посмотреть на примере первого фото.

Второе фото изменено в процентах по ширине. А анимация проигрывается по параметрам ширины картинки.

Изменение размера фото обязательно. Так как предполагается адаптивность данной страницы.

Помогите, люди добрые, прописать подгонку параметров картинки в анимации в зависимости от размеров окна.

Сам в скриптах - профан. Занимаюсь фото, а это одноразовый проект)

Посмотреть проблемную страничку: http://kostopil.net/retro/foto.html

Спасибо за Ваше внимание.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<!-- Block for foto --> 
<div class="02fotoEff"> 
  <div class="02fotoFrame"> 
    <script type="text/javascript"> 
      var ImgIdx02foto = 2; 
 
      function PreloadImg() { 
        $.ImagePreload("images/02foto2.jpg"); 
      } 
      $(document).ready(function() { 
        PreloadImg(); 
        $(".02fotoEff ul li").click(function() { 
          $(".02foto").ImageSwitch({ 
            Type: $(this).attr("rel"), 
            NewImage: "images/02foto" + ImgIdx02foto + ".jpg", 
            speed: 1000 
          }); 
          ImgIdx02foto++; 
          if (ImgIdx02foto > 2) ImgIdx02foto = 1; 
        }); 
      }); 
    </script> 
    <ul> 
      <div align=center> 
 
        <li class="TryFlyOut" rel="FlyOut"> 
          <img src="images/02foto1.jpg" class="02foto" / width="80%"> 
        </li> 
      </div> 
    </ul> 
  </div> 
</div> 
<!-- END Block for foto -->