[Бизнес-вызов] 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
 |
 |
 |
 |
 |
 |
 |
 |