Карусель друзей

Готовые уроки IFrame + ВКонтакте API

Карусель друзей

Сообщение Serge » 03 окт 2012, 16:31

Не так давно я писал на этом форуме вопросы по установке плагина для jQuery - jCarousel.
На днях мне снова понадобилось встроить в приложение карусель, но получить при этом всех друзей из ВК, а их у меня около 1000. Как результат - после подключения плагина и загрузки в него друзей браузер завис секунд на 30, после чего только вывелась карусель с друзьями.
Это не очень хорошо, по-этому я решил сделать свою карусель. Идея довольно проста - по нажатии на кнопку менять позицию карусели на необходимую. Реализация несколько интереснее.

Для начала понадобится библиотека jQuery.
Затем на странице (html) необходимо создать блоки, где будет расположена сама карусель:
  1. <div id="fr_carousel">
  2.             <div id="fr_carousel_items"></div>
  3. </div>

Во вложенном блоке и будут размещены все друзья, а внешний служит для "обрезки" тех, кого не надо пока выводить.
Задаем свойства css:
  1. #fr_carousel
  2. {
  3.     overflow: hidden;
  4.     width: 532px; /*Ширина зависит от того, сколько элементов будет выведено на экран. У меня это 7 элементов, помимо фото есть "рамка", общая ширина блока - 76 пикселей */
  5. }
  6. #fr_carousel_items
  7. {
  8.     display: inline-block;
  9. }
  10.  

В самой карусели, помимо фото друзей, у меня еще есть и рамка вокруг фотографии. Свойства для неё и, соответственно для фотографии, что бы она также заняла нужное положение:
  1.  
  2. .friends_wind
  3. {
  4.     position: relative;
  5.     left: 2px;
  6.     display: inline-block;
  7. }
  8. .fr_photo
  9. {
  10.     position: absolute;
  11.     top: 19px;
  12.     left: 14px
  13. }

Теперь, собственно, при помощи javascript надо наполнить нашу карусель. Код следующий:
  1.  
  2. var fr_count;
  3. VK.api(
  4.             'friends.get',
  5.             {'fields':'photo'},
  6.             function(fr_data)
  7.             {
  8.                 fr_count = fr_data.response.length;  //число друзей. Пригодится
  9.                 $('#fr_carousel_items').css('width',fr_count*76 + 'px');  //Длинна карусели должна быть большой - иначе элементы пойдут в "столбик"
  10.                
  11.                 var str = '';
  12.                 for(var j = 0; j < fr_data.response.length; j++)
  13.                 {
  14.                     str += '<div class="friends_wind"><img src="img/friends_wind.png" /><div class="fr_photo"><img src="' + fr_data.response[j].photo + '" /></div></div>';
  15.                 }
  16.                 $('#fr_carousel_items').html(str);
  17.             }
  18.         );

При входе в приложение буквально за несколько секунд загружает всех моих друзей *
* - в описании метода friends.get написано, что получает всех друзей сразу, а не по 1000. Не знаю правда или нет, пока нет возможности проверить
Теперь надо добавить стрелки, по нажатии на которые будет происходить движения карусели. У меня они были предоставлены дизайнером, по-этому сразу выпишу сюда:
  1. <div id="arrow_left_1" onClick="carousel_road(0,1)">
  2.             <img src="img/arrow_left_1.png" onMouseOver="this.src='img/arrow_left_1_light.png'" onMouseOut="this.src='img/arrow_left_1.png'" />
  3.         </div>
  4.         <div id="arrow_left_2" onClick="carousel_road(0,6)">
  5.             <img src="img/arrow_left_2.png" onMouseOver="this.src='img/arrow_left_2_light.png'" onMouseOut="this.src='img/arrow_left_2.png'" />
  6.         </div>
  7.         <div id="arrow_left_3" onClick="carousel_road(0,'all')">
  8.             <img src="img/arrow_left_3.png" onMouseOver="this.src='img/arrow_left_3_light.png'" onMouseOut="this.src='img/arrow_left_3.png'" />
  9.         </div>
  10.         <div id="arrow_right_1" onClick="carousel_road(1,1)">
  11.             <img src="img/arrow_right_1.png" onMouseOver="this.src='img/arrow_right_1_light.png'" onMouseOut="this.src='img/arrow_right_1.png'" />
  12.         </div>
  13.         <div id="arrow_right_2" onClick="carousel_road(1,6)">
  14.             <img src="img/arrow_right_2.png" onMouseOver="this.src='img/arrow_right_2_light.png'" onMouseOut="this.src='img/arrow_right_2.png'" />
  15.         </div>
  16.         <div id="arrow_right_3" onClick="carousel_road(1,'all')">
  17.             <img src="img/arrow_right_3.png" onMouseOver="this.src='img/arrow_right_3_light.png'" onMouseOut="this.src='img/arrow_right_3.png'" />
  18.         </div>

