Loading ...Хотите оперативно получать новые уроки и статьи блога LAWANS.RU. Просто введите ВАШ e-mail на форме справа >>>
Привет Всем!
Сегодня хочу поведать вам о таком довольно интересном компоненте для Joomla, как Widgetkit. Это компонент, который сочетает в себе сразу несколько нужных при создании сайтов расширений:
• Accordion (аккордеоны),
• Gallery(галереи), Lightbox,
• Map (карта Google),
• Mediaplayer (плейер видео и аудио),
• Slideset,
• Slideshow (слайд-шоу),
• Spotlight,
• Twitter и другие.
Как видите он может многое, а главное – всё в одном компоненте. Его создала команда разработчиков клубных шаблонов Yootheme и спользует в своих шаблонах.
У компонента есть бесплатная версия, её можно скачать здесь – yootheme.com/widgetkit. В ней, в отличие от платной версии, нет некоторых расширений. Однако найти полную версию в сети как всегда не проблема.
Я буду рассматривать полную версию для показа всех возможностей. А вообще, все эффекты можете посмотреть на сайте разработчика компонента – yootheme.com/widgetkit/examples
После скачивания и установки компонента, во вкладке Компоненты, мы увидим Widgetkit.
1) Accordion
Давайте начнем по порядку с Accordion и нажмём Create your first accordion.
Создадим пару элементов, путем нажатия Add New Item. Потом сохранимся и получим следующее.
Через кнопку Add New можно создать много Аккордионов. Давайте обратим внимание на поле SHORTCODE. Это тот код, который в материале позволит нам отобразит созданный элемент Аккордион.
Давайте это и сделаем. Скопируем его и вставим в любой материал в Менеджере материалов.
На сайте это будет выглядеть так:
Получили довольно интересный эффект скрытия/развертывания блоков с информацией.
2) Gallery
Давайте попробуем создать галерею в нашем контенте. И нажмём вкладку Gallery – Create your first gallery.
Дадим название нашей галерее. И далее, справа во вкладке Folders выберем папку с изображениями (отображается список папок из директории /images на сервере). Далее нажмем Add Photo Gallery и слева увидим список фоток из данной папки. Я выбрал, как видите, папку /sampledata/fruitshop. Справа ещё есть список настроек Settings.
Там можно выбрать, например стиль отображения галереи Style, различные эффекты и многое другое. После сохранения галереи в поле SHORTCODE будет другой код, который мы опять скопируем в наш материал.
Я, например, на сайте получил такое:
3) Lightbox
Lightbox – это своего рода организация вывода картинок во всплывающем окне. И эта вкладка активирует данную возможность для картинок материла. Для этого надо, как написано, если нажать на How to use.. необходимо оформить коды вывода изображения в виде:
Т.е. добавить атрибут data-lightbox=’on’ к ссылке на большое изображение.
Если необходимо таким образом вывести категорию изображений, то код оформить надо следующим образом:
<a href="image2_big.jpg" data-lightbox="group:mygroup"><img src="image2_small.jpg" alt="" width="100" height="100" /></a>
Можно задать также вывод изображения не с параметрами по умолчанию, а применить свои:
Список всех параметров такой:
| Название параметра | Описание параметра | Возможные значения |
| titlePosition | Позиция вывода заголовка | float, outside, inside или over |
| transitionIn | Тип открытия при переходе | fade, elastic или none |
| transitionOut | Тип закрытия при переходе | fade, elastic или none |
| overlayShow | Установить или нет наложение | true или false |
| width | Ширина | Значение в px |
| height | Высота | Значение в px |
| padding | Сдвиг | Значение в px |
4) Map
Инструмент, позволяющий вставлять Google карту в контент. Нажмём вкладку Map – Create your first map.
Далее всё довольно просто, нажав Set Location выберем мышкой нужные нам координаты, зададим заголовки для карты, можно выбрать стиль для маркера на карте (Marker) и нажмём Save.
Теперь в нашем контенте может появится карта от Google. Идеально подходит для контактов например.
Из настроек тут можно выбрать Map Type – виды отображения карты.
Type Controls – показать контролы (Спутник-Карта).
Center Marker – отображение маркера на карте. Вообщем тут просто всё.
5) Media Player
Из названия думаю поняли, что эта фишка позволяет вставлять проигрыватель аудио-видео файлов в контент.
Тут всего пару настроек. Активация данного плагина и назначение селекторов для файлов. Как сказано в описании к плагину, код для видео например можно задать так:
– где тег video это как раз селектор для видео файлов.
Также помимо формата видео .mp4 можно подключать форматы .webm, .ogv
Для аудио файлов формат соответственно:
Как сказано из описания, для остальных неподдерживаемых браузером форматов подгрузится флешь-плейер.
6) Slidset
Эта красивая фишка позволяет листать контент несколькими интересными способами – пример yootheme.com/widgetkit/examples/slideset
Тут всё по аналогии в предыдущими. Нажимаем Аdd New. Заполняем поля с названиями и титлами. Из основных настроек:
Effect – вид эффекта листания (примеры я казал выше)
Autoplay – автоматический запуск листалки (да/нет)
Items Per Set – количество элементов в блоке прокрутки
Ниже идёт настройка отображения показа кнопок, титлов, прокрутки.
Попробуйте создать что-нибудь сами. Тут всё понятно.
7) Slideshow
Как видно из названия это слайдшоу. Жмём Create your first slideshow. Вбиваем данные. Выбираем Style (стиль вывода), сортировку (Order), размеры, с какого элемента начинать Start Index и эффекты (Effect). Сохраняем и наслаждаемся красивым слайдшоу.
Примеры здесь – yootheme.com/widgetkit/examples/slideshow
Spotlight
Чтобы долго не объяснять, что это такое, глядите примеры тут – yootheme.com/widgetkit/examples/spotlight
Это очередная фишка для красивого показа фоток в контенте. Тут три настройки – активация плагина, скорость и селектор для указания тех фоток, для которых мы его будем применять.
А код как мы видим в хэлпе такой:
- тут как раз видим применение селектора после тега а. Также есть пример кода для вывода эффекта с настройками вывода всплывающего блока. Он может принимать значения :
effect:bottom; или (fade, top, right и left.)
9) Twitter
И наконец, ещё есть модуль твиттера, он не виден в панели Widgetkit, но его можно увидеть в Менеджере модулей, он называется Widgetkit Twitter. Данный модуль позволяет взаимодействовать с сетью микроблогов Twitter.
Позволяет, например, выводить сообщения конкретного пользователя (-лей, использовать пробел для разделения) – From User(s). При этом имеется фильтр для отбора твитов. Также фильтр “черного списка” (Non with Word). Выводимые сообщения кешируются и будут показываться даже, если твиттер не доступен. В Style можно выбрать 3 стиля вывода сообщений. И соответственно количество сообщений (Limit), показывать ли Картинку (Image) и установка её размера (Image Size), показывать ли автора (Author) и дату публикации (Publish Date)
Вот собственно и всё , что хотел показать и рассказать!
А пользовались ли вы Widgetkit или для вас это слово стало понятно только сейчас?
Жду комментариев и вопросов.
У ВАС ведь есть ТЕЛЕФОН? Или mp3-player? А может даже планшет, ноутбук или игровая консоль!
Хочется, чтобы он был необычным и уникальным?
Установил.
Хочу создать слайдшоу – кнопка Add New Item не работает.
Пробывал отключить JCE – тот же результат.
Что делать ?
Не открывает окно или в новом окне не работает что-то?
Окно не открывает. Просто при нажатии на кнопку ничего не происходит.
То есть я создаю слайдшоу нажимая Add new.
А потом, в нем кнопка Add New Item не работает.
Все работает о чем Вы.
Не подскажите, в какой папке на сервера находяться все настройки Виджекит. Захожу в компоненты – там папка виджекит пустая, захожу модули – тоже папка виджекит пустая.
modules\mod_widgetkit\ не пустая
в админке есть в компонентах. а зачем настройки в виде файлов нужны, в админке же есть
У меня такая же проблема
создаю новый Accordion, нажимаю Create your first accordion. вношу заголовок и текст, нажимаю Save. Нечего не сохраняется.
Тоже самое происходит с картой и галереей. Ощущение что просто не записываются данные.
Помогите, где искать причину.
Такая же история только со слайд шоу( нажимаю сохранить и усее(
А как сделать “Polaroid Example” что на странице
Оочень красиво!
А как сделать сортировку в обратном порядке?
widgekit работает неправильно, вот посмотрите как должно быть:
Image Wall Example
_http://www.yootheme.com/widgetkit/examples/gallery_
При наведении на фотографию она всплывает.
А у меня сразу все фотки всплывают при наведении..
_http://gk-photo.ru/raznoe.html_
Можно чегонибудт сделать?
Подскажите пожалуйста неграмотному, а куда вписывать эти коды?
Виджет установил, а что делать дальше не знаю
внимательнее..В статье написано “Давайте обратим внимание на поле SHORTCODE”. Это тот код, который в материале позволит нам отобразит созданный элемент Аккордион.” Копируете код и вставляете в Менеджере статей в нужную статью.
Помогите, добрый человек! Вроде же я всё правильно сделала:
HTML код скопирован мною с сайта yatv.ru, где выложен мой ролик. Вставила я его в статью, созданную в Менеджере материалов. Но видео не отображается, отображается вся вот эта писанина. Widgekit у меня enabled, в selectore всё как у вас написано. Пыталась модуль создать под этот плеер – для media player нет такой опции. Что я делаю не так? Буду очень ждать ответа здесь или на
если вам просто одно видео вставить может лучше использовать что то типа плагина рассмотренного здесь –
Ребят, а кто знает как отключит всплывающий title при наведении на картинку в Widgetkit?.. в админке самого Widgetkit не нашел. А вид чесно говоря не очень, с этим всплывающим описанием..
можно попробовать силами JS удалить типа
$(document).ready(function() {
$(‘img’).removeAttr(“title”);
});
это общий случай, можно непосредственно для класса картинок удалить.
Widgetkit- map
Подскажите пожалуйста как сделать так чтоб на карте при нажатие на точку фото отображалось (движок joomla)?
Приветствую не работает Widgetkit- map .. точнее сказать кнопка создания карты “Set location”
Что может быть не так?
Здравствуйте, возможно ли открыть нужные пункты widgetkit accordion по ссылкам с других страниц? Пытался поставить якорь в нужных пунктах, но переход по якорю не открывает пункт в котором он стоит.
Добрый день.
Подскажите такой момент
Если указать в эффекте Lightbox ссылку на внешний урл, все работает как нужно, если любой внутренний урл, то ничего не происходит. Что это может быть?