jQuery Roundrawout redraw/resize issue

Question

Я работаю над новым проектом, который включает в себя jQuery Roundabout. У меня есть все в основном в стиле, как я хочу (я собираюсь добавить разные границы и дополнения, но это не проблема), но целевой рынок часто меняет размеры страниц (не спрашивайте, я не совсем уверен, почему или).

Так что это приводит меня к моей проблеме, когда вы идете на мой сайт проекта: http://cirkut.net/sub/proven/landing/ Он загружается, и кругооборот работает красиво, но при изменении размера я хочу, чтобы он «перерисовывал» и повторно центрировал круговую развязку. Когда вы измените размер, нажмите на один из элементов, и он будет «перерисовываться» и снова центрируется.

Это мой окольный вызов:

$('#slides').roundabout({ 
    easing: 'easeInOutQuart', 
    responsive: true 
}); 

И это то, что я пытался избежать вопроса:

$(window).bind("resize", function() { 
    $('#slides').roundabout("relayoutChildren"); 
}); 

Однако то, что происходит, это ретрансляция из новых <li> «S и перекручивать их, что уменьшает изображение.

Может ли кто-нибудь объяснить это? Благодаря!

Answer 1

После нескольких вариантов работы я нашел тот, который работает.

Вместо вышеуказанного "resize" свяжите, я использую нижеследующее, и оно отлично освежает.

$(window).bind("resize", function() { 
    $('#slides .slide').removeAttr("style"); 
    $('#slides').roundabout({ 
     easing: 'easeInOutQuart', 
     responsive: true 
    }); 
}); 

Я обнаружил, что встроенный CSS является то, что позиционирует его, и если я повторно круговое движение, она изменяет размер в зависимости от текущего размера, что приводит к бесконечному «изменение размера» петлю на изменение размера. Поэтому, если я удаляю встроенный стиль, а затем сразу же помещаю #slides обратно в круговую развязку, он правильно позиционирует его и снова добавляет встроенные стили.

Answer 2

Вы можете использовать круговые характеристики $focusbearing атрибутов: $minScale и $maxScale, чтобы масштабировать изображения в проигрывателе по отношению к одному на передней панели. Вот пример:

 $('#slides').roundabout({ 
     easing: 'easeInOutQuart', 
     responsive: true , 
     minScale: 0.8 
}); 

Это позволит сохранить изображения в пропорции. Увеличьте коэффициент масштабирования, если вы хотите использовать меньшее количество изображений и наоборот.

Answer 3

Я решил эту освежающую страницу на изменение размера:

var windowWidth = $(window).width(); 

$(window).resize(function() { 
if(windowWidth != $(window).width()){ 
location.reload(); 
return; 
} 
});