Авторизация







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

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











< Назад

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





< Назад

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

Выход


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

Главная >> 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
Опубликовал: Сергей Кашурин
Просмотров: 723
Правила перепечатки

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

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

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


BARAJA - jQuery плагин создающий великолепные информационные карточки на вашем сайте, экономя драгоценное место
Благодаря этому плагину, элементы могут располагаться как карты в виде стопки, раскладываясь перед нами оригинальным способом. Добавьте к элементам небольшой текст и уникальный рисунок, примените оригинальный эффект преобразования, и ваша страничка преобразится на глазах.
100 бесплатных PSD элементов для веб-дизайна и мобильных устройств.
Всем привет! Давайте сегодняшний день сделаем исключением, и вместо урока, посмотрим очень классные PSD заготовки для веб-сайтов и мобильных приложений которые вы сможете бесплатно скачать!
BOOKBLOCK - плагин пролистывания контента
Давайте знакомиться с jQuery плагином, с помощью которого мы сможем создавать буклет контента, и перемещаться по нему листая содержимое.
Стабилизатор напряжения норма м отзывы http://voltage-regulator.ru
Давайте знакомиться с jQuery плагином, с помощью которого мы сможем создавать буклет контента, и перемещаться по нему листая содержимое.
тумба под тв черная
Давайте знакомиться с jQuery плагином, с помощью которого мы сможем создавать буклет контента, и перемещаться по нему листая содержимое.

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

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

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

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

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

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

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