Меню Рубрики

Установка лайтбокс на joomla

Lightbox в Joomla

В данной статье речь пойдет о технике lightbox с использованием модальных окон в Joomla.

Думаю, вы не раз видели эффектно всплывающее окно с картинкой после клика по маленькой картинке-превьюшке. Эти всплывающие окна на затемненном фоне, заполняющие часть экрана, и являются модальными окнами. В Интернете модальные окна служат для показа картинок или веб-контента в деталях.

Техника, используемая для отображения различного веб-контента с помощью модальных окон, получила названия lightbox. Это название произошло от первого JavaScript плагина написанного Lokesh Dhakar. В апреле 2012 плагин был переписан для JQuery.

Как вы могли заметить, в административном разделе Joomla в категории медиафайлов изображения открываются в лайтбоксе. Значит в Joomla техника lightbox есть. Как же реализовать такой же эффект на сайте? Вы, конечно, для этих целей можете воспользоваться плагинами сторонних разработчиков (ImageSizer, JoomSlide и др.), однако, для решений простых задач можно воспользоваться и лайтбоксом в Joomla.

Создание модальных окон в Joomla

Наша задача, показать посетителю превью, т.е. уменьшенную копию картинки, при клике по которой откроется изображение в оригинальном размере. Значит, для реализации модального окна, нам понадобится файлы картинки разных размеров. Для начала нужно подготовить картинки для сайта. Создадим в папке сайта images две папки, одну папку для маленьких картинок, вторую – для больших.

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

Хотелось бы акцентировать ваше внимание на следующем. С превьюшками все ясно, они маленькие, следовательно, вес файлов невелик. Главное, обязательно обрабатывайте оригинальные изображения, добиваясь наименьшего веса файлов с сохранением качества. Иначе, из-за длительной загрузки больших файлов, вы рискуете потерять посетителя, которому наскучит дожидаться, пока картинка откроется и он покинет сайт. Размер оригинальных изображений не следует делать более 800 x 600 пикселей (учитывая величину экранов старых мониторов). Оригинальные картинки вы также можете обработать онлайн, однако, если есть возможность и умение, лучше сделать это самому.

И так, допустим, мы создали два файла разных размеров 120×90 и 800×600 пикселей – pic120.jpg и pic800.jpg и загрузили в соответствующие папки (или папку) на сайт.

Как уже упоминалось ранее, в Joomla существуют расширенные возможности для вывода веб-контента (фото, материала и др.) в отдельном окне — JHTML::_( ‘behavior.modal’ ). Поэтому, для того, чтобы на сайте заработал lightbox, достаточно вставить в файл index.php в между тегами и шаблона следующий код:

Теперь мы сможем выводить наш веб-контент в модальных окнах.

Модальное окно в Joomla для одной картинки

Для вывода фото в модальном окне мы обязательно указываем класс modal и ссылку на оригинальное изображение

Модальное окно в Joomla для контента

Для вывода в лайтбоксе материала мы также указываем класс modal, ссылку на нужную страницу и размер модального окна

В конце ссылки вставляем ?tmpl=component. Пример ссылки на данную страницу: href=»/lightbox-v-joomla.html?tmpl=component». Вставляем ссылку в код и получаем: ссылка на lightbox 620x480px

И так, обобщу вышеизложенное. Для модального поведения объекта (картинки, материала, видео), основное, что нужно сделать, это добавить в шаблона код:

Затем к ссылке, которые вы хотите открыть в модальном окне, добавить код:

источник

Обзор lightbox расширений Joomla

Вступление

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

Easy lightbox

Новый плагин для обработки фотографий в статьях. Добавлен на JED 30 июля 2015. Совместим с Joomla 3.x.

Авторы называют это плагин «супер». Не знаю насчет супер, но он прост и понятен. Очень похож на плагин «mAvik Thumbnails». Плагин устанавливается стандартными способами. После установки и активации плагина, все изображения внутри статей будет открываться во всплывающем окне после клика по ним. Максимальная ширина изображения: 800 px.

Читайте также:  Установка птф в бампер шевроле круз

Скачать плагин можно по адресу: https://extensions.joomla.org/extensions/extension/photos-a-images/easy-lightbox

Simple Pop-Up

Simple Pop-Up простой, но функциональный плагин для показа во фреймах фотографий, статей, PDF документов и видео YouTube. Добавлен на JED в ноябре 2014 года, последнее обновление в 02 июля 2015 года.

Simple Pop-Up позволит вам добавить всплывающий Fancy Box на любой странице сайта. Можно добавить фотографию, галерею, статью, видео YouTube (в версии 2.0), PDF документ (в версии 2.1). Синтаксис плагина – заключение адреса фото, таблиц, текста в теги плагина: .

