[Бизнес-вызов] Pokupo, очередной лайфхак

В этом месяце команда Pokupo внесла ряд полезных изменений на платформе. Одним из этих изменений стала возможность просмотра увеличенных изображений при клике на изображение товара на странице сертификата.

Функция полезная, но некоторым пользователям потребовался немного расширенный функционал,в частности возможность пролистывания увеличенных изображений, так, как это сделано в fancybox, colorbox и.т.д

Собственно реализацией этой возможности я и занялся.


function genprev()
{
    curr_img=0;

    previews=new Array();

    $(".certificate-preview__item img").each(function( index ) 
    {
	var z=_$(this).attr('src');
	var a=z.replace('images/gallery', 'images/big/gallery');

	previews.push(a);
    });
}


$('body').on('click', '.image-increase--active img', function () 
{
    curr_img++;

    if(curr_img==previews.length)
    {
	curr_img=0;
    }

    $(this).attr('src','');
    $(this).attr('src',previews[curr_img]);

});


$('body').on('click', '.certificate__image', function () 
{
   genprev();

});

Алгоритм работы скрипта следующий. При нажатии на изображения товара, вызывается функция genprev, которая формирует массив со ссылками на адреса изображений. Ссылки берутся из адресов превью картинок, только к адресу дополнительно добавляется "big". В дальнейшем, при клике на увеличенное изображение, отрисовывается следующая картинка из созаднного массива.

В процессе реализации скрипта, я наткнулся на некоторую неприятную особенность. Дело в том, что при просмотре сертификатов товаров, создаются 2 div блока с классами image-increase и image-overlay. Чем больше товаров вы просматриваете, тем больше таких блоков.

Это неправильно и создает ошибку в работе приведенного выше скрипта, проявляющуюся в том, что при прокрутке изображения из массива отрисовываются во всех increase и overlay блоках. Чтобы этого избежать, достаточно добавить следующую функцию, которая будет вызываться при каждом изменении адреса страницы (после символа #).



$(window).on('hashchange', function()
{
    $( "div" ).removeClass( "image-increase" );
    $( "div" ).removeClass( "image-overlay" );

});

Готовый результат можно посмотреть в магазине katrinhat.ru

 

На сегодня все. Заглядывайте в мой магазин.

SHOP.BREHEN-SOBAKEN.RU

 

Паяльник Момент
Амперметр Ц33 200А
Blackberry Torch 9800
Выжигатель Огонёк
400 руб.
400 руб.
2500 руб.
500 руб.
Garmin Nuvi 150LMT
Модуль для IP камеры
Пепельница "Череп с пауком"
Пепельница череп
2500 руб.
500 руб.
500 руб.
500 руб.

 

pokupoинструкциялайфхак
117
6.899 GOLOS
0
В избранное
Анатолий
На Golos с 2017 M07
117
0

Зарегистрируйтесь, чтобы проголосовать за пост или написать комментарий

Авторы получают вознаграждение, когда пользователи голосуют за их посты. Голосующие читатели также получают вознаграждение за свои голоса.

Зарегистрироваться
Комментарии (1)
Сортировать по:
Сначала старые