Облако брендов для SimplaCMS 2.1+: часть 2

Для начала скачаем файлы и распакуем их в корень нашего сайта на ФТП. Архив содержит всего 2 файла:

• файл design/[ваш_шаблон]/js/swfobject.js - частоиспользуемая библиотека связки яваскрипта и флеша
• файл design/[ваш_шаблон]/js/tagcloud.swf - непосредственно само "облако"

Теперь подключим эти файлы к нашему шаблону. Естественно предполагается, что Вы выполнили все, что было сказано в предыдущей инструкции и у брендов уже есть "развесовка". Найдем в файле шаблона design/[ваш_шаблон]/html/index.tpl вставленную нами ранее конструкцию

{get_brands_cloud var=all_brands}
{if $all_brands}
<div id="all_brands">
    <h2>Все бренды:</h2>
    {foreach $all_brands as $b}	
        <a href="brands/{$b->url}" style="font-size: {math equation="round(12 + 3 * x)" x=$b->weigth}px">{$b->name}</a>
    {/foreach}
</div>
{/if}

и заменим его на вызов флешевого облака

{get_brands_cloud var=all_brands}
{if $all_brands}
<h2>Все бренды:</h2>
<script src="design/{$settings->theme}/js/swfobject.js"></script>
<div id="all_brands">
{foreach $all_brands as $b}
    <a href="brands/{$b->url}" style="font-size: {math equation="round(12 + 3 * x)" x=$b->weigth}px">{$b->name}</a> 
{/foreach}
</div>

<script type="text/javascript">
    var so = new SWFObject("design/{$settings->theme}/js/tagcloud.swf", "tagcloud", "240", "240", "10", "#ffffff");
    // uncomment next line to enable transparency
    so.addParam("wmode", "transparent");
    so.addVariable("tcolor", "0x3258B8");
    so.addVariable("mode", "tags");
    so.addVariable("distr", "true");
    so.addVariable("tspeed", "100");
    so.addVariable("tagcloud", "<tags>{foreach $all_brands as $b}   <a href='brands/{$b->url}' style='{math equation="round(12 + 3 * x)" x=$b->weigth}'  color='0x3258B8'  hicolor='0xF2B512'  >{$b->name}</a>{/foreach}</tags>");
    so.write("all_brands");
</script>
{/if}

Теперь, если у пользователя не стоит флеш или заблокирован яваскрипт - ему будет выводиться наша старая конструкция. Более продвинутым будет показываться облако как на картинке ниже.

Я специально оставил ниже старый вывол, чтобы было видно как было и как стало :) .

Чтобы не заканчивать так быстро наш инструктаж, расскажу о некоторых настройках Cumulus tag cloud.

var so = new SWFObject("design/{$settings->theme}/js/tagcloud.swf", "tagcloud", "240", "240", "10", "#ffffff");

Здесь первая цифра 240 - ширина флешки с облаком, вторая - высота в пикселях. В стандартном шаблоне в боковой колонке особо не разбежишься по ширине - поэтому и сделал квадратик 240x240. #ffffff - цвет фона нашей флешки. Однако следуюзей далее строкой мы убираем фон из флеша и делаем его прозрачным

so.addParam("wmode", "transparent");

В конструкции

<a href='brands/{$b->url}' style='{math equation="round(12 + 3 * x)" x=$b->weigth}'  color='0x3258B8'  hicolor='0xF2B512'  >{$b->name}</a>

в параметре style (именно он отвечает за размер названия бренда) Вы можете поменять алгоритм установки веса. color и hicolor - это цвет ссылки в обычном и наведенном сосотоянии.

Вот и все "волшебство". Буду благодарен за отзывы и пожертвования :| .

Удачной работы!