Widgetkit. Галерея,карта google,слайдер,плейер – всё в одном.

1 звезда2 звезда3 звезда4 звезда5 звезда (5 голос, рейтинг: 5,00 из 5)
Loading ... 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.

компонент widgetkit

1) Accordion

Давайте начнем по порядку с Accordion и нажмём Create your first accordion.

accordeon

Создадим пару элементов, путем нажатия Add New Item. Потом сохранимся и получим следующее.

создаём accordeon

Через кнопку Add New можно создать много Аккордионов. Давайте обратим внимание на поле SHORTCODE. Это тот код, который в материале позволит нам отобразит созданный элемент Аккордион.

Давайте это и сделаем. Скопируем его и вставим в любой материал в Менеджере материалов.

вставка widgetkit в контент

На сайте это будет выглядеть так:

аккордеон на сайте

Получили довольно интересный эффект скрытия/развертывания блоков с информацией.

2) Gallery

Давайте попробуем создать галерею в нашем контенте. И нажмём вкладку Gallery – Create your first gallery.

gallery

Дадим название нашей галерее. И далее, справа во вкладке Folders выберем папку с изображениями (отображается список папок из директории /images на сервере). Далее нажмем Add Photo Gallery и слева увидим список фоток из данной папки. Я выбрал, как видите, папку /sampledata/fruitshop. Справа ещё есть список настроек Settings.

Там можно выбрать, например стиль отображения галереи Style, различные эффекты и многое другое. После сохранения галереи в поле SHORTCODE будет другой код, который мы опять скопируем в наш материал.

Я, например, на сайте получил такое:

галерея на сайте

3) Lightbox

Lightbox – это своего рода организация вывода картинок во всплывающем окне. И эта вкладка активирует данную возможность для картинок материла. Для этого надо, как написано, если нажать на  How to use.. необходимо оформить коды вывода изображения в виде:

<a href="image_big.jpg" data-lightbox="on"><img src="image_small.jpg" alt="" width="100" height="100" /></a>

Т.е. добавить атрибут  data-lightbox=’on’ к ссылке на большое изображение.

Если необходимо таким образом вывести категорию изображений, то код оформить надо следующим образом:

<a href="image1_big.jpg" data-lightbox="group:mygroup"><img src="image1_small.jpg" alt="" width="100" height="100" /></a>
<a href="image2_big.jpg" data-lightbox="group:mygroup"><img src="image2_small.jpg" alt="" width="100" height="100" /></a>

Можно задать также вывод изображения не с параметрами по умолчанию, а применить свои:

<a href="http://lawans.ru" data-lightbox="transitionIn:elastic;transitionOut:elastic;">Это lightbox</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 карту в контент. Нажмём вкладку MapCreate your first map.

карта Google

Далее всё довольно просто, нажав Set Location выберем мышкой нужные нам координаты, зададим заголовки для карты, можно выбрать стиль для маркера на карте (Marker) и нажмём Save.

Теперь в нашем контенте может появится карта от Google. Идеально подходит для контактов например.

Из настроек тут можно выбрать Map Type – виды отображения карты.

Type Controls – показать контролы (Спутник-Карта).

Center Marker – отображение маркера на карте. Вообщем тут просто всё.

5) Media Player

Из названия думаю поняли, что эта фишка позволяет вставлять проигрыватель аудио-видео файлов в контент.

media player

Тут всего пару настроек. Активация данного плагина и назначение селекторов для файлов. Как сказано в описании к плагину, код для видео например можно задать так:

<video width="320" height="240" src="video.mp4"><object width="320" height="240" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://lawans.ru/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" /><param name="flashvars" value="url=/wp-admin/video.mp4&amp;poster=/wp-admin/" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="true" /><embed width="320" height="240" type="application/x-shockwave-flash" src="http://lawans.ru/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" flashvars="url=/wp-admin/video.mp4&amp;poster=/wp-admin/" allowfullscreen="true" allowscriptaccess="true" /></object></video>

– где тег video это как раз селектор для видео файлов.

Также помимо формата видео .mp4 можно подключать форматы .webm, .ogv

Для аудио файлов формат соответственно:

<audio width="300" height="32" src="audio.mp3" type="audio/mp3"></audio>

Как сказано из описания, для остальных неподдерживаемых браузером форматов подгрузится флешь-плейер.

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

8) Spotlight

Чтобы долго не объяснять, что это такое, глядите примеры тут – yootheme.com/widgetkit/examples/spotlight
spotlight

Это очередная фишка для красивого показа фоток в контенте. Тут три настройки  – активация плагина, скорость и селектор для указания тех фоток, для которых мы его будем применять.

А код как мы видим в хэлпе такой:

