Авторизация







Регистрация / Забыли пароль?

Регистрация нового пользователя











< Назад

Восстановление пароля





< Назад

Добро пожаловать

Выход


Ежедневное обновление статей и уроков, будь в курсе, держи руку на пульсе событий!

Главная >> jQuery

Colorizer: пользователь сам выберет цвет продукта на вашем сайте

Урок есть и в видеоформате! Смотреть?

Когда вы выбираете машину, или футболку в интернет магазине, хотелось бы вам самим выбрать для неё цвет? Думаю да. В этой статье, я расскажу вам про плагин Colorizer, с помощью которого, для наших дорогих пользователей, мы сможем предоставить возможность выбора цвета продукта в котором он заинтересован, что оставит о нас приятное впечатление и заявку на покупку. jQuery плагин Colorizer - изменим цвет к лучшему.


  Инструкция
  1.  Качаем и распаковываем файлы на сервер в папку js.  Подключаем все необходимые файлы на страничку, не забывая, что jQuery тоже должен быть подключен. В случае если вы планируете использовать для своего продукта более 2х цветов, то вы должны загрузить специальную библиотеку (raphael SVG library), она присутствует в архиве для закачки.

<!—библиотека jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- raphael SVG library -->
<script type="text/javascript" src="js/raphael-min.js"></script>
<!-- подключаем плагин productColorizer -->
<script type="text/javascript"src="js/jquery.productColorizer.pack.js"></script>

  2.  Один Цвет:
  Теперь давайте заготовим интересующую нас фотографию продукта. Убедитесь, что изображение, почти не имеет цвета.  Для создания макси изображения, вы можете использовать инструмент Pen Tool в любом вашем графическом редакторе, выделите контур продукта и вырежьте, как показано на примере ниже.
Внешняя область продукта, останется такой же, а то место где сейчас прозрачность, будет вставлен продукт и окрашен с помощью нашего плагина. Сохраните изображение .png для сохранения прозрачности. Разместите оба изображения на сервере.
Эти два изображения буду использовать я:

  Два или Более Цветов
  Для двух или более цветов, мы все еще будем использовать два изображения, но наша маска будут выглядеть немного по-другому. Она должна выглядеть так как показано ниже (я планирую раскрасить логотип более бледным цветом):

  Теперь нам нужно создать SVG пути к частям изображения, которые мы планируем убрать. Для этого я использовал бесплатную программу Inkscape. Снимаем маску, убираем те части изображения которые на не пригодятся, которые не нужно раскрашивать. Оставляем размер нетронутым, и сохраняем его как прозрачный PNG. Получиться должно что-то вроде этого:

  ПРИМЕЧАНИЕ: Вы получите лучший результат, если будете выделять изображение с помощью инструмента «pen tool in a solid color», прежде чем перейти к следующему шагу. И чем монотонней цвет, тем лучше получится. 
Далее, открываем наше PNG изображение в Inkscape. Выбираем его, и в верхней панели жмём Path > Trace Bitmap. Нажимаем ОК в появившемся окне и закрываем его. Теперь можно сохранить файл как SVG, перейдя File > Save As… куда вы его сохраните, это не имеет значения, мы вернемся к нему уже скоро, но сначала нужно ещё кое-что сделать.

  3.  Давайте создадим HTML каркас для работы нашего плагина. Наши изображения, мы поместим в блок div  с идентификатором product-img. Добавим класс class="mask" к изображению маске. В блоке div  с идентификатором swatch мы разместим якоря для всех параметров цветов которые мы будем предоставлять. 

<div class="product">
    <div class="product-img">
        <img src="images/default.jpg" />
        <img id="mask" class="mask" src="images/mask.png" />
    </div>
    
    <h3>Product Title</h3>
    <p>Product Description</p>
    <h4>Choose a Color:</h4>
    <div class="swatch">
        <a rel="32,223,95" href="#mask" title="Green">Green</a>
        <a rel="255,211,8" href="#mask" title="Yellow">Yellow</a>
        <a rel="255,101,8" href="#mask" title="Orange">Orange</a>
        <a rel="16,200,255" href="#mask" title="Blue">Blue</a>
        <a rel="142,8,255" href="#mask" title="Purple">Purple</a>
        <a rel="245,25,45" href="#mask" title="Red">Red</a>
    </div>
</div>

 

  Давайте разберем из чего тег <a>, который будет менять цвет нашего продукта. 
Атрибут rel будет содержать значения RGB для цвета который вы назначите, атрибуту href назначаем id маски изображения, а в title запишем подсказки, позволяя пользователю знать информацию о цвете.

<a rel="red,green,blue" href="mask-id" title="Color Name">Color Name</a>

  Два или Более Цветов
  Если вы хотите, чтобы пользователь имел возможность просматривать ваш продукт в двух и более вариантов цвета, вам понадобятся два блока <div class="swatch"> отвечающие за цвет. Вам также понадобится другая маска внутри product-img  . Этой маской не будет изображение, блок div с id="overlay" class="secondary" необходим  для работы плагина.