Как работать с плагином Simple Pop-Up

  • Установите расширение Simple Pop-Up;
  • Включите его в менеджере плагинов;
  • В любой статье добавьте теги , вокруг адреса фото, текста.

Скачать можно тут: https://wasen.net/index.php/projects/simple-popup

Huge-IT Lightbox

Бесплатный модуль Huge-IT Lightbox позволяет добавить красивую галерею и видео в любой модуль шаблона. Совместим с Joomla 3.x. Модуль добавлен на JED 19 января 2015 года, последнее обновление 04 июля 2015 года.

Особенности Huge-IT Lightbox

  • Бесплатная версия модуля позволяет вставлять в модули видео YouTube и Vimeo;
  • Позволяет добавлять фотогалереи. Фото галерей открываются во всплывающих окнах лайтбокс.
  • В настройках бесплатной версии можно изменить стиль окна, скорость открытия, включить название фото.

Работать с модулем легко: Стандартная установка, активация в менеджере модулей, размещение модуля в статье или на сайте с предварительными настройками.

Скачать Huge-IT Lightbox можнотут: https://huge-it.com/joomla-lightbox/

Joombig responsive lightbox

Модуль Joombig responsive lightbox добавлен на JED в ноябре 2014 года, последнее обнавление: 19 июля 2015 года. Совместим с Joomla 3.x.

Joombig responsive lightbox позволяет создавать галереи в любом модуле шаблона. В настройках модуля предусмотрено:

  • Создание галерей из миниатюр;
  • Создание галерей с прокруткой;
  • Интеграция и настройка лайтбокса;
  • Совместим с мобильными устройствами.

Особенности Joombig responsive lightbox

  • Работает на основе JQuery;
  • Совместим со всеми браузерами;
  • Позволяет создавать несколько модулей на одной странице;
  • Есть функция адоптированного размера;
  • Масса настроек лайтбоксов для каждого модуля отдельно.

Скачать Joombig responsive lightbox можнопоадресу: http://joombig.com/download-extension-free/397-down-joombig-responsive-lightbox

Gallery images lightbox

Бесплатный модуль Gallery images lightbox позволяет создавать галереи в модулях шаблона. Совместим с Joomla 3.x. На JED добавлен в ноябре 2014 года, последнее обновление 19 июля 2015 года. По функционалу похож на предыдущий модуль, но интегрирован Lightbox2. Полезен для создания баннеров и галерей на сайте. Открывает фото во всплывающем окне с помощью JQuery Lightbox.

Скачать можно тут: http://joombig.com/download-extension-free/322-donwload-gallery-images-lightbox

Art Sexy Lightbox Lite

Бесплатный модуль Art Sexy Lightbox Lite добавлен на JED в ноябре 2014 года, последнее обновление 21 мая 2015 года.

Полная версия расширения платная и включает плагин и модуль.

Модуль Art Sexy Lightbox Lite имеет массу настроек

  • 6 тем для показа галерей;
  • Настройка размеров миниатюр;
  • Настройка путей хранения фотогалерей.
  • Показывает в лайтбоксах отдельные фото или группы фото;
  • Может показывать галерею одним фото, при клике по фото откроется вся галерея;
  • Можно отключить модальный показ и еще масса настроек.

Скачать модуль можно тут: https://www.artetics.com/index.php?option=com_hikashop&ctrl=product&lang=en&name=art-sexy-lightbox-lite-edition&product_ >

Jp Super Lightbox

Бесплатный модуль Jp Super Lightbox добавлен на JED 5 мая 2015 года, последнее обнавление 7 июля 2015 года.

Модуль Jp Super Lightbox позволяет показывать фотографии, галереи, статьи в любом модуле сайта.

Особенности Jp Super Lightbox

Jp Super Lightbox позволяет создать:

  • Всплывающий модуль;
  • Всплывающие статьи из любой категории сайта;
  • Открыть статью во всплывающем окне;
  • Настроить ширину и высоту всплывающего окна;
  • 19 стилей всплывающего окна, включая эффект 3D.

Diginix Lightbox

Бесплатный плагин Diginix Lightbox добавлен на JED в ноябре 2014 года, последнее обновление 29 мая 2015 года. Совместим с J! 2.5 и 3.x.

Открывает фото в модальном окне, на любой странице сайта. При открытии фото сохраняет ссылку на медиафайл. Работает во всех браузерах. Устанавливается стандартно, настройки понятны.

Скачать плагин можно тут: http://www.diginixtech.com/diginix-lightbox-download

Zoom Lightbox

Интересный плагин Zoom Lightbox позволяет управлять размером модального окна посетителям сайта. Добавлен на JED в ноябре 2014 года, обновлен последний раз: 27 марта 2015 года.

