Good all the time of day!

I ask for help in connection with such a problem: I make a page with a gallery in which there is a smooth change of a retro photo for a modern look. The animation module uses jquery .

While the picture does not scale - it looks fine. You can look at the example of the first photo.

The second photo is changed in percent in width. And the animation is played by the parameters of the width of the image.

enter image description here

Resizing photos is required. As assumed adaptability of this page.

Help, good people, to prescribe the fitting of the parameters of the picture in the animation, depending on the size of the window.

Himself in the scripts - the profane. I'm doing a photo, and this is a one-time project)

View problem page: http://kostopil.net/retro/foto.html

Thank you for your attention.

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

  • For you from scratch to write all the code? Or guess what, yes, how it is implemented there ... - Air
  • Added) Assumed - on page by reference more clearly - Roman Levytsky
  • The question remains relevant. Already two nights spent over this problem. If possible, help, please ... - Roman Levytsky

0