[RomaRozen]

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

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