<div class="product">
    <div class="product-img">
        <img src="images/default.jpg" />
        <img id="mask" class="mask" src="images/mask.png" />
        <div id="overlay" class="secondary"></div>
    </div>
    
    <h3>Product Title</h3>
    <p>Product Description</p>
    <h4>Choose a Color:</h4>
    <div class="swatch">
        <a rel="32,223,95" href="#mask" title="Green">Green</a>
        <a rel="255,211,8" href="#mask" title="Yellow">Yellow</a>
        <a rel="255,101,8" href="#mask" title="Orange">Orange</a>
        <a rel="16,200,255" href="#mask" title="Blue">Blue</a>
        <a rel="142,8,255" href="#mask" title="Purple">Purple</a>
        <a rel="245,25,45" href="#mask" title="Red">Red</a>
    </div>
    <div class="swatch">
        <a rel="32,223,95" href="#overlay" title="Green">Green<</a>
        <a rel="255,211,8" href="#overlay" title="Yellow">Yellow<</a>
        <a rel="255,101,8" href="#overlay" title="Orange">Orange<</a>
        <a rel="16,200,255" href="#overlay" title="Blue">Blue<</a>
        <a rel="142,8,255" href="#overlay" title="Purple">Purple<</a>
        <a rel="245,25,45" href="#overlay" title="Red">Red</a>
    </div>
</div>


  Сейчас мы возвращаемся к нашему SVG-файлу. Открываем файл в браузере, и смотрим его исходный код. Крутим вниз, выглядываем строки которые выглядит примерно так:

<path
    style="fill:#000000"
    d="PATH INFORMATION"
    id="path3065"
    inkscape:connector-curvature="0" />

  Копируем все пути с атрибута d. Эта информация нужна плагину чтобы сообщить, какую форму наложения следует сделать. Копируем эту информацию в атрибут role блока div с id = overlay. Должно получиться что-то похожее на следующее.

<div id="overlay" role="m 122,157.36656 c 0,-0.8984 1.575,-4.72394 3.5,-8.50121 1.925,-3.77727 3.5,-7.53364 3.5,-8.3475 0,-1.64341 4.26645,-3.08924 5.98384,-2.02784 0.60363,0.37307 0.81923,1.55509 0.47911,2.62672 -0.60459,1.90489 -0.54408,1.9031 2.70933,-0.0804 3.50484,-2.13682 7.32609,-2.65699 8.27225,-1.12606 0.30942,0.50064 -1.03778,3.92689 -2.99377,7.61388 -1.95599,3.68699 -3.34613,6.91383 -3.0892,7.17076 C 142.15496,156.4883 152,144.71962 152,140.7824 c 0,-2.07889 4.64216,-3.54024 6.22331,-1.95909 0.76917,0.76917 0.007,3.11233 -2.66637,8.20029 -2.05879,3.91788 -3.51487,7.3518 -3.23574,7.63093 1.05266,1.05266 4.70697,-1.83671 7.48665,-5.91952 2.84543,-4.17937 10.4105,-18.58511 11.54529,-21.98501 0.63427,-1.90034 5.10345,-2.43828 6.15269,-0.74057 0.34312,0.55518 -1.24398,4.39311 -3.52689,8.52872 l -4.15074,7.5193 4.02363,-2.09724 c 3.19849,-1.66714 4.44655,-1.87089 6.0859,-0.99354 4.33888,2.3221 1.70199,8.646 -5.03913,12.08506 -4.1929,2.13906 -4.37766,3.94827 -0.4032,3.94827 2.3139,0 4.41145,-1.8378 13.41073,-11.75 3.32655,-3.66401 4.41647,-4.25 7.90479,-4.25 5.3769,0 7.48012,2.15091 7.00233,7.1611 -0.41652,4.3676 0.55193,4.78391 3.8723,1.66459 1.27295,-1.19588 2.31445,-1.72432 2.31445,-1.17432 0,1.45491 -4.13404,5.00778 -6.75,5.80108 -1.2375,0.37528 -2.25,1.0653 -2.25,1.53338 C 200,155.5817 193.27268,159 190.13197,159 186.71236,159 183,156.03973 183,153.31291 c 0,-1.36999 -0.51689,-1.20499 -2.75,0.87781 -5.49767,5.12764 -11.33015,6.39656 -13.21482,2.87502 -1.6943,-3.16584 -1.20247,-4.75381 1.86604,-6.02483 4.36225,-1.8069 7.77317,-5.76652 6.26586,-7.27383 -2.17749,-2.17749 -6.40206,1.43189 -10.0565,8.59203 -2.80122,5.48844 -3.8193,6.64089 -5.86658,6.64089 -2.08565,0 -2.40356,-0.38496 -2.01153,-2.43575 l 0.46562,-2.43576 -3.29407,2.51251 c -3.98446,3.0391 -7.76179,2.86039 -8.22331,-0.38904 l -0.3193,-2.24804 -3.27509,2.49804 c -3.56284,2.71751 -8.06538,3.29798 -8.89107,1.14625 -0.2853,-0.74348 0.63444,-3.90059 2.04387,-7.0158 1.40944,-3.11521 2.30826,-5.91836 1.99739,-6.22923 -1.47402,-1.47403 -5.20975,2.38356 -7.92283,8.18127 C 127.344,157.86205 126.38477,159 124.40574,159 122.84662,159 122,158.42516 122,157.36656 z m 73.78635,-3.55291 c 0.91512,-0.91512 0.81173,-1.60029 -0.45227,-2.99699 -0.90124,-0.99585 -1.60019,-3.162 -1.55323,-4.81365 0.11747,-4.13158 -0.55262,-3.7732 -2.91018,1.55645 -1.59157,3.59802 -1.76476,4.86322 -0.82132,6 1.45043,1.74766 4.12502,1.86617 5.737,0.25419 z m 4.02943,-9.09241 C 199.6421,143.49956 199.05,142.5 198.5,142.5 c -1.23708,0 -1.88591,4.05443 -1.01183,6.32273 0.59536,1.545 0.72507,1.537 1.64486,-0.10149 0.5492,-0.97831 0.85643,-2.77831 0.68275,-4 z m -43.76273,-9.15732 C 154.32376,133.48026 156.43493,130 159.42819,130 c 2.99266,0 3.84963,2.15835 1.93967,4.8852 -1.72469,2.46234 -3.63236,2.70595 -5.31481,0.67872 z" class="secondary"></div>

  4. Предпоследний шаг, добавляем стиль для блока div с классом product

