Расширения

Обзор Phoca Gallery. Галерея для Джумла

  • Тип – бесплатное расширение галереи Joomla.

 

 

В предыдущей статье «Обзор Joomla Phoca Gallery» мы начали обзор настроек Phoca Gallery и рассмотрели опции для конфигурации страницы категорий и страницы с изображениями внутри категории. В этой части мы поговорим о настройках увеличенной версии изображения – детальном просмотре.

Настройка Phoca Gallery

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

Так же, как и на предыдущих вкладках, на этой все опции условно разделены на разделы (рисунок ниже).

Phoca Gallery
Phoca Gallery

Раздел Настройка детального вида.

Опция Окно деталей позволяет выбрать один из четырнадцати «типов» всплывающего окна, которое появляется по нажатию на миниатюру изображения для просмотра увеличенной версии.

  1. Стандартное всплывающее окно.
  2. Модальное окно.
  3. Модальное окно (Только изображение).
  4. Shadowbox.
  5. Shadowbox (Image only).
  6. Highslide JS.
  7. Highslide JS (Только изображения).
  8. Jak Lightbox.
  9. Не всплывать поверх окон.
  10. Slimbox.
  11. boxplus.
  12. boxplus (Только изображения).
  13. Magnific.
  14. Magnific (Image only).

Приведу несколько примеров всплывающих окон из списка выше. Варианты с «Только изображения» выглядят аналогично, но без элементов управления и тегов.

Модальное окно
Модальное окно
Shadowbox
Shadowbox
Highslide JS
Highslide JS
boxplus
boxplus
Magnific
Magnific

Раздел Modal Box.

Прозрачность наложения Modal Box. Вы можете задать степень прозрачности галереи Joomla вне всплывающего окна увеличенного изображения (тёмная область вокруг, на рисунке ниже – 2). Не путайте с областью самого окна изображения (на рисунке ниже – 3). Доступны варианты от 0 до 100% с шагом в 10. 100% – полностью чёрный цвет (под ним ничего не видно).

Галерея Joomla
Галерея Joomla

На рисунке выше показан пример всплывающего окна «тип» «Модальное окно» с указанием его элементов. Для других «типов» будут схожие элементы.

  1. Кнопка закрытия всплывающего окна.
  2. Затемнённая область вне всплывающего окна.
  3. Область всплывающего окна.
  4. Увеличенное\детальное изображение.
  5. Описание изображения.
  6. Кнопка навигации «Переход к следующему изображению».
  7. Кнопка навигации «Закрытие всплывающего окна».
  8. Кнопка навигации «Обновление\перезагрузка изображения» (аналог кнопки клавиатуры «F5» для страницы сайта).
  9. Кнопка навигации «Запуск слайд-шоу».
  10. Кнопка навигации «Остановка слайд-шоу».
  11. Кнопка навигации «Переход к предыдущему изображению».

Далее идут настройки для различных «типов» всплывающих окон. Для разных типов могут быть одинаковые или очень похожие опции, не буду их рассматривать по несколько раз. Стоит отметить, что некоторые опции для одного «типа» окна могут влиять на отображение других «типов» окон.

Раздел Shadowbox.

  • Задержка слайд-шоу Shadobox. Количество секунд между автоматической сменой слайдов при активации слайд-шоу во фронтальной части сайта.
  • Shadowbox Settings. Настройки стилей отображения слайд-шоу. Для настройки данной опции Вам могут понадобиться знания CSS.

Раздел Highslide JS. Обратите внимания, что данные опции работают для «типа» всплывающего окна «Highslide JS (Только изображения)».

  • Highslide JS Class. Можно задать оформление «внутреннего» периметра изображения. На рисунке ниже – 1 (чёрная рамка). Доступны такие варианты: Очерченная белым, Широкая граница, Темный, Внешнее свечение, Плавающий заголовок, Жирный плавающий заголовок.
  • Прозрачность Highslide JS. Опция аналогична опции Прозрачность наложения Modal Box, рассмотренной выше. На рисунке ниже – 2.
  • Highslide JS Outline Type. Можно задать оформление «внешнего» периметра изображения. На рисунке ниже – 3 (белая рамка). Доступны такие варианты: Очерченная белым, Нет.
  • Highslide JS Полное изображение. Если для опции выбрано Да, то будет показано изображение с его исходными размерами (как в загруженном Вами файле). Если Выбрано Нет, то будет показано изображение с размерами, заданными в полях Ширина большого изображения и Высота большого изображения на вкладке Эскизы раздел Настройка размеров изображений и детального окна. На рисунке ниже – 4.
  • Кнопка закрытия Highslide JS. Позволяет скрыть\отобразить кнопку закрытия всплывающего окна. На рисунке ниже – 5.
  • Highslide JS слайд-шоу. Если для данной опции выбрано слайд-шоу из маленьких миниатюр, то под увеличенным изображением появится несколько маленьких с возможностью перехода к нужной по её нажатию. На рисунке ниже – 6.
