Skip to main content
Темплейты для Drupal

Media Gallery + Colorbox - перелистывание фото в colorbox

Как известно, по умолчанию, в Media Gallery при клике на фото в colorbox открывается фотография на отдельной странице. Многие в связи с этим задают вопрос: как сделать так, чтобы в Colorbox при клике на фото появлялась следующая фотография в том же colorbox?

В комментариях к посту со скринкастом по Media Gallery некто Андрей предложил решение, найденное на drupal.org. Проверила - работает (можете убедиться в этом, полистав фотки в моей фотогалерее).

А вот и само решение:

Нам надо переопределить функцию template_preprocess_media_gallery_media_item_thumbnail . В файле template.php вашей темы (если нет такого - создать) вставляем следующий код:

function THEMENAME_preprocess_media_gallery_media_item_thumbnail(&$variables) {
  $element = $variables['element'];
 
  // Attach the colorbox javascript if the format calls for it.
  $format = $element['#media_gallery_entity']->media_gallery_format[LANGUAGE_NONE][0]['value'];
  $lightbox = is_numeric(strpos($format, 'lightbox')) ? TRUE : FALSE;
 
  if ($lightbox) {
        $element['file']['#attached']['js'][] = drupal_get_path('module', 'media_gallery') . '/colorbox-display.js';
        $element['file']['#attached']['js'][] = drupal_get_path('module', 'media_gallery') . '/colorbox-behavior.js';
  }
  // Get the rendered file without annoying DIV wrappers.
  $element['file'] = array('#theme' => 'media_gallery_file_field_inline', '0' => $element['file']);
  $image = drupal_render($element['file']);
 
  $gallery_id = $element['#media_gallery_entity']->nid;
  $media_id = $element['#file']->fid;
 
  // Add a class that is a more targeted version of what template_preprocess()
  // automatically adds for this theme hook, to enable per-type (e.g., video vs.
  // image) styling.
  $variables['classes_array'][] = drupal_html_class('media_gallery_media_item_thumbnail_' . $element['#file']->type);
 
  // Add a class for the wrapper.
  $variables['classes_array'][] = 'media-gallery-item-wrapper';
 
  // Create an array of variables to be added to the main thumbnail link.
  $link_vars = array();
  $link_vars['image'] = $image;
  $link_vars['link_path'] = "media-gallery/detail/$gallery_id/$media_id";
  $link_vars['classes'] = $lightbox ? array('media-gallery-thumb', 'cbEnabled') : array('media-gallery-thumb');
  $link_vars['title'] = $element['#bundle'] == 'image' ? t('View larger image') : t('Watch video');
  // Add the image as a link to the detailed view
  $variables['media_gallery_item'] = theme('media_gallery_item', $link_vars);
 
  // Set the variables to theme the metadata.
  $meta_vars = array();
  $meta_vars['location'] = $element['#media_gallery_entity']->media_gallery_image_info_where[LANGUAGE_NONE][0]['value'];
  $meta_vars['title'] = isset($element['media_title']) ? $element['media_title'][0]['#markup'] : '';
  $meta_vars['link_path'] = $link_vars['link_path'];
 
  // Theme the metadata.
  $variables['media_gallery_meta'] = theme('media_gallery_meta', $meta_vars);
}

Создаем файлик colorbox-behavior.js и кидаем его в папку модуля. Содержимое файлика:

(function ($) {
    Drupal.behaviors.initColorboxDefaultStyle = {
      attach: function (context, settings) {
        $(document).bind('cbox_complete', function () {
        $('.lightbox-stack .gallery-thumb-inner a').click(function(e) {
            e.preventDefault();
            $.colorbox.next();
          });
        });
      }
    };
    })(jQuery);

Сохраняем, очищаем кеш, проверяем.

50

Comments

Алекс С.'s picture
Алекс С.

Большое вам спасибо!

Гость's picture
Гость

классно комнты сделаны.. а где же капча? как будете с ботами бороться?

Гость's picture
Гость

блин, очепатался.. КомЕнты тут классные

Гость's picture
Гость

шерскова, а почему дискас коменты удалили? что в них не понравилось? глючили что-ли? предлагаю вам на главной страничке создать раздел, в котором пользователи будут задавать вопросы. а то я такого раздела не нашёл, и здесь всё спрашиваю... :)) вы уж меня извините за это.
Новый дизайн у вас просто супер.. и в яндексе вас теперь очень просто найти по запросу "блог друпал" 7 место. я считаю, что это почётное место, желаю вам двигаться ещё выше.. :)
на счёт дискаса и капчи буду ждать ответа в этой теме :)

Мария Шерскова's picture
Мария Шерскова

Disqus хорош, но все таки родные комменты мне больше по душе. Более гибко получается. А насчет антиспама я еще экспериментирую. Опять же, тема для поста будет ;)

Евгений's picture
Евгений

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

Мария Шерскова's picture
Мария Шерскова

Исправила пост. Попробуйте еще раз. У меня там код сбился, и решение было не самое "красивое". А так должно быть правильно.

Anonymous's picture
Anonymous

