Вы находитесь на устаревшей версии сайта romka.eu. Она оставлена здесь на случай если я захочу поностальгировать по тому как выглядел интернет в 2012 году :) Так этот сайт выглядел с июня 2012 по февраль 2023. Эта версия сайта не обновляется, комментирование материалов отключено. Обновленная версия сайта доступна по адресу http://romka.eu.

Tagnetic. Документация

Инструкция по установке и настройке плагина Tagnetic

Tagnetic — плагин для библиотеки jQuery, который переделывает стандартное облако тэгов в холодильник с налепленными на него магнитами-тэгами. Скрипт полностью работает на стороне клиента и в случае если в браузере отключена поддержка Java-script, то пользователю будет показано стандартное облако тэгов. Демонстрацию работы скрипта можно увидеть здесь, здесь и здесь.

Для работы необходимо скачать плагин Tagnetic и библиотеку jQuery (она уже есть в архиве с плагином), скопировать их на сервер и подключить в html-коде страницы:

  1. <script src="jquery.js" type="text/javascript" charset="utf-8"></script>
  2. <script src="jquery.tagnetic.packed.js" type="text/javascript" charset="utf-8"></script>
  3. <script src="jquery.tagnetic.settings.js" type="text/javascript" charset="utf-8"></script>

После этих действий в файле jquery.tagnetic.settings.js нужно сделать несколько важных настроек, от которых зависит внешний вид холодильника.

В первую очередь необходимо указать плагину где и в каком виде в html-коде расположено облако тэгов. Обычно облако тэгов представляет из себя код вроде:

  1. // вариант 1
  2. <ul class="tags_cloud">
  3.  <li class="tag level3"><a href="#">tag 1</a></li>
  4.  <li class="tag level2"><a href="#">tag 2</a></li>
  5.  <li class="tag level1"><a href="#">tag 3</a></li>
  6. </ul>

или

  1. // вариант 2
  2. <div id="tags_cloud">
  3.  <div class="tag level3"><a href="#">tag 1</a></div>
  4.  <div class="tag level2"><a href="#">tag 2</a></div>
  5.  <div class="tag level1"><a href="#">tag 3</a></div>
  6. </div>

или

  1. // вариант 3
  2. <div class="tags_cloud">
  3.  <a href="#" class="level 3">tag 1</a>
  4.  <a href="#" class="level 2">tag 2</a>
  5.  <a href="#" class="level 1">tag 3</a>
  6. </div>

Во всех трех вариантах есть "контейнеры для облака тэгов", в первом случае — это тэг ul, во втором и третьем — тэги div. В первом и втором вариантах также есть "контейнеры для тэгов", в первом случае — это тэги <li></li>, во втором — <div></div>. В третьем варианте контейнера для тэгов нет.

Информацию о контейнерах необходимо разместить в настройках плагина (файл jquery.tagnetic.settings.js) в переменных container (контейнер для облака тэгов) и tag (контейнер для тэгов). Для первого примера контейнером является тэг ul с классом tags_cloud, для второго — тэг div с id tags_cloud, по этому в первом примере переменная container будет иметь вид "ul.tags_cloud", во втором — "div#tags_cloud".

Переменная tag для первого примера будет иметь вид "li", для второго — "div", для третьего — "none" (так как контейнеров для тэгов в этом варианте нет).

Код, который необходимо разместить в файле jquery.tagnetic.settings.js для первого варианта:

  1. $(document).ready(function() {  
  2.   $.tagnetic({container: "ul.tags_cloud", tag: "li"});  
  3. });

Думаю, нетрудно понять, как будет выглядеть этот же код для второго и третьего вариантов.

На данный момент скрипт знает где искать тэги и теперь ему нужно объяснить как эти тэги необходимо отобразить. Плагин поддерживает систему скинов, благодаря которой любой желающий может до неузнаваемости изменить его вид. Сейчас вместе с Тагнетиком поставляется 3 скина, расчитанных под разную ширину холодильника. За отображение холодильника отвечают 3 переменные: div_width — ширина слоя, skin — используемый скин и path_to_skins — путь к папке со скинами относительно корня сайта.

