Всплывающие окна с изображениями AJAX'ы в Plone 4 - PullRequest
Новая
       3

Всплывающие окна с изображениями AJAX'ы в Plone 4

3 голосов
/ 14 февраля 2012

Pipbox заявляет, что это «Plone 4-совместимый способ создания всплывающих окон AJAX в Plone 3».

http://plone.org/products/pipbox

Итак, как правильно сделать jQuery Toolsups в Plone 4?

  • Сканирование HTML для изображений с помощью селектора

  • Установить обработчик клика

  • При нажатии открыть изображение во всплывающем окне, используя один из предопределенных размеров из plone.app.imaging

1 Ответ

11 голосов
/ 14 февраля 2012

Все, что на самом деле делает pipbox - это загружает поддержку plone.app.jquerytools в Plone 3. В Plone 4 встроен plone.app.jquerytools.

plone.app.jquerytools загружает jQuery Tools и некоторую специфичную для Plone поддержку для простых всплывающих окон AJAX. Эта поддержка позволяет связывать всплывающие окна AJAX с компонентами страниц, выбираемыми с помощью jQuery. См. страницу PYPI для полной документации.

Быстрый пример: допустим, вы хотите настроить всплывающие окна в стиле лайтбокса для изображений в области содержимого, используя масштаб предварительного просмотра, предоставленный plone.app.imaging. JS сделать это: 

jQuery( function($) {
  $('img.image-right, img.image-left, img.image-inline')
    .prepOverlay({
      subtype: 'image',
      urlmatch: '/image_.+$',
      urlreplace: '/image_preview'
      });
});

Вы должны загрузить этот код, зарегистрировав ресурс javascript в качестве обложки или слоя браузера, а затем добавить его в js-ресурсы portal_javascripts.

код:

  1. Устанавливает функцию для загрузки, когда страница готова, с «jQuery» с псевдонимом «$»;
  2. Выбирает все элементы изображения на странице, которые используют стили, используемые визуальным редактором;
  3. Вызывает подпрограмму prepOverlay (из plone.app.jquerytools), чтобы связать их с оверлеями;
  4. Указывает, что наложениями будут изображения, что означает, что информация о размере может быть определена из загруженного изображения;
  5. Выполняет небольшое сопоставление и замену регулярного выражения, чтобы подобрать URL изображения и преобразовать его в предварительный просмотр.
...