Цветовая стилизация продукта с помощью jQueryЗачастую создавая страницу продукции для интернет магазина существует множество нюансов, к примеру показать одну и ту же футболку но в разной цветовой гамме, но если не хочется загромождать сайт тяжелыми картинками, или вы создаете онлайн сервис, где необходимо реализовать онлайн выбор цвета для определенного продукта. К чему я это все веду, а именно к тому, что все это можно реализовать с помощью небольшого плагина jquery. Мы создадим селиктивный выбор цвета для самой футболки, и для ее логотипа.

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

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

Шаг 1. HTML

Для начала необходимо подключить фреймворки:

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

   Цветовая стилизация продукта с помощью jQuery    Цветовая стилизация продукта с помощью jQuery

Теперь нам необходимо создать саму разметку, нам необходимо создать контейнер с классом product, в котором будут содержаться изображения по умолчанию и маски. Основная идея состоит в том, что мы будем стилизовать маску ( изображение справа ) в необходимый нам цвет с помощью плагина jQuery.

Далее нам необходимо установить атрибуты наложения слов, к примеру мы приведем пару, в исходниках можно просмотреть полный список.

С этим все понятно, основную часть работы будет брать на себя плагин.

Цветовая стилизация продукта с помощью jQuery

Шаг 2. jQuery

Нам необходимо подключить плагин к странице, многие заблуждаются думая, что они подключили фреймворк и больше ничего не нужно для работы плагина. Напомним, что его еще нужно вызвать. Делаем это с помощью следующего фрагмента кода:

В демонстрации можно просмотреть весь процесс в работе.

Вот и все. Готово!

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