.product {position:relative;}

  5. И, последнее, инициализируем плагин productColorizer на нашей страничке и всё в общем то)).

<script type="text/javascript">
    $(document).ready(function(){
        $('.product').productColorizer();
    });
</script>


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


Дата публикации: 21.01.2013
Опубликовал: Сергей Кашурин
Просмотров: 724
Правила перепечатки

Правила перепечатки

Уважаемый посетитель сайта!
Ниже преведены условия использования и перепечатки материалов сайта /
Все материалы данного сайта подготовлены для Вас лично мной.

Большая часть материалов сайта - это авторские уроки, остальные, это переводы уроков с английского языка на русский.
Если Вы решили использовать материалы данного сайта где-то на своих ресурсах или в рассылке, то соблюдайте следующие требования:
1. Урок или статья должны перепечатываться «как есть» с сохранением всех ссылок на источник урока, а если это перевод, то и на сайт, авторы которого подготовили его.
2. Ссылки на сайт источника и переводчика обязательно должны быть работоспособными (при нажатии по ссылке человек должен перейти на сайт автора/переводчика). Если Вы перепечатали какой-либо документ, обязательно проверьте ссылку на работоспособность.
3. Искажение информации об авторе, источнике, переводчике при перепечатке материалов запрещено!
4. Содержание урока или статьи при перепечатке не должно подвергаться модификациям и переделке. Все уроки и статьи, размещенные на сайте, должны перепечатываться как есть. Вы не имеете права урезать, исправлять или иным образом коверкать републикуемый документ.
С уважением, Сергей Кашурин– владелец сайта /


BOOKBLOCK - плагин пролистывания контента
Давайте знакомиться с jQuery плагином, с помощью которого мы сможем создавать буклет контента, и перемещаться по нему листая содержимое.
5 прекраснейших дизайнерских решений для ваших форм входа
Уважаемые друзья, в этом уроке, собраны 5 красивейших форм регистрации/авторизации, с пошаговым объяснением, и с возможность бесплатно скачать. Вы всё ещё думаете читать или нет? А кто-то уже вовсю пользуется ими!
25 поразительных анимаций CSS3, которые улучшат внешний вид вашего сайта
CSS3, сокращение от английского Cascading Style Sheets 3, третье поколение таблиц стилей, которые используются для визуального представления сайта, при минимальном размере кода. Этот последний многообещающий набор стандартов, состоит из большого числа функций и инструментов, которые позволяют улучшить и контролировать дизайн и увеличивать скорость загрузки сайта.

Уроки и статьи

«Найден Самый Дешевый и Эффективный Способ Рекламы в Интернете!»

Доказанo: ведение своей почтовой рассылки - это самый действенный и дешевый метод рекламы в Интернете.

Используете ли Вы его?

Если нет, то Вы давно теряете свои деньги! Если да, то пришло время вести Вашу почтовую рассылку на самом эффективном инструменте в Рунете - сервисе рассылок SmartResponder.ru

Узнать об этом подробнее >>

Быть в курсе всех событий: