3D облако тегов на базе TagCanvas https://lily-software.com Лента комментариев страницы Cotonti ru Sat, 11 Apr 2026 06:48:09 +0300 Комментарий пользователя Alex Спасибо. Ссылку поправил.

]]> вт, 17 мар 2015 00:19:28 +0300 Комментарий пользователя Roffun Хорошее решение, все в кучке, очень удобно и динамично.  И с плагином tagsglobal работает.

p.s. ссылка на excanvas изменилась  :   https://code.google.com/p/explorercanvas/source/browse/excanvas.js

]]> пн, 16 мар 2015 21:46:54 +0300 Комментируемая страница Подключаем 3D облако тегов используя плагин jQuery TagCanvas на примере Cotonti Siena.

Мы решили отказаться от плагина "3D облако тегов" на базе WP-Cumulus т.к. последний использует флеш, что накладывает некоторые ограничения. Использование флеш требует наличие flash плеера на машине пользователя. Кроме того флеш не поддерживается на Apple iPhone и iPad, а количество посетителей моего сайта использующих эти устройства довольно велико.

Для создания облака тегов будем использовать плагин jQuery TagCanvas.

Скачиваем TagCanvas. Качаем jQuery plugin version. Поскольку этот плагин использует элемент Canvas, который не поддерживается Internet Explorer версии 8 и ниже, скачиваем excanvas.js

В нужной теме открываем файл header.tpl и в конце раздела <head> подключаем скаченные файлы:

<!-- IF {PHP.env.location} == 'home' -->
    <!--[if lt IE 9]>
    <script type="text/javascript" src="https://lily-software.com/{PHP.cfg.mainurl}/{PHP.cfg.themes_dir}/{PHP.theme}/js/excanvas.js?1"></script>
    <![endif]-->
    <script src="https://lily-software.com/{PHP.cfg.mainurl}/{PHP.cfg.themes_dir}/{PHP.theme}/js/jquery.tagcanvas.min.js" type="text/javascript"></script>
<!-- ENDIF -->

В данном случае они будут загружены только для главной страницы.

Далее нам нужно не много подправить вывод тегов на главной странице. Открываем файл index.tpl.

В месте, куда нужно вывести теги, создадим для них контейнер:

<div id="3d_tagCloudContainer" style="font-size: 84%">
    <canvas width="260" height="260" id="3d_tagCloud"></canvas>
</div>

Само облако тегов спрячем:
 

<div id="tagCloud" style="display: none">
   {INDEX_TAG_CLOUD}
</div>

Инициализируем 3D облако.

В итоге получем примерно такой код:

<div id="3d_tagCloudContainer" style="font-size: 84%">
    <canvas width="260" height="260" id="3d_tagCloud"></canvas>
</div>
<div id="tagCloud" style="display: none">
    {INDEX_TAG_CLOUD}
</div>
<script type="text/javascript">
    if( !$('#3d_tagCloud').tagcanvas({
        outlineColour: '#999999',
        outlineThickness: '1',
        outlineOffset: 2,
        textFont: null,
        textColour: null,
        weight: true
    },'tagCloud')) {
        // TagCanvas failed to load
        $('#3d_tagCloudContainer').hide();
        $('#tagCloud').css('display', 'block')
    }
</script>
{INDEX_TAG_CLOUD_ALL_LINK}

 

Все достаточно просто.

Образец работы можно понаблюдать на главной странице этого сайта.

]]> пт, 10 мая 2013 11:28:00 +0300