Карусель друзей
Добавлено: 03 окт 2012, 16:31
Не так давно я писал на этом форуме вопросы по установке плагина для jQuery - jCarousel.
На днях мне снова понадобилось встроить в приложение карусель, но получить при этом всех друзей из ВК, а их у меня около 1000. Как результат - после подключения плагина и загрузки в него друзей браузер завис секунд на 30, после чего только вывелась карусель с друзьями.
Это не очень хорошо, по-этому я решил сделать свою карусель. Идея довольно проста - по нажатии на кнопку менять позицию карусели на необходимую. Реализация несколько интереснее.
Для начала понадобится библиотека jQuery.
Затем на странице (html) необходимо создать блоки, где будет расположена сама карусель:
Во вложенном блоке и будут размещены все друзья, а внешний служит для "обрезки" тех, кого не надо пока выводить.
Задаем свойства css:
В самой карусели, помимо фото друзей, у меня еще есть и рамка вокруг фотографии. Свойства для неё и, соответственно для фотографии, что бы она также заняла нужное положение:
Теперь, собственно, при помощи javascript надо наполнить нашу карусель. Код следующий:
При входе в приложение буквально за несколько секунд загружает всех моих друзей *
* - в описании метода friends.get написано, что получает всех друзей сразу, а не по 1000. Не знаю правда или нет, пока нет возможности проверить
Теперь надо добавить стрелки, по нажатии на которые будет происходить движения карусели. У меня они были предоставлены дизайнером, по-этому сразу выпишу сюда:
Здесь сразу указано действие по нажатию кнопки - carousel_road(direction, quantity). Первый параметр отвечает за направление прокрутки карусели, а второй за количество элементов для прокрутки. 'all' - прокрутка в самый конец.
Теперь необходимо задать саму функцию в скрипте. Я сразу добавил анимацию при помощи встроенной функции jQuery - animate. Число 550, которое там встречается - это время на анимацию в миллисекундах.
Как результат - грузится около секунды, карусель крутится не хуже, чем с использованием плагина. И при этом, если "нащелкать" на кнопки прокрутки - то будет поочередно выполнять анимацию. Можно, в принципе, делать "блокировку" кнопок при вызове функции и в animate(..,..,function(){/*вот прям тут выполняется код по окончании анимации*/}) её снимать, но я уже не стал этим заморачиваться.
Надеюсь будет полезно:)
P.S. Если будете использовать код - будьте осторожны с размерами. Их надо аккуратно пересчитывать.
На днях мне снова понадобилось встроить в приложение карусель, но получить при этом всех друзей из ВК, а их у меня около 1000. Как результат - после подключения плагина и загрузки в него друзей браузер завис секунд на 30, после чего только вывелась карусель с друзьями.
Это не очень хорошо, по-этому я решил сделать свою карусель. Идея довольно проста - по нажатии на кнопку менять позицию карусели на необходимую. Реализация несколько интереснее.
Для начала понадобится библиотека jQuery.
Затем на странице (html) необходимо создать блоки, где будет расположена сама карусель:
Код: Выделить всё
<div id="fr_carousel"> <div id="fr_carousel_items"></div></div>
Задаем свойства css:
Код: Выделить всё
#fr_carousel{ overflow: hidden; width: 532px; /*Ширина зависит от того, сколько элементов будет выведено на экран. У меня это 7 элементов, помимо фото есть "рамка", общая ширина блока - 76 пикселей */}#fr_carousel_items{ display: inline-block;}
Код: Выделить всё
.friends_wind{ position: relative; left: 2px; display: inline-block;}.fr_photo{ position: absolute; top: 19px; left: 14px}
Код: Выделить всё
var fr_count;VK.api( 'friends.get', {'fields':'photo'}, function(fr_data) { fr_count = fr_data.response.length; //число друзей. Пригодится $('#fr_carousel_items').css('width',fr_count*76 + 'px'); //Длинна карусели должна быть большой - иначе элементы пойдут в "столбик" var str = ''; for(var j = 0; j < fr_data.response.length; j++) { str += '<div class="friends_wind"><img src="img/friends_wind.png" /><div class="fr_photo"><img src="' + fr_data.response[j].photo + '" /></div></div>'; } $('#fr_carousel_items').html(str); } );
* - в описании метода friends.get написано, что получает всех друзей сразу, а не по 1000. Не знаю правда или нет, пока нет возможности проверить
Теперь надо добавить стрелки, по нажатии на которые будет происходить движения карусели. У меня они были предоставлены дизайнером, по-этому сразу выпишу сюда:
Код: Выделить всё
<div id="arrow_left_1" onClick="carousel_road(0,1)"> <img src="img/arrow_left_1.png" onMouseOver="this.src='img/arrow_left_1_light.png'" onMouseOut="this.src='img/arrow_left_1.png'" /> </div> <div id="arrow_left_2" onClick="carousel_road(0,6)"> <img src="img/arrow_left_2.png" onMouseOver="this.src='img/arrow_left_2_light.png'" onMouseOut="this.src='img/arrow_left_2.png'" /> </div> <div id="arrow_left_3" onClick="carousel_road(0,'all')"> <img src="img/arrow_left_3.png" onMouseOver="this.src='img/arrow_left_3_light.png'" onMouseOut="this.src='img/arrow_left_3.png'" /> </div> <div id="arrow_right_1" onClick="carousel_road(1,1)"> <img src="img/arrow_right_1.png" onMouseOver="this.src='img/arrow_right_1_light.png'" onMouseOut="this.src='img/arrow_right_1.png'" /> </div> <div id="arrow_right_2" onClick="carousel_road(1,6)"> <img src="img/arrow_right_2.png" onMouseOver="this.src='img/arrow_right_2_light.png'" onMouseOut="this.src='img/arrow_right_2.png'" /> </div> <div id="arrow_right_3" onClick="carousel_road(1,'all')"> <img src="img/arrow_right_3.png" onMouseOver="this.src='img/arrow_right_3_light.png'" onMouseOut="this.src='img/arrow_right_3.png'" /> </div>
Теперь необходимо задать саму функцию в скрипте. Я сразу добавил анимацию при помощи встроенной функции jQuery - animate. Число 550, которое там встречается - это время на анимацию в миллисекундах.
Код: Выделить всё
function carousel_road(dir, qun) //dir=0 - влево, 1 - вправо{ var curr = parseInt($('#fr_carousel_items').css('left')); //Текущее положение карусели if(dir === 0) { if(qun === "all") $('#fr_carousel_items').animate({left: '-=' + curr},550,function(){}); //Двигаем в начало else if(qun === 1) { if(curr !== 0) //Если карусель не в самом конце - её можно проматывать $('#fr_carousel_items').animate({left: '+=76'},550,function(){}); } else if(qun === 6) { if(curr <= -456) //А это для прокрутки 6ти элементов. Если дальше для прокрутки доступно меньше - то поставим в конец $('#fr_carousel_items').animate({left: '+=456'},550,function(){}); else $('#fr_carousel_items').animate({left: '-=' + curr},750,function(){}); } } if(dir === 1) { if(qun === "all") $('#fr_carousel_items').animate({left: '-=' + (curr + fr_count*76 - 530)},550,function(){}); //Прокрутка в конец. Но должно же остаться 7 элементов, по-этому +530 - ширина карусели else if(qun === 1) { if(curr !== -fr_count*76 + 530) //если карусель не в конце $('#fr_carousel_items').animate({left: '-=76'},550,function(){}); } else if(qun === 6) { if(curr >= -fr_count*76 + 986) //если есть 6 элементов для прокрутки $('#fr_carousel_items').animate({left: '-=456'},750,function(){}); else $('#fr_carousel_items').animate({left: '-=' + (curr + fr_count*76 - 530)},550,function(){}); //Иначе отправляем в конец } }}
Надеюсь будет полезно:)
P.S. Если будете использовать код - будьте осторожны с размерами. Их надо аккуратно пересчитывать.