3230
- 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>Код:
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}Можешь почитать и вот эту статейку "Спец символы Hmlt"
Это тоже интересно
08.05.13Флеш облако из картинок
09.05.13флеш облако из фотографий
21.02.14Теги <mark>
15.03.17Кнопка вернуться назад на js
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.