Хаки и Скрипты Next Generation CMS

Меняем флеш облако тегов на canvas облако

irbees2008 irbees2008 Опубликовано - 10 - июня Настройка плагинов
2970 - 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}
Ну это пример , все можно изменить,да и настроек скрипта очень много, можно посмотреть в источнике.

Можешь почитать и вот эту статейку "Вот пришлось сменить стиль чекбоксов."

Опрос

Ваше мнение

На каком движке ваш сайт?
Результаты

Последние комментарии

Теги

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

Статистика

  • Caйту: 4400 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 662
  • Онлайн всего: [5]
  • Гости: [5]
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 32
  • Генерация страницы: 1.287сек
  • Потребление памяти: 6.120 Mb 
  •   Яндекс.Метрика