Tagnetic — холодильник тэгов, плагин для jQuery

    tagnetic.jpg В ответ на флэш-скрипт от Ray Tanck, реализующий облако тэгов, стилизованное под доску с магнитами, я написал плагин для jQuery, который создает облако тэгов, стилизованное под холодильник с налепленными на него магнитами :)

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

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

    Тестировал работу в ФФ 2 и 3, ИЕ 6 и 7, опере 9.60, Сафари и Гугл Хроме. К сожалению, в ИЕ 6 из-за использования IE PNG Fix скрипт заметно тормозит. Сейчас работаем над созданием новых скинов (хочу преобразовать холодильник в доску или забор с налепленными на него объявлениями-тэгами) и над оптимизацией графики.

    Интересно мнение хабраюзеров о полезности этой работы, а также о возможных глюках.

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

    Подробнее
    Реклама
    Комментарии 56
    • 0
      Интересная идея. На мой взгляд было бы нагляднее если магниты при наведении увеличивались или подпрыгивали или что нибудь в этом роде. Ждем новых скинов.
      • 0
        Была мысль менять цвет магнитов при маусовере. Но, к сожалению, из-за использования пнг вес всей загружаемой графики больше 200 килобайт и грузить еще столько же альтернативных картинок для маусовера слишком жирно. Сейчас сидим думаем, как бы уменьшить объем картинок… Отказаться от пнг в пользу гифов не выходит из-за градиентов.
        • 0
          может достаточно увеличивать размер?
          • 0
            Вот еще, может их изначально развернуть на произвольные углы а при маусовере выравнивать по горизонтали? Если это конечно не будет нагружать сильно клиента.
            • 0
              Это не флеш. Здесь вам не тут. )
              • 0
                Можно jQuery плюгин прикрутить, зачем же сразу флеш.
                • +1
                  чтобы поворачивать на произвольный угол? поделитесь ссылкой, пожалуйста?
                  • 0
                    Что то не могу найти ) Но точно помню где его видел, на странице wiki до изменения дизайна. Это не просто плюгин для поворота текста а небольшой графический редактор с минимальной анимацией. Вот как раз там текст и вращался. Должна быть копия плюгина дома, вечером постараюсь найти.
                    • 0
                      Так и не нашел этот плюг ) Вот, зато нашел chernev.ru/postroenie-grafiki-na-javascript.html#more-487
              • +3
                а если png сделать полупрозрачным и менять цвет фона «подложки»?
                • +1
                  Интересный вариант, попробую поэкспериментировать.
                • 0
                  у вас графика не оптимизирована. Пересохраните с помощью Photoshop — Save For Web. Размер картинок уменьшится раз в 10… png рекомендую через это www.grompesoft.narod.ru/pngre.zip. Сейчас это занимает около 400 кб (refrigerator-850)
                  • 0
                    Save For Web сжимает PNG в 10 раз? О_о

                    п. с.: ссылко битое. правильное ссылко: www.grompesoft.narod.ru/pngre.zip
                    • 0
                      там не только png. PNG Save For Web плохо сжимает…
                      • 0
                        Save For Web отличается от Save As для PNG только настройками палитры (это если 8-и битный) и отрезанием текстовой надстройки. никакой оптимизации там, в общем то, нет, равно как и сжатия. :)

                        а утилита отличная :)
              • 0
                оригинальная задумка:-) может пригодиться не только для тегов… спасибо
                в opera 9.22 теги почемуто не на холодильнике начинаются, а выходят за поля
                • 0
                  Эх, есть такой баг. Надеялся что этой версией Оперы никто кроме меня не пользуется :) Буду разбираться в чем дело.

                  может пригодиться не только для тегов
                  Угу, у меня тоже была мысль использовать подобную штуку как навигационное меню, которое состоит из штук 10 кнопок и при каждой перезагрузке страницы его внешний вид немного меняется.
                  • 0
                    В 9.60 та же ерунда, на самом деле :)

                    и ещё, иногда, при перемещении магнитов, страница пролистывается вверх, если холодильник целиком на неё не вмещается и текущее положение — не самое верхнее.
                • 0
                  и в ие6 пнгфикс както странно выглядит, попробуйте использовать jquery.pngFix.js (все равно jquery есть)
                  • 0
                    Попробую, хотя старые версии джейквери ПНГ Фикса не умели с бэкграундами работать. Сейчас умеют?
                    • 0
                      умеют, но осталась проблема в ие с background-position; то есть если задавать фон например у нижней части блока, то фон все равно растянется
                  • 0
                    Всем кто захочет разместить холодильник у себя на сайте это решение пригодится =)
                    • 0
                      тут дело даже не в холодильнике, идею можно оптимизировать под себе и сделать все что душе угодно… мм, например портфолио работ на стенке, или объявы на доске… в общем используйте фантазию
                      • 0
                        Представьте, как раз в текущем проекте пригодится )
                        • 0
                          представьте, тоже задумки интересные появились по использованию в проекте:-) в общем, афтару респект и карму+
                      • 0
                        Вот-бы ещё подвигать их, как на холодильнике ;)
                        • 0
                          Хмм… Средствами того же jQuery это сделать совсем несложно. Пожалую прикручу опцию, с помощью которой можно будет включить такую фишку.
                          • 0
                            Сделал таскабельный пример: romka.eu/examples/tagnetic/tagnetic-drag-and-drop.html. Делается он не правкой существующего Тагнетика, а использованием плагина ppDrag для jQuery.
                            • 0
                              тогда, наверное, стоит подумать как сделать, чтобы магнитики не вылезали за края холодильника и не налезали на ручку:-) но это так, для достоверности)))
                              • +3
                                Также было бы неплохо если бы магнитики не накладывались один на другой, а распихивали бы друг друга.
                      • 0
                        Он огромен, он разъехался влево (Opera 9.60) и я не представляю для чего я бы мог использовать это.
                        • 0
                          В комлекте идет 3 скина шириной 400, 600 и 850 пикселей, а в документации я описал как создать свой скин. Баг с тем, что холодильник разъезжается в Опере постараюсь исправить.
                        • 0
                          Очень интересный плагин, можно даже целый сайт-визитку сделать!

                          P.S.: А дверь-то не открывается у холодильника… :)
                          • 0
                            А вы ещё поесть чего надыбать хотели? :)
                          • 0
                            Всё в плане программирования хорошо сделанно, но просто ужастно сделанно в плане дизайна.
                            Найти нужную информацию очень сложно — менее значимые теги перекрывают более значимые цветом и формами, отвлекая глаз.
                            • 0
                              Мде, господа, у ммя тормозит, вроде не такая слабая машинка.
                              ИМХО, приколько, но ток не холодильник, извольте, уж очень тяжело получается и грузится долго. Давайте думать над альтернативой.
                              • –2
                                Зачем Вы это сделали?
                                • 0
                                  прикольно было бы, если их ещё двигать можно было )
                                  • 0
                                    rrromka
                                    16 октября 2008, 15:35

                                    Сделал таскабельный пример: romka.eu/examples/tagnetic/tagnetic-drag-and-drop.html. Делается он не правкой существующего Тагнетика, а использованием плагина ppDrag для jQuery.
                                    • 0
                                      вот енто реально круто =)))

                                      единственное, что — надо ограничить область перемещения =)
                                      • 0
                                        EverCelt
                                        16 октября 2008, 15:38

                                        тогда, наверное, стоит подумать как сделать, чтобы магнитики не вылезали за края холодильника и не налезали на ручку:-) но это так, для достоверности)))

                                        ))))читайте комменты
                                        • 0
                                          ага. и ещё в реадми указать — как менять бекграунд.
                                          я б тогда точно к бигстриту прикрутил -)
                                          • 0
                                            а бекграунд чего?
                                            • 0
                                              ну, вместо холодильника допустим воткнуть что-нить другое.
                                              либо, вообще, убрать бекграунд.
                                • 0
                                  Безумно, бесчеловечно, безжалостно и беспощадно долго грузится и отрисовывается оформление магнитиков… =(
                                  • 0
                                    ну зачем же так жаловаться… это можно так сказать версия 1.0 + идея 1.0
                                    все еще будет:-) и люди полетят как птицы)))))
                                  • 0
                                    На ручку так и просится тоже какую-нибудь ссылку повесить =)
                                    Было бы здорово, если бы в draggable-версии магнитики двигали друг друга, а не наезжали.
                                    • 0
                                      «Было бы здорово, если бы в draggable-версии магнитики двигали друг друга, а не наезжали.»

                                      было бы мега круто -)
                                      ещё оптимизировать, чтобы грузилось побыстрее -)
                                      • 0
                                        согласен. на ручке бы смоетралсь какаянибуль бирочка на веревочке:-) ну а магнитики… надо думать над реализацией
                                        • 0
                                          помоему и так огромный холодильнище, а тут еще столько эффектов...dragable, по-моему, самое минимально необходимое. Хотя эффекты, если не кушают ресурсов, тоже не лишни :)
                                        • +1
                                          У меня ни один пример с сайта не загрузился. Уронили?
                                          • 0
                                            Как открыть дверцу и добраться до самого вкусного? :)
                                            • 0
                                              а кто нибудь додумался, как ограничить область перетаскивания магнитиков, чтобы за края холодильника нельзя было двигать?

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