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

Пятница, 10 мая 2013 10:37

Подключаем 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}

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

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

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

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

Теги:

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

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