3D облако тегов на базе TagCanvas

3D облако тегов на базе TagCanvas

Подключаем 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="{PHP.cfg.mainurl}/{PHP.cfg.themes_dir}/{PHP.theme}/js/excanvas.js?1"></script>
    <![endif]-->
    <script src="{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}

 

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

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

 
Автор: Alex
Опубликовано: Alex
Комментарии: (2)
Рейтинги:  
0

Теги:

3D Облако,   Cotonti

Комментарии:


2. Алексей

Спасибо. Ссылку поправил.

1. Роман

Хорошее решение, все в кучке, очень удобно и динамично.  И с плагином tagsglobal работает.

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

Оставить комментарий:

* Просьба все технические вопросы, которые могут потребовать обсуждения, задавать на форуме.
** все некорректные и рекламные посты будут удаляться, ненормативная лексика и оскорбительные высказывания запрещаются.


Кликните для обновления

* Для редактирования комментария осталось 15 минут