• English
  • Русский

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

08/12
13:17

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

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

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

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

  1. function THEMENAME_preprocess_media_gallery_media_item_thumbnail(&$variables) {
  2.   $element = $variables['element'];
  3.  
  4.   // Attach the colorbox javascript if the format calls for it.
  5.   $format = $element['#media_gallery_entity']->media_gallery_format[LANGUAGE_NONE][0]['value'];
  6.   $lightbox = is_numeric(strpos($format, 'lightbox')) ? TRUE : FALSE;
  7.  
  8.   if ($lightbox) {
  9.         $element['file']['#attached']['js'][] = drupal_get_path('module', 'media_gallery') . '/colorbox-display.js';
  10.         $element['file']['#attached']['js'][] = drupal_get_path('module', 'media_gallery') . '/colorbox-behavior.js';
  11.   }
  12.   // Get the rendered file without annoying DIV wrappers.
  13.   $element['file'] = array('#theme' => 'media_gallery_file_field_inline', '0' => $element['file']);
  14.   $image = drupal_render($element['file']);
  15.  
  16.   $gallery_id = $element['#media_gallery_entity']->nid;
  17.   $media_id = $element['#file']->fid;
  18.  
  19.   // Add a class that is a more targeted version of what template_preprocess()
  20.   // automatically adds for this theme hook, to enable per-type (e.g., video vs.
  21.   // image) styling.
  22.   $variables['classes_array'][] = drupal_html_class('media_gallery_media_item_thumbnail_' . $element['#file']->type);
  23.  
  24.   // Add a class for the wrapper.
  25.   $variables['classes_array'][] = 'media-gallery-item-wrapper';
  26.  
  27.   // Create an array of variables to be added to the main thumbnail link.
  28.   $link_vars = array();
  29.   $link_vars['image'] = $image;
  30.   $link_vars['link_path'] = "media-gallery/detail/$gallery_id/$media_id";
  31.   $link_vars['classes'] = $lightbox ? array('media-gallery-thumb', 'cbEnabled') : array('media-gallery-thumb');
  32.   $link_vars['title'] = $element['#bundle'] == 'image' ? t('View larger image') : t('Watch video');
  33.   // Add the image as a link to the detailed view
  34.   $variables['media_gallery_item'] = theme('media_gallery_item', $link_vars);
  35.  
  36.   // Set the variables to theme the metadata.
  37.   $meta_vars = array();
  38.   $meta_vars['location'] = $element['#media_gallery_entity']->media_gallery_image_info_where[LANGUAGE_NONE][0]['value'];
  39.   $meta_vars['title'] = isset($element['media_title']) ? $element['media_title'][0]['#markup'] : '';
  40.   $meta_vars['link_path'] = $link_vars['link_path'];
  41.  
  42.   // Theme the metadata.
  43.   $variables['media_gallery_meta'] = theme('media_gallery_meta', $meta_vars);
  44. }

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

  1. (function ($) {
  2.     Drupal.behaviors.initColorboxDefaultStyle = {
  3.       attach: function (context, settings) {
  4.         $(document).bind('cbox_complete', function () {
  5.         $('.lightbox-stack .gallery-thumb-inner a').click(function(e) {
  6.             e.preventDefault();
  7.             $.colorbox.next();
  8.           });
  9.         });
  10.       }
  11.     };
  12.     })(jQuery);

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

Рубрика: 
Learn Drupal

Комментарии

01/15, 23:00
Аватар пользователя Алекс С.
Алекс С.

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

01/15, 23:32
Аватар пользователя Гость
Гость

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

01/15, 23:33
Аватар пользователя Гость
Гость

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

01/15, 23:41
Аватар пользователя Гость
Гость

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

01/15, 23:50
Аватар пользователя sherskova
sherskova

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

01/16, 10:35
Аватар пользователя Евгений
Евгений

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

01/16, 11:07
Аватар пользователя sherskova
sherskova

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

01/16, 20:49
Аватар пользователя Anonymous
Anonymous

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

01/16, 21:05
Аватар пользователя sherskova
sherskova

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

01/18, 02:30
Аватар пользователя AmiGator
AmiGator

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

01/18, 12:05
Аватар пользователя sherskova
sherskova

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

01/18, 18:23
Аватар пользователя AmiGator
AmiGator

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

01/19, 00:12
Аватар пользователя sherskova
sherskova

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

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

01/21, 14:53
Аватар пользователя AmiGator
AmiGator

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

01/22, 00:14
Аватар пользователя sherskova
sherskova

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

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

01/30, 19:31
Аватар пользователя Grigory
Grigory

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

01/30, 20:12
Аватар пользователя Яков Макарцов
Яков Макарцов

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

01/30, 21:49
Аватар пользователя sherskova
sherskova

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

03/28, 23:45
Аватар пользователя Евгений
Евгений

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

03/29, 22:53
Аватар пользователя tln
tln

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

03/30, 12:36
Аватар пользователя sherskova
sherskova

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

03/30, 23:34
Аватар пользователя tln
tln

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

Добавить комментарий