Как исправить проблему с резиновым ротатором баннеров?

Question

[andreyqin]

Добрый день. На сайте есть простенький ротатор баннеров, написанный с помощью jQuery. Структура имеет следующий вид:

<div class="banners">
    <img src="/images/{{ info.banners[0].image_name }}" alt="{{ info.banners[0].name }}">
	<div class="hidden_banners">
		{% for banner in info.banners %}
			<img src="/images/{{ banner.image_name }}" alt="{{ banner.name }}">
		{% endfor %}
	</div>
</div>

Понятно, что из базы выводятся все баннеры в скрытый див, а первый баннер показывается.
jQuery код, сменяющий эти баннеры:

function changeBanner() {
    var $banner = $('.banners > img'),
	  background = $banner.attr('src'),
	  $nextBanner = $('.hidden_banners img[src="' + background + '"]').next(),
	  $firstBanner = $('.hidden_banners img:first'),
	  src = $nextBanner.attr('src') || $firstBanner.attr('src'),
	  alt = $nextBanner.attr('alt') || $firstBanner.attr('alt');
	  $('.banners').css({'background': 'url(' + background + ')', 'background-size': '100%'});
	  $banner.fadeOut(100, function() {
	      $(this).attr({'src': src, 'alt': alt}).fadeIn(800);
	  });
}
window.setInterval(changeBanner, 5000);

Тоже вроде бы все понятно. Теперь о проблеме: ротатор должен быть резиновый, получается, что высоту для .banners нам задавать не нужно. И все бы ничего, но только если высота не задана и мы находимся на странице ниже ротатора, то при смене баннеров у нас страница "подпрыгивает" вверх, так как получается, что после fadeOut изображения нет на долю секунды и этого хватает, чтобы наблюдать такой неприятный баг. А если задать высоту, то, соответственно, не получится масштабировать данный блок. Пробовал перед скрытием баннера выставлять у .banners высоту, равную высоте изображения, а после появления сбрасывать, но почему-то проблема остается. Собственно, как можно выйти из положения?

Answer 1

[Юрий Лобанов]

Киньте ссылку на сайт, где наблюдается проблема. В общем-то проблема ясна, но на живом примере легче смотреть.

Comments

[andreyqin]

Как обычно это бывает, я написал вопрос и тут же сам нашел решение, которое я так же указал, но делал его не правильно:

$('.banners').css({'background': 'url(' + background + ')', 'background-size': '100%', 'height': $banner.height()});
    $banner.fadeOut(100, function() {
        $(this).attr({'src': src, 'alt': alt}).fadeIn(800, function() {
            $('.banners').height(''); 
    });
});

А у изображения устанавливаем display: block;
Сайт пока находится в разработке. Но все равно спасибо за попытку помочь.

Answer 2

[Андрей Голуменов]

У вас будет постоянная проблема с прыгающим контентом, который находится ниже баннеров, раз в 5 секунд высота блока будет меняться. Даже если профиксить схлопывание блока после fadeout, то при изображениях с разной высотой, все что находится ниже баннеров будет переодически прыгать на разницу высоты изображений.
Решить проблему можно задав постоянную высоту блоку баннеров, и масштабировать изображения, подгонять их под высоту блока с баннерами, если они больше по высоте блока с баннерами

Comments

[andreyqin]

Ну тут еще идет расчет на то, что изображения нужно загружать определенной высоты. Это конечно не гибко, но тем не менее. А по поводу масштабирования что вы конкретно имеете в виде. Сейчас у изображений стоит max-width: 100%; height: auto;

[Андрей Голуменов]

Если все изображения одинаковой высоты, то задаете блоку эту высоту и вообще не паритесь, чтобы что-то там прыгало. Если изображения разной высоты, то опятьже задаете блоку определенную высоту (например 200px), а картинкам width: auto; height: 200px; и они будут масштабироваться под высоту 200 пикселей.

[andreyqin]

То есть в моем решении, которое я привел выше в комментарии, мне нужно задавать высоту жестко, не $banner.height(), а, например, 600? И тогда все изображения, вне зависимости от высоты, будут подстраиваться под эти 600 пикселей. Я правильно понимаю?

[Андрей Голуменов]

Да, вы меня правильно поняли.
Также можно дополнительно сделать проверку. Если например, у вас картинка больше 600 пикселей по высоте, то указываем ей высоту 600px и ширину auto. Так браузер сам уменьшит ее по высоте до 600 пикселей с сохранением пропорций. Если же изображение по высоте меньше 600 пикселей, для примера 400, то указываем изображению его родное значение высоты 400px и задаем отступ сверху (600-400)/2 = 100px. Тем самым центруя изображение в блоке.

[andreyqin]

Большое спасибо за помощь, учту данные советы.

Answer 3

[Lisonok]

Сделайте вот так, должно работать)

$banner.fadeOut(100);
setTimeout(function(){
    $(this).attr({'src': src, 'alt': alt}).fadeIn(800);
},99)