xandeadx.ru Блог музицирующего веб-девелопера

Drupal → Простая галерея с AJAX листалкой на Views

Опубликовано в

Дано:

Тип материала Галерея (gallery) с дополнительным полем Изображения (field_images), в которое возможно загрузить неограниченное количество файлов. Поле создано с помощью ImageField. Так же создан ImageCache пресет gallery_thumbs для вывода превьюшек изображений размером 160x160.

Задача:

При просмотре галереи вывести превьюшки изображений разбитые на страницы, которые можно листать с помощью AJAX листалки Views. Превьюшки кликабельны и ведут на полные версии картинок:

Галерея с AJAX пейджером с помощью Views

Необходимые модули:

Views, для вывода постраничного списка изображений с AJAX листалкой.
Views attach, для вывода изображений в материалах определённого типа.

Решение:

  1. В настройках отображения полей у материалов с типом "Галерея" отключаем вывод поля "Изображения" (скриншот), оно будет генериться с помощью Views.

  2. Создаём представление с именем gallery_images и типом Файл (скриншот).

  3. В созданное представление добавляем взаимосвязь Содержимое: Изображения с именем Изображения и отмеченной опцией Эта связь обязательна (скриншот).

  4. Добавляем аргумент Материал: Nid, в качестве связи выбираем созданную ранее взаимосвязь Изображения (скриншот).

  5. Добавляем поле "Содержимое: Изображения (field_images)" с убранной опцией "Группировать множественные значения" и форматом "gallery_thumbs изображение со ссылкой на исходное изображение" (скриншот).

  6. В основных настройках представления изменяем стиль на Сетка, включаем мини пейджер и AJAX функции (скриншот).

  7. Добавляем вид Содержимое материала (скриншот).

  8. В типах материала указываем Галарея (скриншот). Этим мы добавили в галереи вывод представления.

  9. Сохраняем представление.

Написанное актуально для Views 6.x-2.x
Похожие записи

Комментарии RSS

с дополнительным полем Изображения (field_images), в которое возможно загрузить неограниченное количество файлов.

как и можно ли в такой схеме к каждой картинке добавить еще несколько полей?

у картинок можно включить alt, title и description

А почему автора не устроило обычное представление с полем типа field_images -> оригинал изображения | ссылка на страницу,
с тем же аяксом и листалкой?

что понимается под "обычным представлением"? если это views с типом Материал, то листалки по файлам там не появится, плюс без Views attach представления нельзя подключать к материалам. Если у вас получилось, скиньте код экспорта на pastebin.com

как доберусь до вечера, отпишу.

Так-с, разобрался. Да, именно такую вьюху я имел ввиду.
Совершенно проглядел в посте, что все картинки прикреплены к одной ноде, и тем не менее: листалка по приаттаченным изображениям + ajax.

Включены следующие модули: http://pastebin.com/eGUuWEq7
Экспорт вьюхи: http://pastebin.com/u4GRSqtC
Дамп ФС и БД моей тестовой установки друпала к себе на локальный сервер:
http://ifolder.ru/21385525
Скриншот.

Да, работает! Когда пробовал сам, то почему то упорно не появлялась листалка. Но в итоге получается, что единственное отличие от моего способа это не нужно добавлять взаимосвязь. Хотя преимущество представления по файлам - это возможность вывести инфу о файле, например имя или размер.

спасибо за проделанную работу :)

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

Здравствуйте! В одном проекте столкнулся с необходимостью иметь две таких галереи. Картинки лежат в разных нодах типа gallery. Но views добавляет к каждой ноде определенного типа один и тот же набор картинок. Не подскажете, как изменить ваш views, чтобы выбрать картинки из определенной галереи и добавить к определенной ноде? Нужны аргументы или фильтры?

вопроса не понял. если нужны аргументы - используйте аргументы, если нужны фильтры - соответственно фильтры

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

Прикрученный к такой галерее Fancybox почему-то не хочет показывать навигационные кнопки и выполнять навигацию... Не подскажете почему?

Благодарю.

что за навигационные кнопки?

Добавлю: в Лайтбоксе все ОК.

Во всплывающем окне плагина(Fancybox) с увеличенным изображением есть стрелочки "вперед-назад".

для создания галереи нужно одно значение атрибута rel у всех ссылок на изображения
http://fancybox.net/howto

Разобралась, спасибо.

Прощу прощения, а не подскажете как в процессе темизации добраться до ссылок на картинки? Не могу определить, какой функцией они формируются или в каком шаблоне можно изменить этот вывод. Нашла только вывод img.

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

для Drupal 7,,, ни подскажите

Alexstyle, Пнд 01/04/2013 - 17:15 #
для Drupal 7,,, ни подскажите

Я сделал так: http://www.drupal.ru/node/100287

у картинок можно включить alt, title и description

никак не могу обнаружить эти поля во views, поля активированы в типе материала и заполнены

в общем, я так понял поля title, alt не показываются в представлениях, выводить можно только через темизацию соответствующего поля

в общем, я так понял поля title, alt не показываются в представлениях, выводить можно только через темизацию соответствующего поля

Да в стандартных полях не вывести, можно и через темизацию, но можно проще:
В настройках поля изображения "ПЕРЕЗАПИСАТЬ РЕЗУЛЬТАТЫ"
ставим галочку "Заменить выводимое полем значение"
И там с помощью токенов делаем нужную разметку и пользуемся подстановочными шаблонами, вот список, в нем в том числе и title, и alt есть:

[title] == Содержимое: Заголовок
[body] == Содержимое: Body
[field_image] == Содержимое: Image
[field_image-fid] == Сырая колонка fid
[field_image-alt] == Сырая колонка alt
[field_image-title] == Сырая колонка title
[field_image-width] == Сырая колонка width
[field_image-height] == Сырая колонка height

Оставить комментарий

Содержимое этого поля является приватным и не будет отображаться публично. Если у вас есть аккаунт в Gravatar, привязанный к этому e-mail адресу, то он будет использован для отображения аватара.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Доступные HTML теги: <a> <i> <b> <strong> <code> <ul> <ol> <li> <blockquote> <em> <s>
  • Строки и параграфы переносятся автоматически.
  • Подсветка кода осуществляется с помощью тегов: <code>, <css>, <html>, <ini>, <javascript>, <sql>, <php>. Поддерживаемые стили выделения кода: <foo>, [foo].

Подробнее о форматировании