[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);

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

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

Похожие

Для чего нужен QR-код?
... символов Кэндзи / Кана QR-код стал чрезвычайно популярным в Японии. Практически единственным ограничением использования QR-кодов является наше воображение. Недавно компания Mercedes-Benz выступила с новой идеей использования QR-кодов. Идея заключается в том, чтобы вставить в автомобиль QR-код, ссылающийся на техническую схему автомобиля. Таким образом, после сканирования QR-кода спасатели вместо поиска по карточкам скорой помощи получат подробные инструкции о том, как помочь находящимся
Как исправить инфекцию Windows с помощью Linux
Если вы используете Linux на настольных или серверных компьютерах вашей компании, вы уже знакомы со многими преимущества безопасности операционная система с открытым исходным кодом предлагает своим конкурентам Windows и Mac. Однако многие не понимают, что Linux также можно использовать для спасения компьютера, поврежденного вредоносным ПО. Вредоносное ПО - частое явление, в
Как собрать мини-ITX игровой ПК Ryzen
Компьютеры не должны быть большими, чтобы быть мощными. Хотя выбор ПК небольшого форм-фактора когда-то требовал снижения скорости системы, последние технологические достижения сократили даже мощное оборудование ПК до пакетов размером с пинту. Показательный пример: 6-ядерный 12-ниточный игровой компьютер mini-ITX, который мы создаем после недавнего появления AMD Снижение
БЛИК - удобные платежи. Как это работает?
Стоит использовать инновационные технологические решения. Эти проверенные, авторизованные могут сделать жизнь проще и сэкономить много времени. К ним относятся платежи BLIK, которые вы можете использовать для оплаты дома и в интернет-магазинах, снимать наличные в банкомате и осуществлять переводы на свой телефон. Как это работает? Проверьте! Что такое сервис BLIK? BLIK - это польская система мобильных платежей, доступная в мобильных приложениях отдельных банков. Система
Как связать ваш Android-смартфон с Windows 10
Знаете ли вы, что вы можете связать свой смартфон Android с Windows 10, чтобы создать удобное взаимодействие между двумя устройствами? После настройки вы можете просматривать веб-страницы, использовать приложения, отправлять электронные письма и выполнять другие задачи на своем смартфоне, а затем легко переключаться на свой ПК и выполнять те задачи, на которых остановились. В этой статье мы объясним вам, как начать работу с этими последними функциями в Windows 10.
Что такое хостинг? Как выбрать лучший хостинг?
... ственная цена, которую мы должны понести, когда начинаем с нашего собственного сайта. Для правильной работы сайта нам также необходимо приобрести хостинг. Как работают планы хостинга? От чего зависит их цена? Что будет работать для нашего сайта или интернет-магазина? Хостинг - что это? Каждый сайт нуждается в подключении к серверу для правильной работы. Это физическая машина, подключенная к интернету и работающая круглосуточно. Веб-хостинг
Как вы обновляете свою садовую мебель весной?
Разная мебель - разные требования Современная садовая мебель может быть изготовлена ​​из различных материалов. Самые популярные, конечно, деревянная садовая мебель Тем не менее, плетеная и ротанговая мебель, а также металлическая и пластиковая мебель и сочетание нескольких различных материалов также очень популярны среди владельцев садов. В зависимости от типа садовой мебели, существуют разные
Как восстановить историю браузера после очистки
Каждый переход пользователя по Интернет сайтам сохраняется в истории браузера Вместе со всеми деталями: время пребывания и названием поиска. Данная история доступна пользователю и может в случае необходимости быть удалена: как полностью, так и отдельные поиски.
Как работать с файлами Audio CD .CDA
Если вы посмотрите содержимое музыкального компакт-диска из Windows, то увидите, что оно содержит несколько файлов .CDA, каждый из которых соответствует дорожке песни. (CDA означает компакт-диск Audio) Я регулярно получаю письма от подписчиков, спрашивающих, почему они не
Экономия воды в жилищных установках. Аккумулятор как копилка.
Рациональное управление водными ресурсами в квартирах может принести огромную экономию на потреблении воды и - в случае горячей воды - энергии, необходимой для ее приготовления. Подготовка горячей воды, сразу после центрального отопления, является второй потребностью в количестве потребляемой энергии. Поэтому крайне важно знать и знать, как использовать воду оптимальным образом. Объем потребления горячей воды в жилищном строительстве зависит, в частности, от нескольких факторов от:
Как обустроить столовую в гостиной или на кухне
... с Задать вопрос Синий цвет стульев - это освежающее зрелище, которое всегда напоминает воспоминания о лете, поэтому оно было на первом месте презентации. Цвет все еще менее распространен у нас, но он всегда производит на

Комментарии

