Блог Web-мастера

21 Комментариев к “Библиотека JavaScript Image Processing Library”

1. Вячеслав написал:
   июля 7, 2009 at 8:09

   отличный скрипт! спасибо
   только подскажи пожалуйста как сделать обратный эффект, т.е. поумолчанию изображение ЧБ, а при наведении принимает свой первозданный вид
   заранее спасибо!

2. Yura goldblog написал:
   июля 7, 2009 at 9:11

   Вячеслав, сделано, добавлено в запись.

3. Вячеслав написал:
   июля 7, 2009 at 10:12

   Юрий, огромное человеческое спасибо!

4. Yura goldblog написал:
   июля 7, 2009 at 10:16

   Всегда пожалуйста, рад был помочь.

5. Вячеслав написал:
   июля 7, 2009 at 12:13

   и ещё один момент
   мне нужно несколько объектов с одним эффектом (к примеру #desaturateimage)
   ставлю каждой картинке один и тот же id=desaturateimage в итоге работает только первая
   пример тут http://siteman.kz/pixastic_lib/index.html

6. Yura goldblog написал:
   июля 7, 2009 at 14:08

   Вячеслав, если необходимо обработать несколько элементов, тогда используйте вместо id=”desaturateimage” - class=”desaturateimage”, в javascript замените все “#desaturateimage” на “.desaturateimage”. Советую каждой картинке присвоить уникальный id, например:img1,img2,img3,…

7. Вячеслав написал:
   июля 7, 2009 at 14:27

   мм.. поменял.
   скрипт загружает все изображения в ЧБ виде, но при первом же наведении отказывается возвращать ЧБ вариант
   пример тут http://siteman.kz/pixastic_lib/index.html

8. Yura goldblog написал:
   июля 7, 2009 at 15:07

   Да, действительно.
   Немного порывшись в исходнике нашел бок:
   строчка $(”#”+imgID+”").each(
   необходимо заменить на $(”.”+imgCLASS+”").each(
   получается функция desaturate принимает вид:

   
   function desaturate(el,bind_el)
   {
     $(el).bind(bind_el,  function()
   	 {
           imgSRC=$(this).attr("src");
           imgSTYLE=$(this).attr("style");
           imgCLASS=$(this).attr("class");
           imgALT=$(this).attr("alt");
           imgTITLE=$(this).attr("title");
            Pixastic.process(this, "desaturate", {average : false});
   
           $(".desaturateimage").bind("mouseover",  function()
   	{
   	$(this).after("").remove();
   		     $("."+imgCLASS+"").each(
   				function()
   					{
   					   desaturate(this,"mouseout");
   				  	});
   			} );
         });
   
   }
   

   Теперь не обязательно назначать картинкам уникальные ID.

9. Алексей написал:
   августа 25, 2009 at 10:22

   Добрый день, никак не могу разобраться с эффектом blur fast из этой библиотеки. Документация на сайте разработчика не очень помогла. Вы не могли бы показать пример.

10. Yura goldblog написал:
    августа 25, 2009 at 13:29

    Добавлено в конец статьи. Пример использует pixastic с jQuery.

11. letmetouch написал:
    ноября 12, 2009 at 1:32

    А вот пример с размытием.
    Как обратно вренуть изображение в неразмытое состояние ?

12. Yura goldblog написал:
    ноября 12, 2009 at 9:38

    Аналогично, как и в примере с черно-белым изображением. Вы должны понять, что скрипт не размывает изображение, а заменяет изображение ( img ) элементом canvas, в котором уже размывает картинку. Для того, чтобы вернуть изображение, необходимо просто заменить этот canvas на Ваш img

13. vov41k написал:
    ноября 17, 2009 at 3:40

    Здраствуйте.
    Вот хочу что бы все изображения были черно-белые, при наведении стали реальнымы? Качаю JS, как теперь его встроить в WordPress ?

14. Yura goldblog написал:
    ноября 17, 2009 at 9:37

    Не советую Вам этого делать:

    1. Преобразование работает относительно медленно, особенно с изображениями среднего размера и больше.
    2. На данный момент реализовано преобразование конкретных изображений (обращение к элементу идет по id).

    Советую использовать скрипт в одном определенном месте, с маленькими статичными изображениями (пункты меню или кнопки партнеров…)

15. vov41k написал:
    ноября 17, 2009 at 12:34

    Ну, а вот не знаете пример в CSS или в JS, что бы сделать все изображения ч\б ну при наведении были они цветными?

16. Yura goldblog написал:
    ноября 17, 2009 at 12:55

    В css можно только если создавать в ручную черно-белое изображение, и при наведении (:hover) менять изображение на цветное (подменять). Или лучше в одном изображении сделать сразу два, сначала показывать только верхнюю часть (к примеру), а при наведении “сдвигать” и показывать нижнюю.
    На JS других библиотек не встречал.

17. baltun написал:
    декабря 27, 2010 at 0:21

    пример из статьи не работает в IE, практически во всех версиях…

18. Виталик написал:
    апреля 1, 2011 at 1:00

    Yura goldblog
    ОТЛИЧНАЯ СТАТЬЯ!
    только тут более или менее понятно) благодаря примерам

    а что делать если картинки выводятся через дополнительные поля в cms dle

    я пытался поставть id=”desaturateimage”
    [full-link][xfgiven_minipic] [xfvalue_minipic] [/xfgiven_minipic] [/full-link]

    но нифига не вышло( картинки какие были такие и есть
    эфект работает только Чёрно-белое если так

    а хотелось чтоб [full-link][xfgiven_minipic] [xfvalue_minipic] [/xfgiven_minipic] [/full-link]

19. Akeshy написал:
    сентября 29, 2011 at 22:09

    да, неплохая)))

20. Имя написал:
    декабря 3, 2011 at 18:44

    Упс, автор извини ошибся, в ие работает.
    скажи пожалуста вот то что ты переделанное скинул не так работает. т.е работает но только после того как мышку с изображения уберешь
    я так понимаю это нужно эту строчку поменять sepia(this,”mouseout”)
    а на какую? скажи плиз

21. Александр написал:
    мая 3, 2012 at 23:22

    Доброго времени суток. Нужна ваша помощь. У меня все работает, но только для картинок которые загружены ко мне на сайт, а те которые загружены на фото-хостинг - не работают(. Помогите пожалуйста решить проблему. а то я не силен в js

Оставить комментарий

Имя (обязательно заполнить!)

E-mail (не публикуется) (обязательно заполнить!)

Вебсайт

Я не робот.