Здесь сразу указано действие по нажатию кнопки - carousel_road(direction, quantity). Первый параметр отвечает за направление прокрутки карусели, а второй за количество элементов для прокрутки. 'all' - прокрутка в самый конец.
Теперь необходимо задать саму функцию в скрипте. Я сразу добавил анимацию при помощи встроенной функции jQuery - animate. Число 550, которое там встречается - это время на анимацию в миллисекундах.
  1. function carousel_road(dir, qun) //dir=0 - влево, 1 - вправо
  2. {
  3.     var curr = parseInt($('#fr_carousel_items').css('left'));  //Текущее положение карусели
  4.     if(dir === 0)
  5.     {
  6.         if(qun === "all")
  7.             $('#fr_carousel_items').animate({left: '-=' + curr},550,function(){});  //Двигаем в начало
  8.         else if(qun === 1)
  9.         {
  10.             if(curr !== 0) //Если карусель не в самом конце - её можно проматывать
  11.                 $('#fr_carousel_items').animate({left: '+=76'},550,function(){});
  12.         }
  13.         else if(qun === 6)
  14.         {
  15.             if(curr <= -456)  //А это для прокрутки 6ти элементов. Если дальше для прокрутки доступно меньше - то поставим в конец
  16.                 $('#fr_carousel_items').animate({left: '+=456'},550,function(){});
  17.             else
  18.                 $('#fr_carousel_items').animate({left: '-=' + curr},750,function(){});
  19.         }
  20.     }
  21.     if(dir === 1)
  22.     {
  23.         if(qun === "all")
  24.             $('#fr_carousel_items').animate({left: '-=' + (curr + fr_count*76 - 530)},550,function(){}); //Прокрутка в конец. Но должно же остаться 7 элементов, по-этому +530 - ширина карусели
  25.         else if(qun === 1)
  26.         {
  27.             if(curr !== -fr_count*76 + 530)  //если карусель не в конце
  28.                 $('#fr_carousel_items').animate({left: '-=76'},550,function(){});
  29.         }
  30.         else if(qun === 6)
  31.         {
  32.             if(curr >= -fr_count*76 + 986)  //если есть 6 элементов для прокрутки
  33.                 $('#fr_carousel_items').animate({left: '-=456'},750,function(){});
  34.             else
  35.                 $('#fr_carousel_items').animate({left: '-=' + (curr + fr_count*76 - 530)},550,function(){});  //Иначе отправляем в конец
  36.         }
  37.     }
  38. }


Как результат - грузится около секунды, карусель крутится не хуже, чем с использованием плагина. И при этом, если "нащелкать" на кнопки прокрутки - то будет поочередно выполнять анимацию. Можно, в принципе, делать "блокировку" кнопок при вызове функции и в animate(..,..,function(){/*вот прям тут выполняется код по окончании анимации*/}) её снимать, но я уже не стал этим заморачиваться.
Надеюсь будет полезно:)
P.S. Если будете использовать код - будьте осторожны с размерами. Их надо аккуратно пересчитывать.
http://sevenlines.com.ua - разработка и продвижение сайтов
Serge
WEB Team
WEB Team
 
Автор темы
Сообщения: 520
Зарегистрирован: 04 мар 2011, 21:55
Благодарил (а): 2 раз.
Поблагодарили: 65 раз.

Чтобы убрать блок с рекламой, зарегистрируйтесь на форуме или войдите.

Google
 



Re: Карусель друзей

Сообщение Mihailow_du » 03 окт 2012, 19:45

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