Галерея для Джумла
Галерея для Джумла

Если для опции Highslide JS слайд-шоу выбрано стандарт, то всплывающее окно будет выглядеть так, как показано на рисунке ниже («взявшись» мышью за «четырёх-направленные» стрелки можно перемещать всплывающее окно по экрану). В случае с вариантом Нет, слайд-шоу вовсе не будет.

Галерея изображений Joomla
Галерея изображений Joomla

Раздел Jak Lightbox. Обратите внимания, что данные опции работают для «типа» всплывающего окна «Jak Lightbox».

  • Задержка слайд-шоу Jak Lightbox. Опция аналогична опции Задержка слайд-шоу Shadobox, рассмотренной выше.
  • Ориентация миниатюр JAK Lightbox. По аналогии с опцией Highslide JS слайд-шоу, рассмотренной выше, можно задать вертикальное или горизонтальное положение миниатюр (на рисунке ниже – 1). Или можно вовсе от них отказаться – опция Нет.
  • Описание Jak Lightbox. Можно задать отображение заголовка и\или описания под изображением (на рисунке ниже – 2). Или можно вовсе от них отказаться – опция Нет.
  • Высота описания Jak Lightbox. Расстояние от внешнего контура изображения до нижней границы всплывающего окна (на рисунке ниже – 3). Если описание и\или заголовок изображения не помещается, то можно увеличить данное значение.
Jak Lightbox
Jak Lightbox

Раздел boxplus. Обратите внимания, что данные опции работают для «типа» всплывающего окна «boxplus (Только изображения)».

  • Всплывающие окна темы (boxplus). Доступно несколько вариантов оформления всплывающего окна: Осветление квадрата темы, Затемнение квадрата темы, Осветление вокруг темы, Затемнение вокруг темы, Стиль темы – PrettyPhoto, Стиль темы – Shadowbox. На рисунке ниже – 1.
  • Прокрутка поцентру (boxplus). Можно задать выравнивание всплывающего окна по центру окна браузера в случаях, когда всплывающее окно меньше окна браузера и пользователь прокручивает страницу по вертикали или горизонтали. Если для данной опции выбрано Да, то всплывающее окно «приклеивается» к центру окна браузера и всегда остаётся видимым.
  • По размеру окна (boxplus). Можно включить автоматическое масштабирование всплывающего окна так, чтобы оно всегда подстраивалось под размер окна браузера. Это придаёт галерее Joomla адаптивности и препятствует появлению горизонтальной прокрутки окна браузера. Масштабирование происходит динамически, в зависимости от изменения размера окна браузера (в режиме реального времени без перезагрузки страницы)
  • Задержка Слайд-Шоу (boxplus). Опция аналогична опции Задержка слайд-шоу Shadobox, рассмотренной выше.
  • Закольцевать галереи (boxplus). Если для данной опции выбрано Да, то по достижению последнего слайда в слайд-шоу, Phoca Gallery перейдёт к первому и так далее.
  • Размещение заголовка (boxplus). Можно отображать заголовок изображения внизу или справа от изображения. На рисунке ниже – 2. А можно вовсе его спрятать.
  • Область навигации (boxplus). Можно отображать стрелочку переключения между изображениями и миниатюр изображений Как наложение на увеличенное изображение или В области заголовка (пример на рисунке ниже). На рисунке ниже – 3. А можно вовсе её спрятать.
  • Длительность анимации (boxplus). Длительность эффекта анимации появления\смены изображений в миллисекундах
  • Эффект перехода (boxplus). Можно выбрать один из доступных эффектов анимации появления\смены изображений: Линейный, Квадрат, Кубический, Квадратный, Квинтетный, Экспонентный, Круговой, Синусоидальный, Вперёд и назад, Упругий, Эластичная кривая.
  • Контекстное меню (boxplus). Можно включить\отключить появление контекстного меню по нажатию правой кнопкой мыши на изображение во всплывающем окне.
boxplus (Только изображения)
boxplus (Только изображения)

