Готовые решения: WP-Cumulus - "Живое" облако тегов
Для популярного WordPress существует интересный плагин по генерации 3D облака тегов - WP-Cumulus (русская версия плагина), который хоть и изначально предназначен для WordPress, но можно легко вставить в любой HTML, о чем я сейчас и расскажу.
Согласно документации, заботливо предоставленной автором плагина, установка WP-Cumulus заключается в двух этапах.
Скачать готовые примеры использования WP-Cumulus можно здесь:
Использован материал:
Согласно документации, заботливо предоставленной автором плагина, установка WP-Cumulus заключается в двух этапах.
- Этап первый - создание ссылок для 3D облака
Перечень ссылок для 3D облака можно задать как в отдельном xml-файле, по умолчанию это tagcloud.xml<tags> <a href="http://yandex.ru/" target="_blank" style="font-size:24pt;">Yandex</a> <a href="http://google.com/" target="_blank" style="font-size:28pt;">Google</a> ... </tags>
tagcloud.xml обязательно должен быть в UTF8
Так и внутри самого HTML, на котором будет располагаться WP-Cumulus:
<script type="text/javascript"> var tags_list = encodeURI('<tags><a href="http://yandex.ru/" target="_blank" style="font-size:24pt;">Yandex</a><a href="http://google.com/" target="_blank" style="font-size:28pt;">Google</a></tags>'); </script>
- Этап второй - установка WP-Cumulus на HTML-страницу
Существует два способа установки Flash-объекта, а WP-Cumulus это именно flash, в HTML-документ
- Способ первый: классический:
При этом способе возможно подключение тегов только с помощью xml-файла
<OBJECT height="200" width="200"> <PARAM NAME="movie" VALUE="./tagcloud.swf" /> <param name="bgcolor" value="#999999" /> <param name="FlashVars" value="tcolor=0x990000&tspeed=100"> <embed src="./tagcloud.swf" flashvars="tcolor=0x990000&tspeed=100" type="application/x-shockwave-flash" bgcolor="#999999" width="200" height="200" /> </embed> </OBJECT>
Описание возможных flashvars смотрите ниже.
- Способ второй: при помощи javascript-библиотеки swfobject.js
- С использованием XML-файла:
<script type="text/javascript" src="./swfobject.js"></script> <div id="wpcumulus"></div> <script type="text/javascript"> var wpcumulus = new SWFObject("tagcloud.swf", "wpcumulus", "200", "200", "9", "#336699"); // тут задаем всевозможные параметры вывода
// например, цвет: wpcumulus.addVariable("tcolor", "0x218dd1"); // и скорость вращения wpcumulus.addVariable("tspeed", "100"); // а тут указываем полный путь к xml-файлу (по умолчанию это tagcloud.xml)
wpcumulus.addVariable("xmlpath", "/my/path/to/tagcloud/my_tag.xml"); wpcumulus.write("wpcumulus"); </script> - С указанием ссылок-тегов внутри HTML
<script type="text/javascript" src="./swfobject.js"></script> <div id="wpcumulus"></div> <script type="text/javascript"> var tags_list = encodeURI('<tags><a href="http://yandex.ru/" target="_blank" style="font-size:24pt;">Yandex</a><a href="http://google.com/" target="_blank" style="font-size:28pt;">Google</a></tags>'); var wpcumulus = new SWFObject("tagcloud.swf", "wpcumulus", "200", "200", "9", "#336699"); wpcumulus.addVariable("mode", "tags"); // тут задаем всевозможные параметры вывода
// например, цвет: wpcumulus.addVariable("tcolor", "0x218dd1"); // и скорость вращения wpcumulus.addVariable("tspeed", "100"); // а тут прописываем наши ссылки-теги wpcumulus.addVariable("tagcloud", tags_list); wpcumulus.write("wpcumulus"); </script>
Описание возможных параметров смотрите ниже
- С использованием XML-файла:
- Способ первый: классический:
- Описание допустимых flashvars/параметров
Название Формат параметра Описание mode Строка: tags|cats|both Сообщает, какой тип ссылок используется: теги, категории или оба типа distr Строка: true|false Если стоит true, то теги равномерно распространяются по всей видимой области tcolor Цвет в 16тиричном коде,
например 0xff0000 для красного.Цвет тегов по умолчанию. Используются стандартные hex-цвета, как и в обычном html, только в начале ставим 0x tcolor2 Цвет в 16тиричном коде Вторичный цвет тега. Если параметр установлен, то цвет тега будет состоять из градиента между основным цветом и этим, в зависимости от популярности ссылки hicolor Цвет в 16тиричном коде Цвет тега, который будет при наведении на него указателя мыши tspeed Цифра: проценты Определяет скорость вращения ссылок. По умолчанию равно 100. tagcloud XML-строка Облако тегов. XML-формат описан выше xmlpath Путь к XML-файлу URL, по умолчанию это ‘tagcloud.xml’
Скачать готовые примеры использования WP-Cumulus можно здесь:
- Оригинальнвя версия(без поддержки русских букв): wp-cumulus-example.zip
- Русская версия (с поддержкой русских букв): wp-cumulus-rus.zip
Использован материал:
- с сайта разработчика: How to repurpose my tag cloud Flash movie
- с WordpressPlugins.ru: WP-Cumulus русская версия
Внимание, оригинальная версия поддерживает только латинский набор символов, о чем сказано на сайте автора:
О том, как добавить в "облако" другие языки и шрифты, читайте здесь: How to add more characters to WP-Cumulus
Some characters are not showing up
Because of the way Flash handles text, only Latin characters are supported in the current version. This is due to a limitation where in order to be able to animate text fields smoothly the glyphs need to be embedded in the movie. The Flash movie's source code is available for download through Subversion. Doing so will allow you to create a version for your language. There's a text field in the root of the movie that you can use to embed more characters. If you change to another font, you'll need to edit the Tag class as well.
Because of the way Flash handles text, only Latin characters are supported in the current version. This is due to a limitation where in order to be able to animate text fields smoothly the glyphs need to be embedded in the movie. The Flash movie's source code is available for download through Subversion. Doing so will allow you to create a version for your language. There's a text field in the root of the movie that you can use to embed more characters. If you change to another font, you'll need to edit the Tag class as well.
О том, как добавить в "облако" другие языки и шрифты, читайте здесь: How to add more characters to WP-Cumulus
Похожие материалы:
а вы такой пример используете? 1-в-1?
<script type="text/javascript" src="./swfobject.js"></script>
<div id="wpcumulus"></div>
<script type="text/javascript">
var tags_list = encodeURI('<tags><a href="http://yandex.ru/" target="_blank" style="font-size:24pt;">Yandex</a><a href="http://google.com/" target="_blank" style="font-size:28pt;">Google</a></tags>');
var wpcumulus = new SWFObject("tagcloud.swf", "wpcumulus", "200", "200", "9", "#336699"
// тут задаем всевозможные параметры вывода
// например, цвет:
wpcumulus.addVariable("tcolor", "0x218dd1"
// и скорость вращения
wpcumulus.addVariable("tspeed", "100"
// а тут прописываем наши ссылки-теги
wpcumulus.addVariable("tagcloud", tags_list);
wpcumulus.write("wpcumulus"
</script>
Да, использую именно этот пример 1-в-1. Ни одного байта в нём не менял.
Можете сами в этом убедиться - создал тестовую страничку здесь
Файлы tagcloud.swf и swfobject.js лежат в той же директории, что и сама страничка.
Всё как положено. Но облако всё равно по какой-то причине пустое
Есть идеи?
Можете сами в этом убедиться - создал тестовую страничку здесь
Файлы tagcloud.swf и swfobject.js лежат в той же директории, что и сама страничка.
Всё как положено. Но облако всё равно по какой-то причине пустое
Есть идеи?
31 Мая 2011 (19:17:45)
Гость
(гость)
• ответить
Огромное спасибо за подробно и доступно изложенный материал!
22 Мая 2012 (22:09:54)
Kisur
(гость)
• ответить
Спасибо. Всё работает (особенно понравился режим transparent)
7 Января 2022 (21:31:46)
Фарит
(гость)
• ответить
Помогите пожалуйста! Необходимо создать облако 3д тегов работающий в автономном режиме (просто html файл). Хотелось бы пошаговую инструкцию.
С 12 января 2021 года компания Adobe прекратила поддержку Flash Player. Версии Flash вышедшие после июня 2020 года (от 32.0.0.387 и выше) содержат так называемую «временную бомбу», которая отключила флеш с 12 января 2021 года. Кроме того, большинство популярных браузеров, таких как Chrome или Firefox, принудительно удалили модули Flash в своих последних версиях.
Следовательно, данная статья про 3D облако тегов больше не актуальна.
Следовательно, данная статья про 3D облако тегов больше не актуальна.
но невыходит. при этом подключении он у меня тоже выводит облако тегов из XML-файла, а если его нет, то облако пустое