[Drupal 7] Как создать собственную медиа галерею с помощью библиотеки Fancybox

В этой статье я расскажу, как создать пользовательскую медиа галерею с помощью библиотеки Fancybox.

Первым шагом является создание типа контента «Медиагалерея (media_gallery)» и добавление следующих полей на странице «Администратор / Структура / Типы / Управление / Медиа-галерея / Поля».

  • Название: Текстовое поле
  • Медиа Галерея Изображение (field_media_gallery_image): Поле изображения

В странице управления отображением admin / structure / types / manage / media_gallery / display типа контента выберите стиль изображения или создайте требуемый стиль на странице настроек стиля изображения admin / config / media / image-styles / добавьте и свяжите изображение в файл.

Создайте файл tpl для типа контента «Галерея мультимедиа» и переименуйте его в «node - media_gallery.tpl.php». Drupal 7 node.tpl.php. , В нашем файле tpl скрыть или удалить переменную $ content, чтобы мы могли позже настроить наши изображения. Получить количество изображений и сохранить его в переменной $ image_count (например). Добавьте следующий код в файл tpl, здесь для каждого изображения мы добавляем тег с именем класса 'fancybox' для вызова стилей fancybox и заголовком 'title title' для отображения названия заголовка. Для каждого изображения мы также показываем количество.

&lt;? php // Теперь мы скрываем содержимое, чтобы потом можно было его визуализировать. скрыть ($ содержание); // Получить количество изображений в этом узле $ image_count = count ($ node-> field_media_gallery_image ['und']); for ($ i = 0; $ i <$ image_count; $ i ++) {// Создать URL-адрес изображения. $ image_uri = $ node-> field_media_gallery_image ['und'] [$ i] ['uri']; $ image_style = image_style_url ('ckg_gallery_medium', $ image_uri); ?> <a href="&lt;?php print file_create_url($node-> field_media_gallery_image ['und'] [$ i] ['uri']);?> группа "rel =" - &lt;? php print $ node-> nid;?> "class =" fancybox "title =" &lt;? php print $ node-> title;?> "> <img class =" image &lt;? php print ($ i + 1);?> "src =" &lt;? php print $ image_style;?> "/> </a> &lt;? php}?>

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

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

Для реализации функции Fancybox загрузите последние файлы с fancybox.net , Распакуйте все файлы и создайте папку «fancybox» в пути «sites / all / library /». Переместите все изображения и следующие файлы 'jquery.easing-1.3.pack.js', 'jquery.fancybox-1.3.4.css', 'jquery.fancybox-1.3.4.js', 'jquery.fancybox-1.3. 4.pack.js 'и' jquery.mousewheel-3.0.4.pack.js 'в папку' fancybox '.

В файле template.php используйте функцию template_process_page для добавления необходимых файлов CSS и JS.

/ ** * Переопределить или вставить переменные в шаблон страницы. * / function template_process_page (& $ vars) {/ * Плагин Fancybox для медиа-галереи * / if (isset ($ vars ['node'])) {if ($ vars ['node'] -> type == 'media_gallery' ) {drupal_add_js (library_get_path ('fancybox'). '/jquery.mousewheel-3.0.6.pack.js'); drupal_add_js (library_get_path ('fancybox'). '/jquery.fancybox-1.3.4.pack.js'); drupal_add_css (library_get_path ('fancybox'). '/jquery.fancybox.css'); / * Создать js-файл custon для отображения fancybox * / drupal_add_js (drupal_get_path ('theme', 'theme_name'). '/Js/media-gallery.js'); }}}

Создайте собственный файл JS 'media-gallery.js', чтобы обработать все функции, которые должны быть реализованы при отображении изображений.

(function ($) {$ (document) .ready (function () {$ ('. fancybox'). fancybox ({'transitionIn': 'none', 'transitionOut': 'none', 'titlePosition': 'inside ',' titleFormat ': функция (title (currentArray, currentIndex, currentOpts) {вернуть' Image '+ (currentIndex + 1) +' / '+ currentArray.length + (title.length?' '+ title:' ') + '';}});});}) (jQuery);

Теперь, когда пользователь нажимает на изображение со страницы галереи, оно будет отображаться и показываться на снимке экрана ниже.

Надеюсь это поможет.

Lt;?
Image_uri = $ node-> field_media_gallery_image ['und'] [$ i] ['uri']; $ image_style = image_style_url ('ckg_gallery_medium', $ image_uri); ?
Php print file_create_url($node-> field_media_gallery_image ['und'] [$ i] ['uri']);?
Php print $ node-> nid;?
Php print $ node-> title;?
Php print ($ i + 1);?
Php print $ image_style;?
Php}?
Length?