Раздел Настройки Мульти-Окна. Обратите внимание, что данные опции работают для разных «типов» всплывающих окон. В моём примере ниже используется «Стандартное всплывающее окно».

  • Разрешить мультиоконный режим. Активирует использование «расширенного типа» всплывающего окна «Стандартное всплывающее окно» (рисунок ниже).
  • Мульти-Окно (Отображаемые элементы). Вы можете указать, какие элементы нужно отображать в мульти-окне: Заголовок, Описание, Автор, Рейтинг, Tags (теги), Комментарии, Миниатюры, Карта.
  • Ширина Мульти-Окна. Высота Мульти-Окна. Ширина и высота мульти-окна в пикселях.
  • Ширина карты Мульти-Окна. Высота карты Мульти-Окна. Если для опции Мульти-Окно (Отображаемые элементы) Вы выбрали элемент Карта, то тут Вы можете задать ширину и высоту области карты в мульти-окне.
  • Ширина окна миниатюр. Если для опции Мульти-Окно (Отображаемые элементы) Вы выбрали элемент Миниатюры, то тут Вы можете задать ширину области миниатюр в мульти-окне. На рисунке ниже – 1.
  • Количество миниатюр (миниатюры окна). Если для опции Мульти-Окно (Отображаемые элементы) Вы выбрали элемент Миниатюры, тут Вы можете задать количество миниатюр в мульти-окне. На рисунке ниже – 1.
  • Ширина окна комментариев Мульти-Окна. Высота окна комментариев Мульти-Окна. Если для опции Мульти-Окно (Отображаемые элементы) Вы выбрали элемент Комментарии, тут Вы можете задать ширину и высоту области формы комментариев в мульти-окне. На рисунке ниже – 2.
  • Фиксироваие столбцы Мульти-Окна. Активация данной опции будет полезна, например, в тех случаях, когда в мульти-окне отображаются миниатюры разных размеров. В таком случае размеры столбцов не будут меняться и содержимое мульти-окна может выглядеть аккуратнее.
Настройки мульти-окна
Настройки мульти-окна

Раздел YouTube. Если Вы используете видео с YouTube в своей галерее Joomla, то выбрав для опции Окно YouTube вариант Полное видео, видеоролик будет показан на всю ширину и высоту всплывающего окна без полей.

Раздел Настройки описания. В моём примере ниже используется «Модальное окно».

  • Показать описание в окне деталей. Вы можете отобразить описание изображения во всплывающем окне. На рисунке ниже описание – 1. Доступны такие варианты: Спрятать, Показать (Стандарт) (на рисунке ниже место, в котором будет отображаться описание и заголовок отмечены – 3), Показать (Lightbox) (на рисунке ниже это тёмная область поверх изображения – 2).
  • Показать заголовок в описании. Можно включить отображение заголовка изображения. На рисунке ниже – 4.
Настройка описания
Настройка описания

Раздел Настройки слайд-шоу. Тестировал на всплывающем окне «Модальное окно».

  • Задержка слайд-шоу. Остановить слайд-шоу. Вы можете указать количество секунд (из спадающего списка), на которое будет показано изображение перед сменой следующего. Опции действуют при запуске слайд-шоу во фронтальной части сайта галереи Joomla. При тестировании не нашёл разницу между двумя этими опциями.
  • Случайное слайд-шоу. Активирует случайный порядок воспроизведения изображений во время просмотра слайд-шоу. При тестировании не нашёл разницу между двумя этими опциями.
  • Показать кнопки навигации. Включает\отключает отображение управляющих элементов во всплывающем окне. Если они скрыты, то пользователь не сможет запустить слайд-шоу.

Главные настройки

На вкладке Главные настройки (рисунок ниже) собраны опции, которые влияют на работу всей галереи изображений Joomla. Одинаковые или похожие опции, которые были рассмотрены ранее, повторно не будут затрагиваться.

YouTube API Key. Вы можете указать свой API ключ YouTube, который можно узнать в самом YouTube, для того, чтобы импортировать свои видеофайлы в галерею для Джумла.

Enable SSL (YouTube API). Можно включить\отключить соединение с YouTube, по шифрованному протоколу во время импорта видеофайлов.

Ширина Phoca Gallery. Можно задать фиксированную ширину области галереи в пикселях. Обратите внимание, что это может нарушить отзывчивость Phoca Gallery (адаптацию под различные размеры экранов).

Центрировать Phoca Gallery. В случае, когда Вы задали фиксированную ширину галереи в опции Ширина Phoca Gallery, то можно выровнять её по центру страницы, активировав данную опцию.

Альтернативное значение. Вы можете указать, что именно должна использовать Phoca Gallery в качестве замещающего текста изображения («alt»). Это полезно для поисковых систем и в случаях, когда у пользователя отключён показ изображений в браузере или картинка по какой-то причине не загрузилась. Доступны такие варианты: Пусто (не рекомендую), Заголовок, Описание, Заголовок – Описание, Заголовок > Описание > Мета описание, Описание > Заголовок > Мета описание, Мета описание > Заголовок > Описание, Мета описание > Описание > Заголовок.

