• 181
  • 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

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

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

Ваше мнение

какой форум лучше для вас
Результаты

Облако тегов

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