Адаптивность анимации в JQuery под размер окна
Вложений: 1
Доброго всем времени суток!
Прошу о помощи в связи с такой проблемой: делаю страницу с галереей в которой идет плавная смена ретро-фото на современный вид. Модуль анимации использует 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 -->
|
<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>
|
Нет. Проблема именно при анимации картинки методом JQuery.
Посмотрите, пожалуйста, пример при разных размерах окна: http://kostopil.net/retro/foto.html |
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>
|
| Часовой пояс GMT +3, время: 11:44. |