Показать теги. Активирует отображение тегов, если они присвоены изображению. Доступны такие варианты: Нет, Да (Категория), Да (Просмотр деталей), Да (Категория и просмотр деталей). «Просмотр деталей» – всплывающее окно.

Теги (Ссылки). Вы можете задать действие, которое будет происходить по нажатию на тег. Доступны такие варианты:

Нет. По нажатию на тег ничего не будет происходить.

Внешняя ссылка. По нажатию на тег пользователь перейдёт по ссылке, заданной при создании тега (об этом мы поговорим в следующих статьях).

Ссылка категории. По нажатию на тег пользователь перейдёт на страницу категории галереи Joomla, заданной при создании тега.

Поиск результатов. По нажатию на тег пользователь перейдёт на страницу со всеми изображениями, к которым прикреплён данный тег. Независимо от того, к какой категории принадлежат изображения. Таким образом можно, например, группировать изображения из разных категорий в одну «категорию»

Главные настройки
Главные настройки

Настройки раздела Настройки RSS (Feed) относятся к RSS ленте галереи изображений Joomla.

Показывать RSS (Feed) ссылку. Можно задать отображение иконки RSS-ленты в разных частях Phoca Gallery. Доступны такие варианты:

  • Нет. Не отображать иконку.
  • Да (Категория и Категории). Отображать иконку внутри самой категории изображений и на странице списка категорий.
  • Да (Категории). Отображать иконку только в списке категорий изображений.
  • Да (Категория). Отображать иконку только внутри самой категории.

Фид категорий. Можно указать один или несколько ID категорий (посмотрите его в разделе Категории), разделяя их запятой. Информация с этих категорий или этой категории будет отображаться в RSS-ленте пользователя, если он подписался на неё на странице перечня категорий.

Фид - Порядок изображений. Сортировка изображений в RSS-ленте. По убыванию или возрастанию даты.

Фид - Количество изображений. Количество изображений, отображаемых в RSS-ленте.

Заголовок Фида. Заголовок RSS-ленты.

Включить загрузку изображений Picasa. Вы можете указать, стоит ли добавлять в RSS-ленту информацию о загруженных изображений из Picasa.

Нумерация страниц для загрузки изображений Picasa. Если для опции Включить загрузку изображений Picasa выбрано Да, то тут Вы можете указать количество изображений, о которых будет добавлена информация в RSS-ленту (пагинация).

Включить загрузку изображений Facebook. Опция аналогична Включить загрузку изображений Picasa, но для Facebook.

Facebook Loading Pagination. Опция аналогична Нумерация страниц для загрузки изображений Picasa, но для Facebook.

Разрешить кеш. Можно включить кэширование RSS-ленты Phoca Gallery, если включено кэширование Joomla. Обратите внимание, что при длительном сроке хранения кэша информация в RSS-ленте может быть неактуальной (там не появятся последние обновления).

Раздел Настройки Geotagging позволяет сконфигурировать отображение карт Google в Вашей галерее Джумла. Большинство опции из данного раздела уже были рассмотрены ранее. Они влияют на карту, которая отображается на странице списка категорий вместо «плиток» категорий.

Показать Geotagging (Категории). Выбрав для этой опции Да, Вы активируете отображение карты Google с нанесёнными на неё отметками с фотографиями из Вашей галереи вместо списка категорий (вместо «плитки»). Обратите внимание, что для нормальной работы данной опции для всех изображении Вашей галереи нужно задать широту и долготу местоположения, где это изображение было снято. Данные настройки можно задать в разделе Изображения.

Раздел Настройки VirtueMart.

Показать ссылку VirtueMart. Если включить данную опцию, то Вы сможете задавать ID товара VirtueMart в настройках изображений Phoca Gallery. И тогда у таких изображений появится пиктограмма корзины под миниатюрой (рисунок ниже). По нажатию на эту миниатюру пользователь перейдёт на страницу товара VirtueMart. Перед активацией данной опции обязательно убедитесь в том, что у Вас установлен сам компонент VirtueMart.

Ссылка на товар VirtueMart
Ссылка на товар VirtueMart

В следующей статье «Обзор Phoca Gallery. Галерея для Joomla 3» мы закончим обзор настроек компонента и поговорим о темах оформления галереи (шаблонах).

Похожие материалы
Автор статьи – Хорошевский Алексей

Хорошевский Алексей Примерно с 2008 года и по сегодняшний день создаю сайты «под ключ» на Joomla и WebSite X5. Также занимаюсь их доработкой, SEO-продвижением, контекстной рекламой, защитой от взлома и оптимизацией скорости загрузки сайта.

Кандидат технических наук по специальности «Информационные технологии».

На этом сайте есть контакты и информация обо мне. На нём Вы найдёте примеры моих работ, а также перечень и цены предоставляемых услуг.

 

Полезные ссылки: