Я работаю с плагином jQuery, который имеет следующее:
var $el = $(this),
$wrapper = $el.find('div.ca-wrapper'),
$items = $wrapper.children('div.ca-item'),
cache = {};
// save the with of one item
cache.itemW = $items.width();
// save the number of total items
cache.totalItems = $items.length;
Моя проблема здесь в том, что ширина div, которую мне нужно получить, является плавной: это 33% его оболочки. Плагин хорошо работает, когда страница загружается, но ужасно ломается, когда изменяется размер окна.
Я думаю, что мне нужно снова получить переменные при изменении размера, если вы не можете придумать лучшую альтернативу.
Вот ссылка на WIP: http://arielodiz.com.ar/test/ (прокрутите вниз в "портфолио")
Это оригинальный плагин: http://tympanus.net/codrops/2011/08/16/circular-content-carousel/
Ответ 1 · Didier Ghys
Проблема в том, что плагин делает DIV абсолютным позиционированием и не обновляет позиции при изменении размера автоматически.
Быстрое решение (хотя и не очень хорошее) - снова запустить плагин при изменении размера окна:
$(window).resize(function() {
$('#ca-container').contentcarousel({
scroll : 2
});
});
Лучшим решением было бы связать событие изменения размера в методе инициализации самого плагина - возможно, добавив параметр для управления им - чтобы повторно выполнить расчет и изменить положение элементов при изменении размера окна.
В зависимости от браузера событие изменения размера срабатывает несколько раз или только тогда, когда изменение размера выполнено, поэтому я использую тайм-аут 150 мс, который заставит пересчитать, когда мышь предположительно перестанет двигаться...
Вот код, который нужно добавить в метод инициализации (см. скрипт для правильного места).
var resizeTimer;
// bind the resize event of the window
$(window).resize(function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
// re-select the items in the order they are now
var $elements = $wrapper.children('.ca-item');
// re-calc the width
cache.itemW = $elements.width();
// change position accordingly
$elements.each(function(i) {
$(this).css({
left: i * cache.itemW + 'px'
});
});
}, 150);
});
ДЕМО