спасибо за ответ про дискас, будем его пробовать :)
и ещё второй вопрос: Когда будете учить прикручивать партнёрку мамбы или лав планет ?

Мария Шерскова's picture
Мария Шерскова

Прикручивать к Друпалу? В планах есть пост по работе с самой партнеркой - мы с ней вполне успешно работаем пару лет точно. Но в данном случае друпал тут ни при чем :)

AmiGator's picture
AmiGator

так я что то не понял, вы из media_gallery.theme.inc функцию удаляете, а в template.php вписываете или что? подробнее плиз

Мария Шерскова's picture
Мария Шерскова

Нет, в модуле все остается как есть. в template.php измененную вставляете - это переопределяет оригинальную функцию и заставляет ее работать так, как вам надо. Разумеется, при конкретной включенной теме.

AmiGator's picture
AmiGator

если в семерке сделать так, как вы написали, то ничего не получится. возможно в 6-ом друпале это работает. в общем этот вариант ничем не лучше, чем тот, который вы раньше писали с правкой непосредственно модуля, потому что после обновления media gallery все накроется медным тазом =) тут нужен другой подход. к сожалению я не спец и идеального варианта выдать не смогу :-(

Мария Шерскова's picture
Мария Шерскова

При обновлении накроется как раз таки старый вариант. Потому я его и заменила на новый. Код проверила на своем сайте - работает как надо. Media Gallery для шестерки не существует, так что в шестом друпале это работать не будет однозначно, ибо незачем :)

Так вот, код измененный вставляется в template.php именно для того, чтобы при обновлении функция по прежнему переопределялась. Из этого следует а) я недостаточно понятно изложила суть вопроса; б) вы что-то не так делаете

AmiGator's picture
AmiGator

нет не верно. если функция обновится в след версии media gallery, ваша модернизация ее испортит. вообще в данном случае друпал работает так: сначала выполняется оригинальная функция, потом ваша, а результат уже перекрывается. я у себя не стал переписывать всю функция, а только часть, где нужно вставить ссылку на скрипт. но в общем то это все топорные варианты. а на счет phptemplate, у меня почему то не сработало. вроди бы сейчас принято писать имя шаблона, вместо этого

Мария Шерскова's picture
Мария Шерскова

Да, функция определяется для темы, этот момент поправила в коде. И да, если функция изменится в модуле, функция в template.php вполне возможно поломает результат. Однако это работающее решение (живой пример: http://fancycook.ru/content/красивая-еда).

Если у вас есть решение лучше - поделитесь с общественностью ;)

Grigory's picture
Grigory

Интересно, что для Друпала есть готовый модуль Colorbox - но Media Gallery его не использует, обращаясь к colorbox library напрямую. Есть патчики (http://drupal.org/node/1053674), которые связывают Media Gallery с Colorbox module, чтобы свойствами колорбокса в медиа-галерее можно было управлять через настройки колорбокс-модуля. Я только что проверил - действительно работает. Однако клик на фото всё равно открывает фотографию на отдельной странице, так что "Integrate Media Gallery with colorbox module" patch, к сожалению, не заменяет вышеописанного патчика для перелистывания фото в колорбоксе.

Яков Макарцов's picture
Яков Макарцов

Спасибо, как раз искал это решение. Во-первых, для своего сайта, но это не страшно. Но вот пожелание заказчика - закон

Мария Шерскова's picture
Мария Шерскова

Славные у вас фотографии в галерее. Северное лето пробрало до печенок - очень похоже на родные леса на Кольском. И про Тай интересно :)

Евгений's picture
Евгений

я дико извиняюсь))с друпалом знаком всего пару дней) а можно подробнее что где создать и куда вставить! буду очень признателен!

tln's picture
tln

Здравствуйте! Если знаете, подскажите: в свойствах галереи выбран способ показа изображения в лайтбоксе, при нажатии на картинку в галерее экран темнеет и ничего не открывается, если нажать повторно - открывается нормально. При перелистывании в лайтбоксе - такая же история, если листать очень медленно - нормально, если быстро - опять темный экран и ничего. Вот пример - http://fotowkola.ru/node/21

Мария Шерскова's picture
Мария Шерскова

возможно неправильно установлена библиотека колорбокса, либо js колорбокса конфликтует с другими js темы/других модулей

tln's picture
tln

Если для лайтбокса определить пресет media_gallery_thumbnail, то все работает нормально. но в этом пресете масштабирование и обрезка под квадрат 450х450, если поменять, изменятся превьюшки в галерее.

Андрей's picture
Андрей

А как найти что с чем конфликтует у меня таже проблема

CLR's picture
CLR

Подскажите, пожалуйста, а почему в связке Media Gallery + Colorbox в Drupal 7, когда создана галерея, то в колорбоксе отображается нормально только первых три изображения, а вот если выбирать 4-е или любое другое, которое больше 3, появлятся просто черный экран и ничего не отображается.

Инна's picture
Инна

в папку какого модуля мы кидаем файл js?

Инна's picture
Инна

colorbox вообще надо устанавливать как модуль или как библиотеку?

Инна's picture
Инна

