S3.Blog

15 Ноября 2024
A A A   RSS-лента
"Я знаю, что ничего не знаю, но многие не знают и этого". Сократ [?].

Готовые решения: WP-Cumulus - "Живое" облако тегов

Дата последнего изменения: 6 Сентября 2009
Метки статьи: Готовые решения, HTML
Для популярного WordPress существует интересный плагин по генерации 3D облака тегов - WP-Cumulus ( русская версия плагина ), который хоть и изначально предназначен для WordPress, но можно легко вставить в любой HTML, о чем я сейчас и расскажу.


Похожие материалы:




Сергей (гость) • ответить
Спасибо единственное как сделать фон прозрачный.
S (гость) • ответить
<script type="text/javascript" src="swfobject.js"></script>
<div id="flashcontent">This will be shown to users with no Flash or Javascript.</div>
<script type="text/javascript">
var so = new SWFObject("tagcloud.swf", "tagcloud", "370", "450", "7", "#ffffff";
// uncomment next line to enable transparency
so.addParam("wmode", "transparent";
so.addVariable("tcolor", "0x333333";
so.addVariable("tcolor2", "0x009900";
so.addVariable("hicolor", "0x000000";
so.addVariable("tspeed", "100";
so.addVariable("distr", "true";
so.addVariable("xmlpath", "tagcloud.xml";
so.write("flashcontent";
</script>
Kir (гость) • ответить
Привет!
А подскажи, добрый человек, чтобы шрифт уменьшить, где-что поправить надо, а то буковки гигантские получаются, вылазят за граници swf-ки
Александрответить
При создании ссылок в style укажите меньший размер шрифта чем в примере:
<a href="http://yandex.ru/" target="_blank" style="font-size:24pt;">
елена (гость) • ответить
а по русски сделать как подскажите пожалуйста
Александрответить
писать в UTF-8
Павел (гость) • ответить
подскажите а как вместо тегов сделать маленькие картинки?
заранее благодарен.
Александрответить
Боюсь что никак, но попробуйте внутри <a href...> прописать <img src...>
excalibur (гость) • ответить
Использую флешку, скачанную от Вас, так как она может отображать кириллические тексты, но у меня на флешка ссылки не кликабельные и бордеров нету. Параметры добавляю через swfobject. Подскажите, пожалуйста, где мя ошибка.
Заранее спасибо!
Александрответить
Покажите ваш полный код подключения "облака" и формирования ссылок.
excalibur (гость) • ответить
<script type="text/javascript">
<!--
swfobject.addDomLoadEvent(function() {
swfobject.embedSWF(
//basePath + '/' + templatePath + "/flash/text_and_image_cloud.swf",
basePath + '/' + templatePath + "/flash/tagcloud.swf",
"cloudtag",
"220", "225", "10",
basePath + '/' + templatePath + "/flash/expressInstall.swf",
{
//cloud_data: 'cloud_data.xml',
//cloud_data: '../../../../..' + cloudtagXmlPath,
xmlpath: cloudtagXmlPath,
tcolor:"0x999999",
tcolor2:"0x000000",
hicolor:"0x000000",
tspeed:"250",
distr: true,
fontFace:"Times New Roman"
},
{wmode: "transparent", menu: "false", quality: "best"}
);
});
//-->
</script>


А это xml
<?xml version="1.0" encoding="UTF-8"?>
<tags><a href="/project4/vblondinki/ru/tag/sdfdsfsdfd/page1/" style="font-size: 10px;">sdfdsfsdfd</a> <a href="/project4/vblondinki/ru/tag/%D0%B1%D0%BB%D0%BE%D0%BD%D0%B4%D0%B8%D0%BD%D0%BA%D0%B0/page1/" style="font-size: 10px;">блондинка</a> <a href="/project4/vblondinki/ru/tag/%D1%81%D1%82%D0%B0%D1%82%D1%8C%D1%8F/page1/" style="font-size: 10px;">статья</a></tags>
excalibur (гость) • ответить
Все почти хорошо, только вот ссылки почему-то не кликабельные и бордеров нету. Вот здесь справа облако __http://vblondinki.com, пока я не придумал как это исправить, оно остается вот таким наполовину рабочим.
Александрответить
На вашем сайте все прекрасно крутится-вертится, ссылки с бордером и кликабельные.
Проверил и в ИЕ, и в ФФ
excalibur (гость) • ответить
Да, уже работает. Через несколько часов после написания последнего комментария я взялся снова гуглить и скачал еще одну флешку, и там заработало, а почему не работало с предыдущей флешкой - так и не выяснил.

Спасибо.
Урмат (гость) • ответить
По русски не получается, подскажите что нужно изменить?
Александрответить
писать в кодировке UTF-8
гость (гость) • ответить
все работает, кроме одного почему то ссылки не кликабельны
Александр (гость) • ответить
Александр, поскажите как сделать рабочим код при запуске его на локальной машине? Т.е. ссылка формата file:///C:/MyPage/index.html
Александрответить
попробуйте дать не абсолютную ссылку, вида http://.... , а относительную: href="index.html"
в таком случае, по идее, должен загрузиться index.html, находящийся там же, откуда вызвана страница с "облаком"
Александр (гость) • ответить
в самом <tags></tags> всё впорядке и ссылки в нём указаны внешние href='www.google.com'. Когда я размещаю страницу на сервере - она работает и всё кликается. А когда запускаю страницу в броузере как локальный файл с винчестера - всё работает, шар с тагами крутится но при кликах по внешним ссылкам не переходит.
есть идеи?
Александрответить
Скачал готовые примеры использования WP-Cumulus: wp-cumulus-example.zip
Проверил....
Действительно, если запускать примеры локально, то ссылки не кликаются.
Скорее всего это особенность флэша tagcloud.swf
Единственный вариант, который у меня локально заработал, это:
Браузер Firefox + дополнение ieTab ( https://addons.mozilla.org/ru/firefox/addon/ie-tab-plus-ff-36/ )
Открыл локально пример с облаком, кликнул на ieTab - firefox-вкладка стала ИЕшной.
Всё, теперь ссылки в облаке, загруженном локально, кликаются
Александр (гость) • ответить
Александр, а Вы с Roy'ем Tanck'ом общаетесь? Может он что-то подскажет? Можете ему вопрос задать по этому поводу?
Александрответить
Я с ним знаком так же как и вы с ним, т.е. никак
Так что вы сами можете спросить у него про вашу проблему

А еще у меня есть жуткие подозрения что проблема в настройках браузера и какая-то из политик безопасности не дает сделать клик на этом флеше, загруженной локально.
Поройтесь в настройках браузера - может найдете ту самую "галочку" которую надо снять или поставить
Александр (гость) • ответить
В таком случае ссылки не кликаются
Олег (гость) • ответить
Работает только с латинецей, по руски ничего нету
Александрответить
Скачайте русскую версию с поддержкой русских букв: wp-cumulus-rus.zip
Русские буквы должны быть в utf8-кодировке
Kenshin (гость) • ответить
Подключил русскую версию классическим способом - через OBJECT - прекрасно работает, спасибо
Но у меня не получается реализовать вариант подключения облака с указанием ссылок-тегов внутри HTML, а хотелось бы именно так
при таком подключении всё равно выводится облако с тегами из tagcloud.xml и наверное вот почему:
>> xmlpath | Путь к XML-файлу | URL, по умолчанию это ‘tagcloud.xml’

ладно.. удаляю tagcloud.xml и теперь облако выводится совсем пустым (без тегов)
делал всё как описано, код копировал из примера - всё равно не работает
теги из tags_list напроч отказываются выводиться.. помогите разобраться
Александрответить
Но у меня не получается реализовать вариант подключения облака с указанием ссылок-тегов внутри HTML, а хотелось бы именно так

я не совсем понял что именно вы хотите, как именно у вас не получается и что выходит в реальности.

можете более подробно описать проблему?
Kenshin (гость) • ответить
хочу подключить вот так:
С указанием ссылок-тегов внутри HTML

но невыходит. при этом подключении он у меня тоже выводит облако тегов из XML-файла, а если его нет, то облако пустое
Александрответить
а вы такой пример используете? 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>
Александрответить
можете показать ваш код подключения облака?
Kenshin (гость) • ответить
Да, использую именно этот пример 1-в-1. Ни одного байта в нём не менял.
Можете сами в этом убедиться - создал тестовую страничку здесь
Файлы tagcloud.swf и swfobject.js лежат в той же директории, что и сама страничка.
Всё как положено. Но облако всё равно по какой-то причине пустое
Есть идеи?
Александрответить
ааа... пардон!
после строки var wpcumulus = new SWFObject.....
добавьте вот такую строку:
wpcumulus.addVariable("mode", "tags" ) ;
Kenshin (гость) • ответить
Во! Спасибо большое! Так всё работает
Гость (гость) • ответить
Огромное спасибо за подробно и доступно изложенный материал!
Kisur (гость) • ответить
Спасибо. Всё работает (особенно понравился режим transparent)
Фарит (гость) • ответить
Помогите пожалуйста! Необходимо создать облако 3д тегов работающий в автономном режиме (просто html файл). Хотелось бы пошаговую инструкцию.
Александрответить
С‭ ‬12‭ ‬января‭ ‬2021‭ ‬года компания Adobe прекратила поддержку Flash Player.‭ ‬Версии Flash вышедшие после июня‭ ‬2020‭ ‬года‭ (‬от‭ ‬32.0.0.387‭ ‬и выше‭) ‬содержат так называемую‭ «‬временную бомбу‭»‬,‭ ‬которая отключила флеш с‭ ‬12‭ ‬января‭ ‬2021‭ ‬года.‭ ‬Кроме того,‭ ‬большинство популярных браузеров,‭ ‬таких как Chrome или Firefox,‭ ‬принудительно удалили модули Flash в своих последних версиях.‭

Следовательно, данная статья про 3D облако тегов больше не актуальна.

 
 
  Имя *:   Решите пример *: =
 
Полужирный Курсив Подчеркнутый Перечеркнутый
 
Вставить изображение Сделать цитатой Вставить ссылку Вставить код

Вставить смайл
 
 

 



© S3.Blog: Если критикуешь, не предлагая решения проблемы, то ты становишься частью этой проблемы.