Хаки и Скрипты Next Generation CMS : Настройка плагинов, HTML5, html, JS : Меняем флеш облако тегов на canvas облако

irbees2008 Опубликовано - 10 - июня Настройка плагинов

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

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

Код:

01<!--[if lt IE 9]><script type="text/javascript" src="{tpl_url}/plugins/tags/skins/js/excanvas.js"></script><![endif]-->
02<script type="text/javascript" src="{tpl_url}/plugins/tags/skins/3d/js/tagcanvas.js"></script>
03<script type="text/javascript">
04 window.onload = function() {
05 TagCanvas.textFont = 'Impact,"Arial Black",sans-serif';
06 TagCanvas.textColour = '#00f';
07 TagCanvas.outlineThickness = 5;
08 TagCanvas.outlineOffset = 1;
09 TagCanvas.outlineMethod = 'block';
10 TagCanvas.maxSpeed = 0.06;
11 TagCanvas.minBrightness = 0.1;
12 TagCanvas.depth = 0.95;
13 TagCanvas.pulsateTo = 0.2;
14 TagCanvas.pulsateTime = 0.75;
15 TagCanvas.decel = 0.9;
16 TagCanvas.reverse = true;
17 TagCanvas.hideTags = false;
18 TagCanvas.shadowBlur = 2;
19 TagCanvas.fadeIn = 800;
20 try {
21  TagCanvas.Start('myCanvas','weightTags', {textFont:null, textColour:null, weight: true});
22 } catch(e) {
23      // something went wrong, hide the canvas container
24      document.getElementById('myCanvasContainer').style.display = 'none';
25    }
26  };
27 </script>
28 
29<canvas width="300" height="300" id="myCanvas">
30  <p>Anything in here will be replaced on browsers that support the canvas element</p>
31  <ul id="weightTags">
32   {entries}
33  </ul>
34 </canvas>

4. Следующий файл для редактирования это params.ini также заменяем все содержимое на вот это

Код:

1news.tag  = "<a href='{url}'>{tag}</a>"
2news.tag.delimiter = ", "
3sidebar.notags  = "-теги не найдены-"
4sidebar.tag  = "<li><a href='{url}' {params} title='количество новостей: {posts}'>{tag}</a></li>"
5sidebar.tag.delimiter = " "
6cloud.notags  = "-теги не найдены-"
7cloud.tag  = "<li><a href='{url}' {params} title='количество новостей: {posts}'>{tag}</a><sup><small> <font color='red'>{posts}</font></small></sup></li>"
8cloud.tag.delimiter = "<br/> "

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

Код:

5|tag-micro
10|tag-normal
15|tag-big
25|tag-sbig
40|tag-ssbig
70|tag-sssbig
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}

Ну это пример , все можно изменить,да и настроек скрипта очень много, можно посмотреть в источнике.

Можешь почитать и вот эту статейку "Калькулятор калорий"

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

06.02.14Красивые лоадеры использующие HTML5 canvas.
08.05.13Флеш облако из картинок
09.05.13флеш облако из фотографий
21.02.14Теги <mark>
15.03.17Кнопка вернуться назад на js

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