Инновационный способ показывать фотографии сайта в настраиваемых размерах может значительно улучшить юзабилити сайта.

Управляются размеры фото, а именно zoomмодальных окон непосредственно со страницы сайта. Сделать это может любой посетитель. е и захватывающий способ увеличить содержание и очень полезный инструмент для улучшения сайта

Это расширение доступно для всех версий Joomla: 1.5, 1.6, 1.7, 2.5, 3.x.

Скачать плагин можно тут: http://storejextensions.org/extensions/zoomlightbox.html (требуется регистрация).

ARI Sexy Lightbox Lite

Плагин ARISexyLightboxLite добавлен на JED18 ноября 2014 года, обновлен 21 января 2015 года. После обновления стал совместим с Joomla 3.x.

  • Плагин ARI Sexy Lightbox Lite позволяет показывать фотографии и сторонние страницы и страницы HTML в лайтбоксах сайта.
  • Плагин настраиваемый, имеет 4 темы отображения. Работает во всех браузерах.

Важно , этот плагин вставляет обратные ссылки на разработчика и может повлиять на SEO вашего ресурса.

источник

Joomla 3.x. Как включить/отключить лайтбоксы (в компоненте JoomGallery)

Из этого туториала Вы узнаете, как включить/отключить лайтбоксы (в компоненте JoomGallery) в шаблонах Joomla 3.x.

Войдите в вашу админ панель Joomla, перейдите на вкладку Компоненты (Components), нажмите на Joomla gallery и откройте Мастер настройки (Configuration Manager).

Откройте вкладку Вид категории (Category View), найдите При входе в детальный вид (Entering Detail View) измените ‘ fancyBox ’ на ‘Thickbox3’.

Найдите ‘Изначальное изображение всплывающего окна’ и задайте значение ‘Нет’.

Внеся эти два изменения, нажмите на кнопку Сохранить и закрыть (Save&Close).

Затем, откройте галерею вашего сайта для просмотра изменений.

Вы можете также ознакомиться с детальным видео-туториалом ниже:

Похожие записи

This video guide is going to show you how to check available modules positions in Joomla 3.x template and how to use this information.

Из этого туториала Вы узнаете, как работать с эффектами (ховер, лайтбокс, масштабирование) изображений в Многоцелевых шаблонах сайтов.

Из этого туториала Вы узнаете, как работать с модулем TM Ajax Contact Form.

Submit a ticket

Если вы не смогли найти подходящее решение проблемы, пожалуйста воспользуйтесь следующей ссылкой, чтобы отправить запрос команде технической поддержки.
Отправить запросВы получите ответ в течение 24 часов

источник

10 бесплатных расширений Joomla 3.x lightbox

Вступление

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

Easy lightbox

Новый плагин для обработки фотографий в статьях. Добавлен на JED 30 июля 2015. Совместим с Joomla 3.x.

Авторы называют это плагин «супер». Не знаю насчет супер, но он прост и понятен. Очень похож на плагин « mAvik Thumbnails ». Плагин устанавливается стандартными способами. После установки и активации плагина, все изображения внутри статей будет открываться во всплывающем окне после клика по ним. Максимальная ширина изображения: 800 px.

Скачать плагин можно по адресу: http://extensions.joomla.org/extensions/extension/photos-a-images/easy-lightbox

Simple Pop-Up

Simple Pop-Up простой, но функциональный плагин для показа во фреймах фотографий, статей, PDF документов и видео YouTube. Добавлен на JED в ноябре 2014 года, последнее обновление в 02 июля 2015 года.

Simple Pop-Up позволит вам добавить всплывающий Fancy Box на любой странице сайта. Можно добавить фотографию, галерею, статью, видео YouTube (в версии 2.0), PDF документ (в версии 2.1). Синтаксис плагина – заключение адреса фото, таблиц, текста в теги плагина: .

Как работать с плагином Simple Pop-Up

Скачать можно тут: http://wasen.net/index.php/projects/simple-popup

Huge-IT Lightbox

Бесплатный модуль Huge-IT Lightbox позволяет добавить красивую галерею и видео в любой модуль шаблона. Совместим с Joomla 3.x. Модуль добавлен на JED 19 января 2015 года, последнее обновление 04 июля 2015 года.

Особенности Huge-IT Lightbox

  • Бесплатная версия модуля позволяет вставлять в модули видео YouTube и Vimeo;
  • Позволяет добавлять фотогалереи. Фото галерей открываются во всплывающих окнах лайтбокс.
  • В настройках бесплатной версии можно изменить стиль окна, скорость открытия, включить название фото.

Работать с модулем легко: Стандартная установка, активация в менеджере модулей, размещение модуля в статье или на сайте с предварительными настройками.

