Форум

RomaRozen · #1 (**permalink**) 14.05.2018, 23:39

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

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

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

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

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

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

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

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

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

<!-- 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 -->

laimas · #2 (**permalink**) 15.05.2018, 05:55

<html>
<head>
<style>
div { 
    width: 100%;
    border: 2px solid #B29027; /* просто для контроля границ */
}

div img {
    width: inherit;
    height: auto;
}
</style>
</head>
<body>
<div><img src="https://21foto.ru/wp-content/uploads/2015/11/20110507-39-jpg" /></div>
</body>
</html>

RomaRozen · #3 (**permalink**) 15.05.2018, 12:38

Нет. Проблема именно при анимации картинки методом JQuery.
Посмотрите, пожалуйста, пример при разных размерах окна:
http://kostopil.net/retro/foto.html

рони · #4 (**permalink**) 15.05.2018, 21:27

RomaRozen,
файл http://kostopil.net/retro/example/Groject.js
заменить

a("body").append("<img class='GrpEffectImg' id='" + k.replace("#", "") + "'/>");

на

a("body").append("<img class='GrpEffectImg' id='" + k.replace("#", "") + "'  width='"+i.width()+"' height='"+i.height()+"' />");

css можно, как предложил laimas,

<style type="text/css">
.TryFlyOut {
    width: 100%;
}
.TryFlyOut img{
    width: inherit;
    height: auto;
}
ul li{
   list-style:none;

}
ul{
   padding: 0;
}

</style>

Форум

Справочник

Discord чат

Курсы javascript