Как это будет в тестах на прослушивание, как с точки зрения воспроизведения музыки, так и с точки зрения удобства ведения разговоров?
Как это будет в тестах на прослушивание, как с точки зрения воспроизведения музыки, так и с точки зрения удобства ведения разговоров? Проверьте, прочитав эту статью. Читать абсолютно >> Обзор беспроводной колонки Prestigio PBS7 ART AS-B11 - не первый докладчик, пришедший в редакцию. Он был уже
Но не бойтесь, потому что есть обходной путь: вспомните наш самый первый совет, когда мы говорили о том, как вы можете создать папку «Фото» на диске?
Но не бойтесь, потому что есть обходной путь: вспомните наш самый первый совет, когда мы говорили о том, как вы можете создать папку «Фото» на диске? Как только вы это сделаете, вы можете использовать значок «Вставить файлы с помощью диска» в Gmail, чтобы получить что угодно из фотографий через эту постоянно синхронизируемую папку . 32. Фото также имеет малоизвестную ссылку на YouTube, если вам когда-нибудь захочется поделиться некоторыми своими видео с «Оскаром» в этом
Как создается защитный код карты?
Как создается защитный код карты? Коды генерируются отдельно для каждой карты на основе алгоритма шифрования, который учитывает банковский номер банка и срок его действия: 'panel_number' = 'data_value''algorithm'. Полученные таким образом данные приводятся к десятичным числам, а последние три или четыре цифры кода печатаются на обратной стороне карты. Код CVC2 / CVV2 и код CVC1 / CVV1 Стоит знать, что каждая платежная карта защищена двумя разными кодами. Они
Как создать пространство, чистое по форме, экономичное по цветам и в то же время чрезвычайно функциональное?
Как создать пространство, чистое по форме, экономичное по цветам и в то же время чрезвычайно функциональное? Проверьте наши идеи и вдохновение модная ванная в минималистском стиле!
Как часто вы можете изменить лозунг?
Как часто вы можете изменить лозунг? Как это хорошо изменить? Это легко - вы должны сделать это как Apple. Хорошо хорошо и по уважительной причине. Нет разговоров о маркетинге или реклама не может обойтись
Как это реализовать на практике, для оформления сайта?
Как это реализовать на практике, для оформления сайта? Об этом вы узнаете на нашем bootcamp. Вы узнаете секреты RWD, изучите Bootstrap и шаг за шагом напишете полный адаптивный дизайн сайта. Благодаря RWD: вы создадите четкую и понятную страницу при просмотре на мобильных устройствах у пользователей не возникнет проблем с этим
Как чешские горожане стали женой польского короля?
Как чешские горожане стали женой польского короля? Голубая кровь не циркулировала в ее венах. Она не имела благородного происхождения или королевской собственности. Что же тогда имела Кристина Рокичана? Она была соблазнительной соблазнительницей. И агент враждебной разведки. Читать дальше ... Книжный магазин - Matras.pl Matras.pl - современный
Как это руководство Dropshipping для чайников поможет мне?
Как это руководство Dropshipping для чайников поможет мне? Наше руководство по дропшиппингу поможет вам понять, насколько легко открыть собственный магазин. Иногда трудно начать что-то, что кажется очень сложным, но это руководство по дропшиппингу для чайников разбивает проект на простые шаги, чтобы вы могли быть успешными с самого начала. наш руководство по дропшиппингу является полным и охватывает каждый шаг, который вам
Как использовать благородное сырье, чтобы придать вашей квартире дизайнерский шик?
Как использовать благородное сырье, чтобы придать вашей квартире дизайнерский шик? Сегодня вместе с брендом Harmonick мы узнаем, что покрыто модным плащом, шалью с пепиткой или хлопковыми вешалками для полотенец! После господства скучных и простых решений, спрятанных где-то в углу зала, модели, притягивающие взгляд, входят в интерьер! Сегодня это объекты для настоящих ценителей дизайна, ценителей искусства и любителей оригинального и неповторимого! Посмотрите сами, как вешалка может
Как выглядит стратегия для наших клиентов?
Как выглядит стратегия для наших клиентов? Подготовка стратегии SEO - это поэтапный процесс, который состоит из нескольких важных этапов. Мы начинаем с изучения бизнеса клиента Этот шаг может показаться ненужным, но знакомство с бизнес-целями оказывает огромное влияние на то, как в конечном итоге будет выглядеть стратегия. Мы стараемся узнать как можно больше информации, которая может повлиять на сайт клиента в поисковых системах. Мы ориентируемся
Предположим, вам нужно преобразовать футы в дюймы, футы в мили, футы в метры, футы в сантиметры или наоборот в Excel, как быстро преобразовать эти единицы измерения?
Предположим, вам нужно преобразовать футы в дюймы, футы в мили, футы в метры, футы в сантиметры или наоборот в Excel, как быстро преобразовать эти единицы измерения? Эта статья содержит несколько сложных способов помочь вам быстро преобразовать единицы измерения между футами в дюймы, футами в мили и футами в футах в Excel. Пример может быть проще для понимания.

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?
Как это работает?