Скачать Huge-IT Lightbox можнотут: http://huge-it.com/joomla-lightbox/

Joombig responsive lightbox

Модуль Joombig responsive lightbox добавлен на JED в ноябре 2014 года, последнее обнавление: 19 июля 2015 года. Совместим с Joomla 3.x.

Joombig responsive lightbox позволяет создавать галереи в любом модуле шаблона. В настройках модуля предусмотрено:

  • Создание галерей из миниатюр;
  • Создание галерей с прокруткой;
  • Интеграция и настройка лайтбокса;
  • Совместим с мобильными устройствами.

Особенности Joombig responsive lightbox

  • Работает на основе JQuery;
  • Совместим со всеми браузерами;
  • Позволяет создавать несколько модулей на одной странице;
  • Есть функция адоптированного размера;
  • Масса настроек лайтбоксов для каждого модуля отдельно.

Скачать Joombig responsive lightbox можнопоадресу: http://joombig.com/download-extension-free/397-down-joombig-responsive-lightbox

Gallery images lightbox

Бесплатный модуль Gallery images lightbox позволяет создавать галереи в модулях шаблона. Совместим с Joomla 3.x. На JED добавлен в ноябре 2014 года, последнее обновление 19 июля 2015 года. По функционалу похож на предыдущий модуль, но интегрирован Lightbox2. Полезен для создания баннеров и галерей на сайте. Открывает фото во всплывающем окне с помощью JQuery Lightbox.

Скачать можно тут: http://joombig.com/download-extension-free/322-donwload-gallery-images-lightbox

Art Sexy Lightbox Lite

Бесплатный модуль Art Sexy Lightbox Lite добавлен на JED в ноябре 2014 года, последнее обновление 21 мая 2015 года.

Полная версия расширения платная и включает плагин и модуль.

Модуль Art Sexy Lightbox Lite имеет массу настроек

  • 6 тем для показа галерей;
  • Настройка размеров миниатюр;
  • Настройка путей хранения фотогалерей.
  • Показывает в лайтбоксах отдельные фото или группы фото;
  • Может показывать галерею одним фото, при клике по фото откроется вся галерея;
  • Можно отключить модальный показ и еще масса настроек.

Скачать модуль можно тут: https://www.artetics.com/index.php?option=com_hikashop&ctrl=product&lang=en&name=art-sexy-lightbox-lite-edition&product_ >

Jp Super Lightbox

Бесплатный модуль Jp Super Lightbox добавлен на JED 5 мая 2015 года, последнее обнавление 7 июля 2015 года.

Модуль Jp Super Lightbox позволяет показывать фотографии, галереи, статьи в любом модуле сайта.

Особенности Jp Super Lightbox

Jp Super Lightbox позволяет создать:

  • Всплывающий модуль;
  • Всплывающие статьи из любой категории сайта;
  • Открыть статью во всплывающем окне;
  • Настроить ширину и высоту всплывающего окна;
  • 19 стилей всплывающего окна, включая эффект 3D.

Скачать можно тут: http://joomportal.com/jp-super-lightbox-module-for-joomla-3/

Diginix Lightbox

Бесплатный плагин Diginix Lightbox добавлен на JED в ноябре 2014 года, последнее обновление 29 мая 2015 года. Совместим с J! 2.5 и 3.x.

Открывает фото в модальном окне, на любой странице сайта. При открытии фото сохраняет ссылку на медиафайл. Работает во всех браузерах. Устанавливается стандартно, настройки понятны.

Скачать плагин можно тут: http://www.diginixtech.com/diginix-lightbox-download

Zoom Lightbox

Интересный плагин Zoom Lightbox позволяет управлять размером модального окна посетителям сайта. Добавлен на JED в ноябре 2014 года, обновлен последний раз: 27 марта 2015 года.

Инновационный способ показывать фотографии сайта в настраиваемых размерах может значительно улучшить юзабилити сайта.

Управляются размеры фото, а именно zoomмодальных окон непосредственно со страницы сайта. Сделать это может любой посетитель. е и захватывающий способ увеличить содержание и очень полезный инструмент для улучшения сайта

Это расширение доступно для всех версий Joomla: 1.5, 1.6, 1.7, 2.5, 3.x.

Скачать плагин можно тут: http://storejextensions.org/extensions/zoomlightbox.html (требуется регистрация).

ARI Sexy Lightbox Lite

Плагин ARISexyLightboxLite добавлен на JED18 ноября 2014 года, обновлен 21 января 2015 года. После обновления стал совместим с Joomla 3.x.

  • Плагин ARI Sexy Lightbox Lite позволяет показывать фотографии и сторонние страницы и страницы HTML в лайтбоксах сайта.
  • Плагин настраиваемый, имеет 4 темы отображения. Работает во всех браузерах.

источник