Сервис для
сео - оптимизаторов

Найди ошибки на сайте
Ошибки мешают продвижению сайта
Исправь ошибки на сайте
Сайт без ошибок продвигать легче
Получи новых клиентов
Новые клиенты принесут больше прибыль

Colorbox всплывающие окна с изображениями и видео Drupal

  1. Шаг 1. Монтаж
  2. Шаг 2. Colorbox с полями изображения

Многие сайты любят показывать медиа во всплывающих окнах Многие сайты любят показывать медиа во всплывающих окнах. Использование всплывающих окон может упростить посетителям быстрый просмотр нескольких изображений или видео.

В этом уроке мы покажем вам, как использовать всплывающее окно Colorbox с Drupal.

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

Шаг 1. Монтаж

Установите эти два модуля:

Теперь нам нужно получить фактические файлы Colorbox:

  • Загрузите плагин Colorbox с https://github.com/jackmoore/colorbox/archive/1.x.zip
  • Распакуйте эти файлы и переименуйте папку в «colorbox»
  • Загрузите эти файлы в каталог «sites / all / library». Убедитесь, что путь к файлу плагина выглядит следующим образом: «sites / all / library / colorbox / jquery.colorbox-min.js»

Теперь настройте Colorbox:

  • Перейти к конфигурации> Colorbox
  • Установите флажок «включить загрузку colorbox»

Шаг 2. Colorbox с полями изображения

  • Перейдите в Структура> Типы содержимого> Управление полями
  • Добавить поле изображения
  • Перейдите на вкладку «Управление отображением».
  • Установите формат изображения в Colorbox.
  • Нажмите Сохранить.
  • Теперь вы увидите некоторые параметры форматирования для colorbox в этом поле:
  • Нажмите на маленький значок шестеренки, и эти изображения покажут:
  • Перейдите и создайте элемент содержимого, используя новое поле изображения. В этом примере я загрузил 4 фотографии пляжа:
  • Нажмите на любое изображение, и вы увидите видео, отображаемые внутри палитры. Если это не произойдет в первый раз, очистите кеш Drupal.

Шаг 3. Colorbox с полями видео

Теперь мы покажем вам показ видео во всплывающем окне. Мы собираемся использовать Поле для вставки видео ,

  • Установите модуль Video Embed Field.
  • Перейдите в Структура> Типы содержимого> Управление полями
  • Добавить поле для вставки видео
  • Нажмите Управление отображением
  • Установите формат предварительного просмотра миниатюр с Colorbox:
  • Перейдите и создайте элемент контента, используя ваше новое поле видео:
  • Drupal автоматически создаст для вас миниатюру из видео:
  • Нажмите на миниатюру, и вы увидите видео во всплывающем окне:

Стив является основателем OSTraining. Родом из Великобритании, сейчас он живет в Сарасоте в США. Работа Стива охватывает грань между преподаванием и веб-разработкой.