<a href="mypage.html" data-spotlight="on"><img src="image.jpg" alt="" width="180" height="120" /></a>

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

effect:bottom; или (fade, top, right и left.)

9) Twitter

И наконец, ещё есть модуль твиттера, он не виден в панели Widgetkit, но его  можно увидеть в Менеджере модулей, он называется Widgetkit Twitter. Данный модуль позволяет взаимодействовать с сетью микроблогов Twitter.
модуль twitter

Позволяет, например, выводить сообщения конкретного пользователя (-лей, использовать пробел для разделения) – From User(s). При этом имеется фильтр для отбора твитов. Также фильтр “черного списка” (Non with Word). Выводимые сообщения кешируются и будут показываться даже, если твиттер не доступен. В Style можно выбрать 3 стиля вывода сообщений. И соответственно количество сообщений (Limit), показывать ли Картинку (Image) и установка её размера (Image Size), показывать ли автора (Author) и дату публикации (Publish Date)

Вот собственно и всё , что хотел показать и рассказать!
А пользовались ли вы Widgetkit или для вас это слово стало понятно только сейчас?
Жду комментариев и вопросов.


У ВАС ведь есть ТЕЛЕФОН? Или mp3-player? А может даже планшет, ноутбук или игровая консоль!
Хочется, чтобы он был необычным и уникальным?
Заходите к нам – мы поможем.

  
  
{lang: 'ru'}

Похожие статьи

103 thoughts on “Widgetkit. Галерея,карта google,слайдер,плейер – всё в одном.

  1. Установил.
    Хочу создать слайдшоу – кнопка Add New Item не работает.
    Пробывал отключить JCE – тот же результат.
    Что делать ?

  2. Не подскажите, в какой папке на сервера находяться все настройки Виджекит. Захожу в компоненты – там папка виджекит пустая, захожу модули – тоже папка виджекит пустая.

    • modules\mod_widgetkit\ не пустая
      в админке есть в компонентах. а зачем настройки в виде файлов нужны, в админке же есть

  3. У меня такая же проблема
    создаю новый Accordion, нажимаю Create your first accordion. вношу заголовок и текст, нажимаю Save. Нечего не сохраняется.
    Тоже самое происходит с картой и галереей. Ощущение что просто не записываются данные.
    Помогите, где искать причину.

  4. widgekit работает неправильно, вот посмотрите как должно быть:
    Image Wall Example
    _http://www.yootheme.com/widgetkit/examples/gallery_
    При наведении на фотографию она всплывает.

    А у меня сразу все фотки всплывают при наведении..
    _http://gk-photo.ru/raznoe.html_

    Можно чегонибудт сделать?

  5. Подскажите пожалуйста неграмотному, а куда вписывать эти коды?
    Виджет установил, а что делать дальше не знаю

    • внимательнее..В статье написано “Давайте обратим внимание на поле SHORTCODE”. Это тот код, который в материале позволит нам отобразит созданный элемент Аккордион.” Копируете код и вставляете в Менеджере статей в нужную статью.

  6. Помогите, добрый человек! Вроде же я всё правильно сделала:

    HTML код скопирован мною с сайта yatv.ru, где выложен мой ролик. Вставила я его в статью, созданную в Менеджере материалов. Но видео не отображается, отображается вся вот эта писанина. Widgekit у меня enabled, в selectore всё как у вас написано. Пыталась модуль создать под этот плеер – для media player нет такой опции. Что я делаю не так? Буду очень ждать ответа здесь или на burlesqueen@mail.ru

  7. Ребят, а кто знает как отключит всплывающий title при наведении на картинку в Widgetkit?.. в админке самого Widgetkit не нашел. А вид чесно говоря не очень, с этим всплывающим описанием..

    • можно попробовать силами JS удалить типа

      $(document).ready(function() {
      $(‘img’).removeAttr(“title”);
      });

      это общий случай, можно непосредственно для класса картинок удалить.

  8. Widgetkit- map
    Подскажите пожалуйста как сделать так чтоб на карте при нажатие на точку фото отображалось (движок joomla)?

  9. Приветствую не работает Widgetkit- map .. точнее сказать кнопка создания карты “Set location”
    Что может быть не так?

  10. Здравствуйте, возможно ли открыть нужные пункты widgetkit accordion по ссылкам с других страниц? Пытался поставить якорь в нужных пунктах, но переход по якорю не открывает пункт в котором он стоит.

  11. Добрый день.
    Подскажите такой момент
    Если указать в эффекте Lightbox ссылку на внешний урл, все работает как нужно, если любой внутренний урл, то ничего не происходит. Что это может быть?

Добавить комментарий для Сергей Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>