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. Да, действительно – установила JCE и редактирование появилось. НО – слайдшоу так и не выводится, т.е. оно есть в коде страницы, а в браузере нет (смотрела в нескольких). :( Вывожу шорткодом. В поле content вставлена картинка с выравниванием вправо и текст. Уже не знаю, что и делать..

  2. Подскажите, плиз.
    Галерею в компоненте создал. Но как она будет отображаться на той странице где мне нужно?
    Не могу понять ((

    • прочитайте внмательно п.1) Acoordion там где про поле SHORTCODE, в котором выводится код, который необходимо вставить в материал ( в Менеджере материалов) там где вам нужно

    • ну там в примере код написан в самом widgetkit, который первый (сокращенный) выведет лупу с плюсиком, который подлиннее выведет выезжающий текст – параметры fade, bottom, top, right и left.
      Эти значения подставляем здесь – effect:bottom (или fade, top, right или left)

  3. Здравствуйте!
    Такой вопрос: пытаюсь сделать ссылку с выплывающей в лайтбоксе картой гугл.
    задаю ссылку такого вида: текст ссылки , где #wk-55 это соответственно сделанная в виджетките карта.
    На одном сайте работает без проблем, на втором всплывает лайтбокс с серым фоном и все, фрейм так же не отображается. В принципе из всего лайтбокса только видяхи ютубы и вимео и работают, остальное нет(
    С чем может быть связано?
    джумла 2.5.4. виджеткит 1.0.4.
    а тот сайт, где работатет, джумла 2.5.1, виджеткит 1.0.2.
    Переустановка компонента не помогает, грешил на плагин редактора, но там тоже все ок..
    Если не знаете в чем может быть дело, может посоветуете аналог лайтбокса, где можно контент отобразить?

  4. ссылка не отобразилась

    ? a data-lightbox=”width:600;height:400;” href=”#wk-55″ ? текст ссылки ? /a ?

    вместо ? , > и < соответственно

  5. bestnb точка ru – шаблон yootheme inspire, там все работает (внизу справа, если кликнуть на адрес в модуле ГДЕ МЫ), сайт только начал делать, открыл специально.
    ex точка japaner точка ru – сайт потом буду переносить на домен заказчика, и они очень хотят, чтоб карта также всплывала ((( шаблон yootheme streamline (в самом низу, в футере, самая последняя строчка “здесь очень хочется лайтбокс с картой (” )

    • на первом сайте просит пароль а на втором увидел что не пашет.
      можете в контакты скинуть доступы если хотите . будет время гляну.

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

  6. Георгий, точно такая же проблема с выводом виджеткита по #wk-id Удалось как то побороть? Поделитесь решением, уже голову сломал…

  7. Пока что нет. Там на мое счастье заказчик сам отказался от этой идеи. Но на новом проекте все равно придется заняться этой проблемой. Как найду решение, я здесь в комментах отпишусь.

  8. Здравствуйте!
    Подскажите в чем может быть проблема. Установил компонент Widgetkit на Joomla 1.5.26 – стал без проблем. Создал галерею – вроде тоже все без вопросов прошло. Получил SHORTCODE, вставил в материал и когда обновляю страницу, то в материале появляется пустое место (как бы под галерею), но самой галереи нет. А иногда выдает ошибки:
    Warning: imagecreatetruecolor() [function.imagecreatetruecolor]: Invalid image dimensions in Z:\home\sunhouse.com\www\administrator\components\com_widgetkit\helpers\image.php on line 291
    Warning: imagejpeg(): supplied argument is not a valid Image resource in Z:\home\sunhouse.com\www\administrator\components\com_widgetkit\helpers\image.php on line 176
    Заработала галерея только в двух стилях (wall и slider) и то с дефолтными параметрами. Как только меняю эффекты для них, то сразу все пропадает (остается только пустое место) или выдает ошибки (выше указаны).
    В чем может быть причина? Сайт на локалке.
    Заранее спасибо!

  9. Подскажите в чем может быть дело widgetkit не работает с шаблоном yootheme Joomla 2.5. Меняю шаблон все работает. Как подружить widgetkit с yootheme? Очень нужно

  10. Установил Widgetkit joomla 1.5.7 установился без ошибок,нажимаю Add Slideshow и там нет панели инструментов в content для редактирования текста

  11. испробовал вес кит – очень полезная штука , но есть два вопроса:
    1. всюду появляется символ “>” – слева от каждого таба или слайда, или чего бы то ни было. На сайте разработчиков такого нет… сталкивались?

    2. как можно в табах вывести не просто картинку или текст, а… слайдшоу? таким образом, что бы для каждого таба свое слайдшоу? пробовал все – в табы widgetkit вставлял слайдшоу сторонних разработчиков и наоборот – отображается не корреткно. только первый таб показывает, остальные нет. еще хуже если вместо табов использовать аккардион…. хелп, плиииз!

    • 1) не видел такого..может где тег html не закрыт вот и выскакивает.
      2) сам не пробовал но думаю тяжеловато будет..у widgetkit там своих js скриптов немерено подключено, а если ещё прикручивать от др. разработчиков то каша будет. Если конечно отлично шарить в js скриптах и верстке возможно и удастся совмещать

  12. Можно поподробней о настройке SlideShow – где устанавливается папка с картинками. Или здесь другой способ?

    • в SlideShow папка не устанавливается вы просто сами добавляете через Add New Item новое значение и в визуальном редакторе (где поле Content) вставляете материал , в вашем случае это будет просто картинка и в каждом вот таком Item добавляете по одной картинке. Или юзайте Gallery если нужна галлерея.

      • Спасибо за оперативный ответ!
        Не совсем удобно – нет кнопки для вставки картинки, что и вводит в заблуждение…

  13. 1) gallery в админке нормальное отображение фот, на сайте, на месте фот, ошибка об отсутствии /function.imagecreatetruecolor, которого не существует. подскажите решение плиз

    2) а как аудио или видео активить ?
    P.S. я нуб и толком разобраться не можу (((

  14. Здравствуйте, подскажите пож. Сделал галерею с отображением фотографий в виде миниатюр, которые выглядели как фотографии от полароида, а при нажатии увеличивались. После этого стер и забыл. Впоследствии, понадобилось сделать такую галерею на сайте – напроч забыл как это делал и не могу найти. Вообще не могу найти, как сделать, чтобы на сайте фотографии отображались в виде миниатюр в несколько рядов, а при нажатии увеличивались.

  15. Столкнулся с непонятной проблемой: пользуюсь Widgetkit давно, в принципе особых глюков замечено не было – но вот столкнулся: я использую слайдшоу для сравнения продукции. Т.е. создал пустое слайдшоу, в нем несколько элементов, в каждом из которых подробное описание продукции (html код) где разница лишь в цифрах (размер, материал и т.п.). Все работало хорошо, пока не создал 9-й по счету элемент. Внес в него необходимый код (размер, материал и т.п.) но после нажатия кнопки “сохранить” – у меня удалились ВСЕ элементы этого слайдшоу. Восстановил из бэкапа. Снова ввожу – сохраняю – удаляется! Пробовал разные методы – оказалось не нравиться ДЛИНА кода! Предыдущие 8 элементов слайдшоу – такие-же – и все нормально. А те что свыше (пробовал) – если текст длиннее нескольких строк – после сохранения – удаляет всё что было в слайдшоу…… Никто не сталкивался?

  16. Подскажите по галерее. Как добавить к каждому фото описание?
    Задача следующая – галерея, в которой к каждому фото есть заголовок и описание, сами фото с эффектом лайтбокса. Наподобие этого http://xn--80addfr4ahr.com.ua/%D1%81%D0%BE%D1%80%D1%82%D0%B0_%D0%B2%D0%B8%D0%BD%D0%BE%D0%B3%D1%80%D0%B0%D0%B4%D0%B0/%D0%BE%D1%87%D0%B5%D0%BD%D1%8C-%D1%80%D0%B0%D0%BD%D0%BD%D0%B8%D0%B5

Добавить комментарий

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

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