• 421
  • 0
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Всем привет. Продолжая тему облака тегов еще один вариант облака с использованием JS и canvas. Вариант легко ставится за место 3D флеш облака.
Итак приступим
1. Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. ,распаковываем.
2. Далее идем в папку ваш шаблон/plugins/tags/skins/3D/
в папку JS загружаем скрипты excanvas.js и tagcanvas.js
3. Открываем файл sidebar.tpl и заменяем содержание на вот этот код

Код:
<!--[if lt IE 9]><script type="text/javascript" src="{tpl_url}/plugins/tags/skins/js/excanvas.js"></script><![endif]-->
<script type="text/javascript" src="{tpl_url}/plugins/tags/skins/3d/js/tagcanvas.js"></script>
<script type="text/javascript">
window.onload = function() {
TagCanvas.textFont = 'Impact,"Arial Black",sans-serif';
TagCanvas.textColour = '#00f';
TagCanvas.outlineThickness = 5;
TagCanvas.outlineOffset = 1;
TagCanvas.outlineMethod = 'block';
TagCanvas.maxSpeed = 0.06;
TagCanvas.minBrightness = 0.1;
TagCanvas.depth = 0.95;
TagCanvas.pulsateTo = 0.2;
TagCanvas.pulsateTime = 0.75;
TagCanvas.decel = 0.9;
TagCanvas.reverse = true;
TagCanvas.hideTags = false;
TagCanvas.shadowBlur = 2;
TagCanvas.fadeIn = 800;
try {
TagCanvas.Start('myCanvas','weightTags', {textFont:null, textColour:null, weight: true});
} catch(e) {
// something went wrong, hide the canvas container
document.getElementById('myCanvasContainer').style.display = 'none';
}
};
</script>

<canvas width="300" height="300" id="myCanvas">
<p>Anything in here will be replaced on browsers that support the canvas element</p>
<ul id="weightTags">
{entries}
</ul>
</canvas>
4. Следующий файл для редактирования это params.ini также заменяем все содержимое на вот это
Код:
news.tag		= "<a href='{url}'>{tag}</a>"
news.tag.delimiter = ", "
sidebar.notags = "-теги не найдены-"
sidebar.tag = "<li><a href='{url}' {params} title='количество новостей: {posts}'>{tag}</a></li>"
sidebar.tag.delimiter = " "
cloud.notags = "-теги не найдены-"
cloud.tag = "<li><a href='{url}' {params} title='количество новостей: {posts}'>{tag}</a><sup><small> <font color='red'>{posts}</font></small></sup></li>"
cloud.tag.delimiter = "<br/> "

5. В настройках плагина надо включить использование ручная установка стилей для тегов, у меня это примерно так
Код:
0|5|tag-micro
6|10|tag-normal
11|15|tag-big
16|25|tag-sbig
26|40|tag-ssbig
41|70|tag-sssbig
71|200|tag-ssslbig
Ну и в файл стилей добавить
Код:
.tag-micro{font-size:10px ;color:#ff0080;font-weight:100}
.tag-normal{font-size:16px ;color:#00ff00;font-weight:200}
.tag-big{font-size:20px ;color:#481be4;font-weight:300}
.tag-sbig{font-size:30px ;color:#ffff00;font-weight:400}
.tag-ssbig{font-size:32px ;color:#blue;font-weight:500}
.tag-sssbig{font-size:33px ;color:#FF0080;font-weight:600}
.tag-ssslbig{font-size:34px ;color:#FC03E9;font-weight:700}
Ну это пример , все можно изменить,да и настроек скрипта очень много, можно посмотреть в источнике.

Можешь почитать и вот эту статейку "Фиксированный, плавающий блок "

mistakes

Это тоже интересно

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

Ваше мнение

TWIG -что это?
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element