Если плагин и папка со скинами расположена в корне сайта и мы хтим использовать шестисотпиксельный скин, то указанные выше переменные будут иметь значения: div_width: 600, path_to_skins: "", skin: 'refrigerator-600' и код в файле jquery.tagnetic.settings.js примет вид:

  1. $(document).ready(function() {  
  2.   $.tagnetic({container: "ul.tags_cloud", tag: "li", div_width: 600, path_to_skins: "", skin: 'refrigerator-600'});  
  3. });

Это все настройки, которые необходимо выполнить, для того чтобы включить холодильник тэгов с одним из стандартных скинов. В архиве с плагином находятся файлы index.html и index-400.html, которые демонстрируют его работу и настройки.

Дополнительные настройки

  • Для того чтобы интегрировать скрипт с модулем Tagadelic для Drupal 6 необходимо в папке с используемой темой, в файле template.php (если его нет, то его нужно создать) добавить функцию:
    1. function phptemplate_preprocess(&$variables) {
    2.   if(arg(0) == "tagadelic") {
    3.     $path = ""; // путь к папке с плагином
    4.     drupal_add_js($path . "jquery.tagnetic.js");
    5.     drupal_add_js($path . "jquery.onImagesLoad.js");
    6.     drupal_add_js($path . "jquery.tagnetic.settings.js");
    7.     drupal_add_css($path . "tags.css", "theme"); 
    8.   }
    9. }

    Настройки для jquery.tagnetic.settings.js:

    1. $(document).ready(function() {  
    2.   $.tagnetic({div_width: 850, skin: "refrigerator-850", handle: "handle.jpg", handle_width: 280, handle_line: 15, container: "div.tagadelic", tag: "none", path_to_skins: "/sites/all/themes/deco/"});  
    3. });

    Теперь на странице example.com/tagadelic вместо стандартного облака тэгов будет показан холодильник.

  • Для того чтобы отобразить ручку холодильника необходимо заполнить еще три переменные: handle — путь к картинке-ручке (по умолчанию 'none'), handle_width — ширина ручки в пикселях, handle_line — номер линии, в которой ручка будет выведена.
  • Для того чтобы добавить свой вариант прямоугольного магнита, необходимо его нарисовать и нарезать по такой схеме:
    magn.jpg
    Далее каждый кусок сохранить под именем:
    • левый верхний угол — square-l-t-N.png
    • средняя верхняя граница — square-m-t-N.png
    • правый верхний угол — square-r-t-N.png
    • левая средняя граница — square-l-m-N.png
    • центральная ячейка — square-m-m-N.png
    • правая средняя граница — square-r-m-N.png
    • левый нижний угол — square-l-b-N.png
    • средняя нижняя граница — square-m-b-N.png
    • правый нижний угол — square-r-b-N.png

    Здесь l — лево, m — середина, r — право, t — верх, b — низ. Вместо N нужно подставить порядковый номер магнита. Все картинки необходимо сохранить в папке "skins/имя_скина/squares", после этого в настройках скрипта нужно будет в переменной squares указать новое количество магнитов. Примоугольные магниты тянутся до любой ширины и высоты.

  • Для того чтобы создать новый овальный магнит, его необходимо нарисовать и сохранить в папке "skins/имя_скина/ellipses" под именем "ellipse-N.png". Овальные магниты не масштабируются, для них обязательно нужно указать размеры, а также максимальные размеры текста, который в этом магните уместится. Для этого необходимо в настройках дополнить переменные: ellipse_width: "70,50", ellipse_height: "29,21", ellipse_text_width: "60,35", ellipse_text_height: "19,18". Эти переменные означают, что первый овальный магнит имеет размеры 70 на 29 пикселей и в него уместится текст размерами до 60 на 19 пикселей. Чтобы добавить информацию о третьем магните необходимо дополнить переменные следующим образом: ellipse_width: "70,50,А", ellipse_height: "29,21,Б", ellipse_text_width: "60,35,В", ellipse_text_height: "19,18,Г".
  • Для того чтобы заменить фон холодильника, необходимо в папку с нужным скином положить файлы с именами background-top.jpg, background-middle.jpg и background-bottom.jpg. Как они должны выглядеть лучше посмотреть в одном из скинов, которые идут вместе с плагином.

Статьи: