|

3D Облако тегов. WP-Cumulus для HTML-сайтов

Понедельник, 15 Февраль 2010. 7:54. Раздел: JavaScript69 комментариев

Очень красивый и популярный плагин для вордпресса WP-Cumulus уже адаптирован для многих CMS. Но частенько встречаю вопросы типа «как сделать объемное облако тегов на PHP- или HTML-сайтах?».
Давно уже хотел адаптировать плагин, но все времени не хватало, а тут случай подвернулся.
Выкладываю результат.


Итак. Сначала само облако тегов. Уж не знаю, как вы получите это облако на HTML-сайте без серверных скриптов, и есть ли у вас тэги вообще... :) Но если есть база данных с тэгами, то особых проблем это не вызовет.
Способы вывода мы сейчас рассматривать не будем, ибо для этого надо знать, как и где они у вас хранятся, структуру базы данных, и т.п. Будем считать, что сами тэги вы уже каким-то образом вывели в стандартном виде — допустим, в блоке <div id="tags">:

<div id="tags">
	<a href="http://tags/%D0%9E%D0%B1%D0%BB%D0%B0%D0%BA%D0%BE/"
	target="_blank" style="font-size:23px;">Облако</a>
	<a href="/tags/%D0%A2%D1%8D%D0%B3/" style="font-size:10px;">Тэг</a>
	<a href="/tags/%D0%9E%D0%B1%D1%8A%D1%91%D0%BC%D0%BD%D1%8B%D0%B9/"
	target="_blank" style="font-size:15px;">Объёмный</a>
	<a href="/tags/HTML/" style="font-size:12px;">HTML</a>
	<a href="/tags/CSS/" style="font-size:21px;">CSS</a>
	<a href="/tags/3D/" style="font-size:23px;">3D</a>
</div>

Ссылки у вас могут иметь другой вид, могут быть прописаны классы, это не важно. Важно лишь наличие самой ссылки и style="font-size:Npx;" в тэге <a>
Еще один важный момент — в style тэгов <a> не должно быть никаких цифр кроме размера шрифта — это особенность парсера WP-Cumulus. Flash распознает также атрибут target у ссылок. Если он указан, то ссылка открывается в новом окне.
Также можно указать индивидуальный цвет каждой ссылки, добавив невалидные атрибуты color(основной цвет) и hicolor(цвет при наведении курсора) в тэг <a> и HEX-коды цвета в качестве значений.
Т.е. выглядеть ссылки могут примерно так:

<a href="http://iguanadreams.com/" target="_blank" color="0xFF0000"
hicolor="0x00FF00">Iguanadreams.com</a>

Для объемного облака нам потребуется Flash-файл, который входит в состав плагина WP-Cumulus и скрипт swfobject.js (не забудьте разархивировать перед использованием), который чаще всего употребляется для вывода флеш.
С официального сайта WordPress можно скачать свежую версию плагина WP-Cumulus при необходимости, или исходник Flash в версии для разработчиков. Но в файле, который там находится отсутствуют кириллические символы. Также, я убрал проверку наличия 'http' в тэгах — в «родном» файле возможно указание ссылок только в полной форме — в виде 'http://site.com/file.html'.Файл tagcloud.swf (версия плагина 1.23) с кириллическими и латинскими символами.
Если нужно, то вот такой же файл tagcloud.swf, в который дополнительно к кириллице и латинице добавлен иврит (для правильной работы облака необходим дополнительный скрипт и некоторые дополнения к коду, который приведен здесь — скачивайте полный архив по последней ссылке в конце поста).
Русская документация по SWFObject находится тут: Внедрение Flash с помощью SWFObject 2.