ну или дай сылку на свое приложение где это используешь
Не идите за мной - я сам заблудился...
Карта/справочник некоторых городов:
http://vk.com/app2170107 <-- входите!
Аватара пользователя
Mihailow_du

 
Сообщения: 63
Зарегистрирован: 24 янв 2012, 18:26
Откуда: Красноярск
Благодарил (а): 9 раз.
Поблагодарили: 0 раз.

Re: Карусель друзей

Сообщение Serge » 03 окт 2012, 20:48

Изображение - рамка (friends_wind.png)
А стрелки, в целом, смысла не имеют. Больше там ничего и нет по сути
http://sevenlines.com.ua - разработка и продвижение сайтов
Serge
WEB Team
WEB Team
 
Автор темы
Сообщения: 520
Зарегистрирован: 04 мар 2011, 21:55
Благодарил (а): 2 раз.
Поблагодарили: 65 раз.

Re: Карусель друзей

Сообщение ukhov » 03 окт 2012, 20:57

мб пригодится http://habrahabr.ru/post/153417/
Изображение
Аватара пользователя
ukhov
Модератор
Модератор
 
Сообщения: 1343
Зарегистрирован: 04 янв 2011, 21:19
Откуда: Санкт-Петербург
Благодарил (а): 85 раз.
Поблагодарили: 155 раз.

Re: Карусель друзей

Сообщение Mihailow_du » 04 окт 2012, 07:09

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

jquery подгрузил так:

  1. <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
Не идите за мной - я сам заблудился...
Карта/справочник некоторых городов:
http://vk.com/app2170107 <-- входите!
Аватара пользователя
Mihailow_du

 
Сообщения: 63
Зарегистрирован: 24 янв 2012, 18:26
Откуда: Красноярск
Благодарил (а): 9 раз.
Поблагодарили: 0 раз.

Re: Карусель друзей

Сообщение Serge » 04 окт 2012, 09:08

Ну для начала надо смотреть в консоли, не пишет ли ошибку.
Ну а дальше - все зависит от ситуации О_о
http://sevenlines.com.ua - разработка и продвижение сайтов
Serge
WEB Team
WEB Team
 
Автор темы
Сообщения: 520
Зарегистрирован: 04 мар 2011, 21:55
Благодарил (а): 2 раз.
Поблагодарили: 65 раз.

Re: Карусель друзей

Сообщение Mihailow_du » 04 окт 2012, 12:38

кстати у меня 5.200 друзей и в видимой части они действительно появились моментально, а вот другая рулетка показывающая 325 человек в приложении выводила их аватарки в течении 20-30 сек постепенно...
Не идите за мной - я сам заблудился...
Карта/справочник некоторых городов:
http://vk.com/app2170107 <-- входите!
Аватара пользователя
Mihailow_du

 
Сообщения: 63
Зарегистрирован: 24 янв 2012, 18:26
Откуда: Красноярск
Благодарил (а): 9 раз.
Поблагодарили: 0 раз.

Re: Карусель друзей

Сообщение Глеб » 04 окт 2012, 17:27

А можно сам архив пожауйста, с картинками и кодом в целом) Спасибо
Глеб

 
Сообщения: 57
Зарегистрирован: 16 дек 2009, 19:27
Благодарил (а): 5 раз.
Поблагодарили: 1 раз.

Re: Карусель друзей

Сообщение Mihailow_du » 05 окт 2012, 17:31

Глеб писал(а):А можно сам архив пожауйста, с картинками и кодом в целом) Спасибо


Ага было не плохо! А то что у меня эта карусель так и не крутится...
Не идите за мной - я сам заблудился...
Карта/справочник некоторых городов:
http://vk.com/app2170107 <-- входите!
Аватара пользователя
Mihailow_du

 
Сообщения: 63
Зарегистрирован: 24 янв 2012, 18:26
Откуда: Красноярск
Благодарил (а): 9 раз.
Поблагодарили: 0 раз.

Re: Карусель друзей

Сообщение Serge » 05 окт 2012, 22:55

http://sevenlines.com.ua - разработка и продвижение сайтов

За это сообщение автора Serge поблагодарили - 3:
Mihailow_du, Roman99, Глеб
Serge
WEB Team
WEB Team
 
Автор темы
Сообщения: 520
Зарегистрирован: 04 мар 2011, 21:55
Благодарил (а): 2 раз.
Поблагодарили: 65 раз.

След.

Вернуться в Уроки IFrame ВКонтакте



Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 0

cron