и как вообще настроить colorbox?

Мария Шерскова's picture
Мария Шерскова

Js в папку модуля media gallery. Colorbox - это модуль, которому нужна библиотека. Настройки модуля colorbox появляются в разделе конфигурация после включения модуля.

Владимир's picture
Владимир

есть небольшое уточнение , файл colorbox-behavior.js кидается в папку модуля медиа_галереи или калорбокса? кидается прямо в корень или в папку со скриптами?
код для template.php просто вставляется в в конец страницы?

Мария Шерскова's picture
Мария Шерскова

colorbox-behavior.js - в папку модуля media gallery. код в template.php так и втсавляется, но должен быть заключен в <?php ... ?>. Если этот файл в теме есть и в нем что-то содержится - вставляем в конец, перед ?>

Paul's picture
Paul

добрый день. Сделал все, все заработало. Но вылез один побочный эффект - все фотки в окне лайтбокса небольшого размера (примерно 300-400 пикселей). И сделать их большими никак не получается - я и новые стили создавал и пытался переопределить старые. Такое впечатление что что-то блокирует показ больших изображений и принудительно масштабирует до маленьких. Подскажите в чем может быть проблема и в каком направлении искать решение? Заранее спасибо

Мария Шерскова's picture
Мария Шерскова

Смотрите настройки отображения media в конфигурации media styles (вроде так)

 

Paul's picture
Paul

В том-то и беда что в стилях разрешение задано нормально. Я даже пробовал создавать новые стили - все равно не помогает (.

Paul's picture
Paul

И еще - файл отдается с таким размером как задан в стилях друпала (смотрю через файрбаг), а вот в окне лайтбокса отображается маленьким (.
Проблема усугубляется тем, что я пока JS не знаю совсем, сейчас штудирую PHP.

Johnny_K's picture
Johnny_K

Сделал все, как в инструкции, однако перелистывание, как переходило на другую страницу так и осталось. Скидывал кэш и т.д. Где нужно смотреть?
версия друпла 7.21

Мария Шерскова's picture
Мария Шерскова

colorbox-behavior.js положили в папку модуля media gallery?

только что проверила - работает, можете убедиться http://media-gallery.sherskova.ru

Johnny_K's picture
Johnny_K

да положил все как надо
может в скрипте пути какие-нибудь нужно прописать
а про тот скрипт который в tamplate.php

Johnny_K's picture
Johnny_K

путь куда кладу скрипт /sites/all/modules/media_gallery/colorbox-behavior.js
путь там где лежит темплайт /themes/bartik/template.php

Johnny_K's picture
Johnny_K

все разобрался БОЛЬШОЕ спасибо
привычка копи-пастить ослепила и в итоге прост не вставил имя шаблона *^-^*

Artem's picture
Artem

Теперь туда интегрировали lightbox2 и есть соответствующая галочка. Как теперь фотки перелистывать?

Олег's picture
Олег

Куда интегрировали lightbox2?? Только что зашёл на страницу проекта Медиа Галереи http://drupal.org/project/media_gallery, там всё по-старому, последний релиз 2012-июль-06, никаких упоминаний о lightbox2 нет.

Альберт's picture
Альберт

По этому описанию я не разобрался. То ли вы скопировали, то ли у вас скопировали. К сожалению, многие блоги тупо копируются:(( Но вот по этому адресу http://odrupal.ru/drunews/poleznye-sovety/media-gallery-colorbox-perelis... я нашел действительно хорошее объяснение для начинающих. Все работает именно если делать так, как описано там.

Мария Шерскова's picture
Мария Шерскова

То что по ссылке тупо скопировано с моего поста. Я в отличие от некоторых, никогда ничего "тупо" не копирую.

Константин's picture
Константин

Спасибо все заработало, очень долго искал решение...
Если не трудно поправьте что js нужно кидать в папку с модулем Media Galery а то сразу не понятно

Роман's picture
Роман

Спасибо за ценные уроки.
У меня немного другой вопрос, это только у меня? Или у всех? Не отображаются теги alt у картинок и видео. Т.е. при открытии в колор боксе у картинок alt пустой. А в предпросмотре альты выглядят как "'View larger image' 'Watch video"... пытаюсь эту напасть победить, например присвоить им значение поля "Заголовок", которое которое уже есть в media gallery. Но все никак не получается победить пхп...

Леонид's picture
Леонид

Сделал по инструкции, имя темы прописал в template.php, скриптовый файлик скопировал, но... эффекта никакого.

Леонид's picture
Леонид

Вот рабочий способ, если кому нужно. https://drupal.org/node/1088738#comment-5264496

Андрей's picture
Андрей

"Проверила - работает (можете убедиться в этом, полистав фотки в моей фотогалерее)."
Кинь сссылочку на галерею, очень хочу посмотреть...

Мария Шерскова's picture
Мария Шерскова

Той галереи давно уже нет, пост 4-летней давности. Да и media gallery я уже давно не использую.

Андрей's picture
Андрей

ну как ж ты так....
а чё используешь тогда, если не media gallery? есть примерчик, из своего...?

Add new comment