Облако брендов для 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 - это цвет ссылки в обычном и наведенном сосотоянии.
Вот и все "волшебство". Буду благодарен за отзывы и пожертвования :| .