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

Готовые уроки IFrame + ВКонтакте API
Serge
WEB Team
WEB Team
Сообщения: 520
Зарегистрирован: 04 мар 2011, 21:55

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

Сообщение Serge »

Не так давно я писал на этом форуме вопросы по установке плагина для jQuery - jCarousel.
На днях мне снова понадобилось встроить в приложение карусель, но получить при этом всех друзей из ВК, а их у меня около 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}
Теперь, собственно, при помощи javascript надо наполнить нашу карусель. Код следующий:

Код: Выделить всё

 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>
Здесь сразу указано действие по нажатию кнопки - carousel_road(direction, quantity). Первый параметр отвечает за направление прокрутки карусели, а второй за количество элементов для прокрутки. 'all' - прокрутка в самый конец.
Теперь необходимо задать саму функцию в скрипте. Я сразу добавил анимацию при помощи встроенной функции 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(){});  //Иначе отправляем в конец        }    }}
Как результат - грузится около секунды, карусель крутится не хуже, чем с использованием плагина. И при этом, если "нащелкать" на кнопки прокрутки - то будет поочередно выполнять анимацию. Можно, в принципе, делать "блокировку" кнопок при вызове функции и в animate(..,..,function(){/*вот прям тут выполняется код по окончании анимации*/}) её снимать, но я уже не стал этим заморачиваться.
Надеюсь будет полезно:)
P.S. Если будете использовать код - будьте осторожны с размерами. Их надо аккуратно пересчитывать.
Аватара пользователя
Mihailow_du
Сообщения: 63
Зарегистрирован: 24 янв 2012, 18:26

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

Сообщение Mihailow_du »

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

ну или дай сылку на свое приложение где это используешь
Serge
WEB Team
WEB Team
Сообщения: 520
Зарегистрирован: 04 мар 2011, 21:55

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

Сообщение Serge »

Изображение - рамка (friends_wind.png)
А стрелки, в целом, смысла не имеют. Больше там ничего и нет по сути
Аватара пользователя
ukhov
Модератор
Модератор
Сообщения: 1343
Зарегистрирован: 04 янв 2011, 21:19

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

Сообщение ukhov »

мб пригодится http://habrahabr.ru/post/153417/
Аватара пользователя
Mihailow_du
Сообщения: 63
Зарегистрирован: 24 янв 2012, 18:26

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

Сообщение Mihailow_du »

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

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

Код: Выделить всё

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
Serge
WEB Team
WEB Team
Сообщения: 520
Зарегистрирован: 04 мар 2011, 21:55

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

Сообщение Serge »

Ну для начала надо смотреть в консоли, не пишет ли ошибку.
Ну а дальше - все зависит от ситуации О_о
Аватара пользователя
Mihailow_du
Сообщения: 63
Зарегистрирован: 24 янв 2012, 18:26

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

Сообщение Mihailow_du »

кстати у меня 5.200 друзей и в видимой части они действительно появились моментально, а вот другая рулетка показывающая 325 человек в приложении выводила их аватарки в течении 20-30 сек постепенно...
Глеб
Сообщения: 57
Зарегистрирован: 16 дек 2009, 19:27

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

Сообщение Глеб »

А можно сам архив пожауйста, с картинками и кодом в целом) Спасибо
Аватара пользователя
Mihailow_du
Сообщения: 63
Зарегистрирован: 24 янв 2012, 18:26

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

Сообщение Mihailow_du »

Глеб писал(а):А можно сам архив пожауйста, с картинками и кодом в целом) Спасибо
Ага было не плохо! А то что у меня эта карусель так и не крутится...
Serge
WEB Team
WEB Team
Сообщения: 520
Зарегистрирован: 04 мар 2011, 21:55

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

Сообщение Serge »

Ответить