Теперь подключаем скрипты (если есть возможность — то перед закрывающим тэгом </head>):

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
	function  myTags(mytags){
		mytags=mytags.replace(/<A/g, '<a')
			.replace(/\/A>/g, "/a>")
			.replace(/(\starget=_)(\w*)/g, ' target="_$2"')
			.replace(/(\sclass=)(?!")(\w*)/g, ' class="$2"')
			.replace(/(\sname=)(?!")(\w*)/g, ' name="$2"')
			.replace(/(\sid=)(?!")(\w*)/g, ' id="$2"')
			.replace(/(\srel=)(?!")(\w*)/g, ' rel="$2"');
		mytags=encodeURIComponent(mytags).replace(/!/g, '%21')
			.replace(/'/g, '%27').replace(/\(/g, '%28')
			.replace(/\)/g, '%29').replace(/\*/g, '%2A');
		var rnumber = Math.floor(Math.random()*9999999);
		var flashvars = {
			tcolor:"0x2A62C8",
			tcolor2:"0x000000",
			hicolor:"0xB12AC8",
			tspeed:"110",
			distr:"true",
			mode:"tags",
			tagcloud:mytags
		};
		var params = {
			allowScriptAccess:"always",
			bgcolor:'#ffffff'
		};
		var attributes = {
			id:"flash_cloud"
		};
		swfobject.embedSWF("tagcloud.swf?r="+rnumber,
						   "tags", "600", "420", "9.0.0",
						   "expressInstall.swf", flashvars,
						   params, attributes);
	}
	window.onload=function(){
		var mytags="<tags>"
		+document.getElementById('tags').innerHTML
		+"</tags>";
		myTags(mytags);
	};
</script>

Проверьте у себя пути к файлам swfobject.js и tagcloud.swf
Если в ваших скриптах уже присутствует событие onload, то код внутри функции, которая запускается при загрузке надо включить в него, иначе один из этих эвентов не сработает.
Если вы пользуетесь какой-либо библиотекой JavaScript, то удобнее воспользоваться ей для запуска функции. Код для jQuery см. ниже.

Параметры, которые можно изменить в скрипте при желании:

tcolor:"0x2A62C8", /* цвет 1 - HEX */
tcolor2:"0x000000", /*  цвет 2 цвета меняются от tcolor к tcolor2 */
hicolor:"0xB12AC8", /* цвет тэгов при наведении курсора мыши */
tspeed:"110", /* скорость вращения облака */
distr:"true", /* true - распределять тэги равномерно
по поверхности сферы, false - не распределять */

Пример 3D-облака тэгов в работе.

3D облако тэгов для jQuery.

Необходиме файлы:
Сама библиотека jQuery. Библиотека SWFObject. Те же самые файлы .swf (Latin+Кириллица), либо (Latin+Кириллица+Иврит) на выбор.

Отличий почти никаких в данном случае кроме запуска самой функкции. Функцию myTags ( ) я пропустил — она полностью аналогична функции в предыдущем примере.

<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
	function  myTags(mytags){
	...
	}
	jQuery().ready(function(){
		var mytags="<tags>"
		+jQuery('#tags').html()
		+"</tags>";
		myTags(mytags);
	});
</script>

Если что-то не работает.

Во-первых — проверяем пути к файлам скриптов и к файлу tagcloud.swf
Во-вторых — проверяем правильность написания HTML в облаке тэгов. Дело в том, что ActionScript в файле tagcloud.swf получает и обрабатывает данные в соответствии со строгой спецификацией XML. Пропущеннаяя кавычка или недопустимый символ, которые легко обрабатыватся браузерами, могут стать причиной ошибки.

О некоторых сложностях. Проблемы innerHTML и перекодироваеия в URL-совместимый формат с помощь JavaScript.

Наверное вы обратили внимание на количество «реплейсов» в функции myTags ( ). Поясню, с чем это связано. Флеш получает данные примерно в таком же виде, в котором они находятся в HTML — то что находится внутри <div id="tags"> заключается в тэг <tags>, перекодируется в URL-совместимый формат и в таком виде отправляется во флеш.

В WordPress за это отвечает PHP — скрипт форматирует строку, кодирует ее с помощью urlencode ( ) и в готовом виде передает JavaScript'у, который только отправляет готовую строку.
В нашем же случае извлечение, форматирование и кодирование целиком ложится на JavaScript.

Логично получить весь блок тэгов сразу, поскольку он не меняется. Для получения фрагмента HTML кода в JavaScript существует единственный способ — .innerHTML.
Тут-то и начинаются проблемы. Стоит сказать, что парсер во флеш-файле понимает только тэги <a> в нижнем регистре, как это принято писать в xHTML, но не тэги <A>. А innerHTML в Internet Explorer и Opera выдает код в формате HTML 4 — т.е. ссылки будут выглядеть как <A> независимо от указанного Doctype.

Давайте посмотрим что происходит с кодом после получения его с помощью innerHTML в разных браузерах.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>3D Облако тэгов. Объемное облако тэгов для HTML-сайтов</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
	window.onload=function(){
		document.getElementById('output')
		.appendChild(
			document.createTextNode(
				document.getElementById('tags')
				.innerHTML.replace(/\n/g,'< br />')
			)
		);
	};
</script>
</head>
<body>
<div id="tags">
	<a href="http://tags/%D0%9E%D0%B1%D0%BB%D0%B0%D0%BA%D0%BE/"
	class="myclass" name="myid" title="Mytitle here" id="myid"
	target="_blank" style="font-size:23px;">Облако</a>
	<a href="/tags/%D0%A2%D1%8D%D0%B3/" style="font-size:10px;">Тэг</a>
</div>
<div id="output" style="margin:50px 0 0;"> </div>
</body>
</html>

Наш HTML мы будем забирать из <div id="tags"> и в виде текста помещать в <div id="output">. Для получения полной картины о форматировании заменим переносы строки на <br />

Firefox и браузеры на основе WebKit (Google Chrome и Safari) выдают код, абсолютно идентичный коду в <div id="tags">:

<br /> <a href="http://tags/%D0%9E%D0%B1%D0%BB%D0%B0%D0%BA%D0%BE/" class="myclass" name="myid" title="Mytitle here" id="myid" target="_blank" style="font-size: 23px;">Облако</a><br /> <a href="/tags/%D0%A2%D1%8D%D0%B3/" style="font-size: 10px;">Тэг</a><br />

Opera выдает идентичный код, только все тэги <a> заменены на <A>:

<br /> <A href="http://tags/%D0%9E%D0%B1%D0%BB%D0%B0%D0%BA%D0%BE/" class="myclass" name="myid" title="Mytitle here" id="myid" target="_blank" style="font-size:23px;">Облако</A><br /> <A href="/tags/%D0%A2%D1%8D%D0%B3/" style="font-size:10px;">Тэг</A><br />

А вот что выдает Internet Explorer:

<A style="FONT-SIZE: 23px" id=myid class=myclass title="Mytitle here" href="http://tags/%D0%9E%D0%B1%D0%BB%D0%B0%D0%BA%D0%BE/" name=myid target=_blank>Облако</A> <A style="FONT-SIZE: 10px" href="/tags/%D0%A2%D1%8D%D0%B3/">Тэг</A>

Тэги <a> заменены, переносы строк утеряны. Пропали кавычки у значений некоторых атрибутов.
Причем это не зависит от версии браузера. 6-й эксплорер выдает такой же код, как и 8-й, только атрибуты тэгов расположены в другом порядке.

Первая порция «реплейсов» устраняет проблемы с неверным форматированием кода в Эксплорерах и Opera.

Затем используется функция encodeURIComponent ( ), как наиболее близкая к функции urlencode ( ) в PHP. Но возникает проблема. связанная с тем, что JavaScript не перекодирует некоторые специальные символы.
Вторая порция .replace ( ) устраняет эту проблему.

Скачать архив с примером облака тегов (index.html, swfobject.js, tagcloud.swf, expressinstall.swf)

Скачать архив (иврит+русский) с примером облака тегов (index.html, swfobject.js, heb_cumulus.js, tagcloud.swf, expressinstall.swf)




Раздел: JavaScript. Тэги: <, , />

Следить за комментариями к этой статье (RSS 2.0) | Оставить комментарий

69 комментариев

  1. Олег 28 Апрель 2010 в 17:41

    Здравствуйте, а есть вариант сделать вместо тегов-слов, теги-картинки?

    Т.е. чтобы вместо слов в облаке летали картинки))

  2. A1ex 28 Апрель 2010 в 18:03

    >>> Здравствуйте, а есть вариант сделать вместо тегов-слов, теги-картинки?

    Да, можно... Но для этого нужно переписать плагин. Впрочем, я сомневаюсь, что это будет работать нормально. — Это получается довольно сложная «карусель» — с вращением в одной плоскости их достаточно много. Боюсь, что в связи с тем, что место под облако выделяется обычно немного, и размеры картинок придется просчитывать в зависимости от размеров блока с облаком, то картинки будут слишком мелкими и неразборчивыми в некоторых случаях.

    Вдобавок, все это может сильно «тормозить».

  3. колян 28 Май 2010 в 1:13

    А не могли бы вы всё это сделать(html,js,swf) и выложить в zip архиве, чтобы можно было скачать и запустить на компе к примеру на денвере......и чтобы облачко работало ))))))))))))

  4. Хворь 11 Сентябрь 2010 в 22:12

    Решение классное. Присоединяюсь к вопросу о картинках в облаке.

  5. Maksym 17 Октябрь 2010 в 23:16

    А можно как-то WP-Cumulus для HTML-сайтов только в одном коде HTML файла разместить??

  6. AlexKF 18 Октябрь 2010 в 3:00

    Здравствуйте, посмотрел ваше облачко, просто суепер. Скажу чесно в JS я не очеень силен — точнее вобще ни как , поетому все ваши описания мне не о чем не говорят, я просто взял этот код ermilov.net/alex/samples/wp-cumulus/ с JS и флешь и просто вставил его на сайт — работает (юкоз), правда вот одного не нашел, и весь сам JS пересмотрел пару раз и сам код в html — ни как не могу понять где что и как изменить чтоб фон стал прозрачным. BG колор — это понятно а прозрачность как подскажите где в коде ermilov.net/alex/samples/wp-cumulus/ что именно изменить.

  7. A1ex 18 Октябрь 2010 в 6:04

    >>> Maksym

    Все скрипты можно разместить в HTML-коде (в тегах <script>), а вот swf-файл придется разместить отдельно.

  8. A1ex 18 Октябрь 2010 в 6:10

    >>> AlexKF

    Хороший вопрос. Вместо bgcolor:'#ffffff' в параметрах напишите wmode:'transparent'

  9. A1ex 18 Октябрь 2010 в 6:31

    >>> колян

    Выложил полный архив с примером. Пример работает и без Денвера (нужно просто разархивировать папку). Ссылка на архив в конце поста.

  10. AlexKF 18 Октябрь 2010 в 16:24

    >>>A1ex

    Спасобо за столь быстрый ответ !!! так вон куда адо было «transparent» вставить — понятно.

    прозрачность работат, но совет всем лучше с фоном ! с прозрачностью «теги» не очень плавно плавают — небольшими рывками.

    Хотя, точно не могу сказать возможно это только у меня так потому что рядом с тегами ущё 3 флэшь анимации.

  11. AlexKF 18 Октябрь 2010 в 17:23

    и ещё вопрос а что означает «expressInstall.swf» и для чего етот тег ?

  12. A1ex 19 Октябрь 2010 в 2:38

    >>>AlexKF

    — Этот файл — «expressInstall.swf», показывается тем, у кого версия флеш ниже указанной (т.е. тем, у кого основной файл — tagcloud.swf работать не будет). Версия флеш указывается в предыдущей переменной, передаваемой скрипту SWFObject — в данном случае указана 9-я версия — «9.0.0»

    Сам файл «expressInstall.swf» я не стал класть в архив с примером, но если вы скачиваете SWFObject с официального сайта проекта (по ссылке в посте), то там он присутствует. По сути данный файл — это текст со ссылкой на сайт Adobe для загрузки и установки последней версии Flash-плеера.

    По поводу прозрачности я поленился сразу предупредить. Использование прозрачного фона сильно «затормаживает» анимацию. Если вы пользуетесь динамичными сценами с перемещением большого количества сложных объектов (особенно объектов, которые сами имеют прозрачные или полупрозрачные участки), то обязательно тестируйте результат на слабых компьютерах. Иначе посетители рискуют увидеть «слайд-шоу», либо в некоторых случаях и окончательно зависший браузер.

  13. Андрей 23 Октябрь 2010 в 19:43

    Здравствуйте! Давно искал ОБЛАКО и перепробовав много вариантов, могу сказать СПАСИБО за столь доступную реализацию данного продукта!

    Есть только один вопрос: как научить его работать с русскими буквами? Или может я чего то не догоняю, но в коде страницы, на месте русских букв, у меня пропечатанны «крякозяблы»:

    Облако

  14. A1ex 23 Октябрь 2010 в 19:49

    >>>Андрей

    Скрипты написаны под юникод ( <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ).

    Возможно, у вас страница HTML в другой кодировке?

    Хотя, если это в коде HTML — значит эта ошибка где-то раньше возникает. У вас сайт на CMS? — Откуда берутся теги? — в любом случае, это несовпадение кодировок. На странице и в серверном скрипте, или в базе данных...

  15. Андрей 23 Октябрь 2010 в 20:11

    Спасибо. Посижу поковыряюсь. Если не получится, то в понедельник обращусь к Вам за помощью.

  16. Татьяна 4 Ноябрь 2010 в 10:01

    Доброго времени суток!

    А скажите, пожалуйста, div с тегами должен располагаться там, где будет выводиться flash?

    И еще вопрос: а что нужно исправить в коде, чтобы, если у посетителя сайта не включен flash облако отображалось просто ссылками. Есть такая возможность?

    И еще, а можно ли в div указать ссылки просто на страницы, а не на теги? У меня нет базы с тегами, и я хочу, чтобы ссылки просто вели на определенные страницы.

    Я первый раз делаю себе сама сайт, поэтому я совсем еще новичок :)

    Спасибо!

  17. Татьяна 12 Ноябрь 2010 в 0:20

    Спасибо за облако!

    Всё отлично работает, кроме hicolor. Не хочет меняться цвет при наведении мыши. Ни из скрипта, ни если писать hicolor в ссылке.

    Подскажите, как исправить, пожалуйста.

  18. A1ex 22 Ноябрь 2010 в 6:37

    >>> Татьяна

    1. — Да. Div должен располагаться там, где будет выводиться flash (JavaScript заменяет этот блок флешем) Хотя, если Вы хорошо владеете CSS, то сможете с помощью CSS или JavaScript сделать так, что Flash-блок будет показываться в другом месте. Только зачем? ;)

    2. — Практически нет посетителей с отключенным флеш и включенным джаваскриптом. Если у посетителя отключен JavaScript, то он увидит «просто ссылки». Если версия Flash ниже требуемой, то при использовании полной версии SWFObject (скачанной с официального сайта скрипта — ссылка есть в посте), посетитель увидит ссылку с предложением скачать и установить последнюю версию Flash Player'a.

    3. — Да, конечно. В примере так и сделано. Он работает с обычными ссылками, не из базы.

    4. — hicolor

    А правильно ли Вы указываете цвет? В HTML/CSS при указании HEX используется «решетка» — знак «#», — например «#000000».

    Во Flash цвет начинается с «0x» и тот же цвет будет выглядеть как «0×000000»

  19. Анна 25 Ноябрь 2010 в 12:15

    Скажите, пожалуйста, для обычных HTML-сайтов, без системы управления можно внедрить этот блок тэгов? Я скачала архив, который в конце поста дан, но ничего не отображается, где взять отдельно файл tagcloud.swf

  20. A1ex 25 Ноябрь 2010 в 18:47

    >>> Анна

    Да, конечно можно использовать облако и для статичных сайтов без CMS.

    Архив надо просто распаковать и открыть файл index.html . Если вы пытаетесь запустить файл из архива, то ничего не увидите.

    Ссылки на отдельный файл tagcloud.swf есть в посте после второго блока кода. После нажатия на ссылку у вас откроется пустая страница tagcloud.swf. Чтобы сохранить этот файл нажмите клавиши Ctrl+S после открытия страницы. Но в архиве, ссылка на который находится в конце поста и который вы уже видимо скачали, этот файл уже есть.

  21. Дмитрий 28 Ноябрь 2010 в 17:02

    Чей-то не пойму, если ссылка локальная, то по ней переходит, а если ссылка http:// то нет ???

  22. A1ex 29 Ноябрь 2010 в 13:54

    >>> Дмитрий

    Ссылки можно использовать любые — внешние, или внутренние. Лишь бы ссылка была верной :)

  23. Анна 29 Ноябрь 2010 в 15:32

    Я скачала архив, все отлично работает, заменила слова в блоке div на свои — облачко крутится с моими словами, но ссылки то никуда не ведут. Там прописана директория tags, которая создается в системах управления при установке модуля. А у меня простой сайт с отдельными страничками, и просто заменив ссылку на свою внутреннюю страницу, или на внешнюю ссылку (например: www.yandex.ru) ничего не получается. Вы отвечаете Татьяне, что в примере работают просто ссылки, но где они просто ссылки, везде tags указано. Что делать то?

  24. Анна 29 Ноябрь 2010 в 15:52

    Кстати, я еще поторопилась, сказав, что отлично крутится облачко. только в гуглХром и мазила, а опера и ИЕ не видят его вообще

  25. Анна 29 Ноябрь 2010 в 16:11

    Последнее тестирование уже на сервере показало следующее: ссылки внешние работают:))), но в ИЕ не крутится облачко, а отображается просто блок с ссылками, а в опере вообще ничего не видно — пустое место. Подскажите, что для этих браузеров нужно еще?

  26. Ghost_dead 29 Ноябрь 2010 в 21:56

    +1 в IE 8 простой блок с ссылками

  27. A1ex 30 Ноябрь 2010 в 0:28

    >>> Анна и Ghost_dead

    Давайте попробуем разобраться, в чем дело. Пример, ссылка на который находится в конце поста (тот, в котором 3 файла в архиве) у меня работает в IE 8, так же, как во всех остальных браузерах.

    Если можно, пришлите мне ссылки на страницу, где что-то не работает.

    Если все только на локалке, то файлы. Мыло — artfro[cобака]gmail.com

  28. Ghost_dead 30 Ноябрь 2010 в 15:04

    Лично я тестил по ссылке выше «Пример 3D-облака тэгов в работе.» ссылка: ermilov.net/alex/samples/wp-cumulus/

    и в IE 8 облако отображается просто горизонтальным блоком с ссылками... и никакого 3D там не было...

    я конечно сейчас попробую интегрировать на свой сайт и тогда ещё дополнительно отпишусь...

  29. Ghost_dead 30 Ноябрь 2010 в 15:49

    Да, на моем сайте тот же эффект в IE8

  30. Ghost_dead 30 Ноябрь 2010 в 20:18

    Прошу прошения)) Я забыл, что сижу в Win 7 x64 и в IE флеш анимация не работает))) Проверил в IE8 x32 всё отлично показывает! Кстати, в архиве из примера (3 файла) плохой файл tagcloud.swf ... он не реагировал на смену настроек цвета шрифта во всех браузерах. Заменил на тот, что из примера по ссылке: ermilov.net/alex/samples/wp-cumulus/ и только тогда скрипт среагировал на цвет шрифта)

    А так большое спасибо!

    Кстати, а в пред версиях IE (6,7) все также красиво отображается? или не поддерживается?

  31. A1ex 30 Ноябрь 2010 в 22:31

    >>> Ghost_dead

    Спасибо, в ближайшие дни проверю файлы в архиве и добавлю отсутствующий в последнем тестовом архиве файл expressinstall.swf

    Облако работает и в 6-м, и в 7-м IE.

  32. marsei 7 Декабрь 2010 в 16:03

    Alex как поставить на место фона вместо цвета изображение?

  33. Игорь 15 Декабрь 2010 в 9:46

    A1lex? у меня следующий вопрос... если я ставлю в списке тегов

    <a href="http://www.vt-gruppa.ru" rel="nofollow">ЛДСП</a> — то ссылка работает и вообще если ссылка ведет на сайт с видом httр://www.какой-то сайт.ru (.com .biz и т.д) то все работает.

    Как только я ставлю ссылку на отдельное окно размещенное на моем сайте, например:

    <a href="http://vt-gruppa.ru/catalog.php?id=31" rel="nofollow">ЮГРА</a>

    то во-первых не работает облако, а во вторых оно не просто не работает оно пропадает полностью (т.е. флеш остается но буквы неотображаются). Т.е. почему то работают теги только с первым доменным уровнем получается?

    Подскажете решение данной проблемы?

  34. Дина 16 Декабрь 2010 в 3:07

    Большое спасибо за статью, ваши разъяснения помогли мне использовать плагин в моей задаче. Отдельное спасибо за включение русских символов и иврита.

    Один маленький вопрос: при использовании тегов на иврите во флеше они отображаются слева направо, а не справа налево, как положено. С чем это может быть связано. (в исходном коде все отображается верно)

    Заранее большое спасибо!

  35. A1ex 17 Декабрь 2010 в 1:18

    >>> Дина

    Большое спасибо за вопрос! - Символы-то я добавил в swf-файл, но забыл про проблемы с ивритом во Flash))

    — Браузеры давно научились правильно «переворачивать» текст на иврите, а вот Flash просто не различает его и показывает в обратной последовательности. Сделал дополнительный файл JavaScript, который «переворачивает» тексты на иврите (на остальных языках все останется как есть, так что можно использовать на мультиязычных сайтах — т.е. в облаке могут быть теги на иврите, русском и английском одновременно).

    Выкладываю отдельный архив для версии с ивритом. архив (русский+иврит) — В архив добавлен еще один файл JavaScript. Изменен файл index.html — добавлена строка, подключающая дополнительный скрипт (строка 7 в исходном коде), и строка с запуском функции, «переворачивающей» тексты на иврите (строка 43).

    Вот пример из этого архива в работе

  36. A1ex 17 Декабрь 2010 в 2:20

    >>> Игорь

    Спасибо! — Ошибка исправлена, код в посте и файлы в архивах и примерах обновлены.

    Ошибка касалась неправильной обработки ссылок, в которых присутствовали переменные типа id=..., name=... Ваша ссылка: http:// vt-gruppa .ru/catalog.php?id=31 — именно такая.

  37. A1ex 17 Декабрь 2010 в 2:58

    >>> marsei

    «Alex как поставить на место фона вместо цвета изображение?» — Такая возможность не предусмотрена в WP-Cumulus. Я не менял сам плагин, а лишь адаптировал его.

  38. Игорь 17 Декабрь 2010 в 14:17

    Ссори за флуд, но я закачал из архива на FTP-сервер новые файлы swfobject.js и tagcloud.swf который скачал по вашей ссылке, но результат остался прежним. Работают только ссылки на первый доменный уровень.

    Можете расписать подробно как эту проблему победить.

    Заранее благодарен.

  39. dina 17 Декабрь 2010 в 16:56

    A1ex, большое спасибо вам за ответ и за дополнение. Действительно, теперь все отображается как надо, хотя мне уже удалось решить проблему с помощью php.

    Еще к вам вопрос: сейчас делаю расширение для cms joomla (по GPL), хотела бы включить ваш код. Но ни в одном вашем файле не нашла кредитов. Вы могли бы скинуть образец ваших кредов, чтобы я их вставила в шапку файлов?

  40. A1ex 17 Декабрь 2010 в 23:48

    >>> Игорь

    Эта ошибка была не в файлах .swf и .js, а в коде скрипта, который находится в файле index.html

    Конкретнее — строки с 6-й по 9-ю в третьем по счету блоке кода в этом посте. Или строки с 11-й по 14-ю в тестовом файле index.html из архива.

    Сейчас код в этих строках исправлен в файлах и в посте.

  41. A1ex 18 Декабрь 2010 в 0:24

    >>> Игорь

    Уп-с... Была еще одна ошибка — в IE облако не работало из-за rel="nofollow".

    Исправлено. Добавлена еще одна строка кода — в тот же блок — строка 10 в 3-м блоке кода поста, или строка 15 в файле index.html

    Пост и архивы еще раз обновлены.

  42. A1ex 18 Декабрь 2010 в 1:47

    >>> dina

    Насчет кредов: если сочтете это необходимым, то достаточно указать имя — Alex Ermilov и этот сайт — alex.ermilov.net в любой удобной форме.

    Я иногда указываю свои кредиты, но только в собственных проектах. А в данном случае это адаптация популярной «примочки», к разработке которой я не причастен.

  43. Игорь 20 Декабрь 2010 в 10:40

    Все разобрался...понял... ВСЕ РАБОТАЕТ... Огромное спасибо ! ;)

  44. Макаров 26 Декабрь 2010 в 0:54

    А я заметил какой-то косяк.

    Причём он уже есть когда запускаешь только скачанную флешку.

    Почему то при n ссылках рандомяться n-1

    то есть если их 5, будет выводится 4

  45. Макаров 26 Декабрь 2010 в 0:57

    Хм... всё решилось, когда отдельно скачал

    «Файл tagcloud.swf (версия плагина 1.23) с кириллическими и латинскими символами.»

    тот который в архиве ведёт себя косячно

  46. A1ex 26 Декабрь 2010 в 4:13

    >>> Макаров

    Спасибо. В архиве действительно лежал «неправильный» файл tagcloud.swf. Архив обновлен.

  47. alll 1 Февраль 2011 в 15:32

    Как у этого облака задать координаты? К примеру у меня страница 900px в левой части находиться меню и мне надо чтобы облако распологалось под этим меню?

  48. alll 1 Февраль 2011 в 15:45

    точнее у меня ширина страницы 80% не то написал

  49. A1ex 1 Февраль 2011 в 16:32

    >>> all

    Дело в том, что блок div id="tags" заменяется на «красивое» Flash-облако при помощи javascript. Само облако будет расположено в HTML-коде там, где расположен этот блок.

    Вместо этого div'a для браузера «появляется» object id="flash_cloud". Соответственно, если его нужно позиционировать, то надо прописать стиль для #flash_cloud.

    Но кардинально изменить расположение облака будет проблематично. (Это можно сделать только с помощью абсолютного позиционирования для #flash_cloud). Поэтому просто расположите блок с тегами там, где дожно быть облако.

    Тем более, что по статистике примерно у 10% пользователей отключен javascript. — Они видят «обычное» облако, без Flash.

  50. alll 2 Февраль 2011 в 7:14

    спасибо

  51. alll 2 Февраль 2011 в 7:41

    все получилось, облако мертво стоит там где ине надо

  52. Atnagulov.r 16 Февраль 2011 в 15:54

    Большое спасибо за столь замечательный скрипт! :)

  53. Влад 22 Март 2011 в 22:22

    Не могли бы вы сказать как изменить размеры облака. К примеру 300×300.

    Заранее спасибо.

  54. A1ex 23 Март 2011 в 3:06

    >>> Влад

    Размер облака передается в 3-м и 4-м параметрах (строка 32 второго блока кода)

    swfobject.embedSWF («tagcloud.swf?r=»+rnumber,"tags", «600», «420»,........ )

    600 — ширина, 420 — высота (это размеры блока, а не самого «шарообразного облака» — оно чуть меньше и имеет одинаковую ширину и высоту).

    Измените оба эти значения на «300». Ваш блок будет размером 300×300 пикселей.

  55. Alex 2 Апрель 2011 в 15:30

    А1ex, a что делать в том случае, когда мне требуется другой язык? Как его можно внедрить? Мне бы не помешал грузинский.

  56. A1ex 2 Апрель 2011 в 16:11

    >>> Alex

    Если не найдется уже локализованной версии на грузинском (или любом другом языке), то можно скачать исходник и добавить нужные символы, как описано (там же ссылка на исходник) — How to add more characters to WP-Cumulus

    Я также немного отредактировал ActionScript в своих версиях tagcloud.swf — убрал необходимость указывать полную ссылку (http://...), если Вы этого не сделаете, то указывайте полный URL в ссылках. В остальном — можно использовать эти скрипты, вместе с любым локализованным файлом tagcloud.swf

  57. Zell 11 Апрель 2011 в 16:08

    Спасибо за статью и за исходники ))

  58. Laslo 23 Апрель 2011 в 1:16

    и все таки как переместить облако в правый угол...

  59. A1ex 23 Апрель 2011 в 2:44

    >>> Laslo

    JavaScript заменяет в коде HTML блок div id="tags" вместе с содержимым на object id="flash_cloud" (id указывается в var attributes — 29-я строка блока с кодом javascript). Т.е. он окажется там же, где был блок div id="tags". Переместить его можно — с помощью CSS. Но это весьма проблематично в большинстве случаев. — Кардинально поменять позицию любого элемента на странице можно только при помощи позиционирования (например — position: absolute; right: 20px; top: 0; z-index: 1; }. Но это «выдернет» элемент из общего потока. Он как бы будет «висеть» в другом слое и остальные элементы будут вести себя так, как будто его нет — т.е. «залезать» под этот блок. Обратиться к объекту можно по его id — в CSS записать правила для #flash_cloud { ... } Точные стили я подсказать не смогу, так как не знаю, что у вас на странице. Но я практически уверен, что «нормально» перекинуть облако из левого сайдбара в правый, к примеру, в 90% случаев просто нереально. Это можно воплотить с помощью JavaScript — посчитав размеры страницы, положение элементов и учтя особенности разных браузеров — сами понимаете, что это достаточно сложно.

    Еще один способ — «вырезать», а потом «воткнуть» div id="tags", или флеш в нужное место при помощи того же JavaScript. Удобнее всего — при помощи jQuery.

    А правильнее — просто выводить div id="tags" там, где должен оказаться флеш. Функционально они не отличаются. Значит и находиться могут на одной и той же позиции.

  60. роман 27 Апрель 2011 в 19:22

    подскажите как установить ссылку в облаке тега , если в ссылке присутствуют кирилические буквы : 6626-038.рф/depozit/rub/rub.html

    при переходе сразу выдает ошибку

    6

  61. A1ex 28 Апрель 2011 в 2:40

    >>>роман

    К сожалению, автор плагина был не в курсе, что в ссылках может быть кириллица))

    Вам можно посоветовать использовать ссылки без указания доменного имени — /depozit/rub/rub.html — будет работать. Либо использовать «настоящий» адрес вашего домена — 6626-038.xn--p1ai/depozit/rub/rub.html

    Любые ссылки кодируются. Мы видим лишь «представление». «Настоящий» url содержит лишь допустимые символы — латинские буквы, цифры и некоторые знаки препинания.

  62. Андрей 20 Июнь 2011 в 7:05

    Добрый день.

    Можно ли как-то сделать, чтобы при наведении ссылка не выделялась в рамку, а например менялся ее фон?

    Или тут нужно редактировать флэш исходник?

  63. A1ex 20 Июнь 2011 в 8:40

    >>> Андрей

    Для этого придется редактировать исходник. В настройках такие опции не предусмотрены.

  64. Андрей 20 Июнь 2011 в 11:00

    >>> A1ex

    Вы можете выложить уже модифицированный свой исходник? Буду весьма благодарен.

  65. A1ex 20 Июнь 2011 в 11:25

    >>> Андрей

    Исходник затерялся где-то в рабочих архивах на одном из компьютеров. Вряд ли смогу найти.

    Можно скачать Development Version

    Кроме добавления символов, я убрал проверку наличия «http» в ссылках в своей версии. Если этого не сделать, то адреса ссылок нужно будет указывать полностью. В остальном различий нет.

    Как добавить языковые символы, написано у автора плагина: How to add more characters to WP-Cumulus

  66. Дмитрий 27 Июнь 2011 в 22:31

    Здравствуйте.

    Спасибо за скрипт. Но он, что то не работает в подкаталогах. C главной работает.

    (см. person-tm.ru)

  67. Станислав 25 Август 2011 в 23:19

    шикаааааарно! :) )))))

    большое спасибо за то, что так детализировали и разжевали все это. только здесь нашел как создать трехмерное 3d облако тегов с нормальными комментариями и пояснениями.

    были бы тут «плюсики», повышающие всякого рода рейтинги — все бы понажимал бы! :)

    тестировал все на хроме 13.0 — все работает.

    но есть несколько моментов:

    при указании цвета текста прямо в теге «a» в формате color="0xХХХХХХ" hicolor="0xХХХХХХ" все ок. цвета отрисовываются именно эти в не зависимости от того, что указано в функции myTags. Но если я убираю их из тега «а» и указываю в tcolor:"0xХХХХХХ" и hicolor:"0xХХХХХХ" — то так отрисовывается только первая ссылка, а все последующие идут в цвете, указанном в tcolor2:"0xХХХХХХ". Возможно, это только локальный баг, не проверял. У меня там еще просто цвет ссылок в цсс отдельно указывается, может из-за этого...

    И еще: фраза «цвет 2 цвета меняются от tcolor к tcolor2»... я так понимаю, они рандомно меняться должны?

    Это все не принципиально, поскольку я все-равно цвета ссылок буду явно указывать в блоке div... Просто заметил такой момент — вот и стало интересно. :)

    еще раз спасибо за полезную и интересную информацию :)

  68. Zorn 16 Апрель 2012 в 21:46

    Перепробовал все примеры, и с jQuery ().ready и с window.onload — ссылки вида ya.ru не открываются ну никак. Проверял и в IE и в Chrome... Не подскажите, куда копать?

  69. Zorn 16 Апрель 2012 в 22:17

    Разобрался, нужно после http: поставить два слеша наоборот \\

    Спасибо!

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

Вы можете использовать следующие тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Где взять аватар?

Вход | Регистрация

Первые комментарии незарегистрированных посетителей проходят модерацию.
Адрес сайта публикуется только после регистрации или проверки (для комментаторов).

|