plone - Plone 4 中的 AJAX'y 图像弹出窗口

Question

Pipbox 说这是“在 Plone 3 中执行 AJAX 弹出窗口的 Plone 4 兼容方式”。

http://plone.org/products/pipbox

那么，在 Plone 4 中执行 jQuery Tools 图像弹出窗口的正确方法是什么？

使用选择器扫描 HTML 图像

安装点击处理程序

单击后，使用来自 plone.app.imaging

的预定义尺寸之一在弹出窗口中打开图像

Answer 1

pipbox 真正做的就是在 Plone 3 中加载 plone.app.jquerytools 支持。在 Plone 4 中，内置了 plone.app.jquerytools。

plone.app.jquerytools 加载 jQuery 工具和一些 Plone 特定的对简单 AJAX 弹出窗口的支持。该支持允许您将 AJAX 弹出窗口与 jQuery 可选页面组件相关联。见 the PYPI page获取完整文档。

一个简单的例子:假设您想使用 plone.app.imaging 提供的预览比例为内容区域中的图像设置灯箱样式的弹出窗口。 JS做到这一点是:

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

您可以通过将 javascript 资源注册为皮肤或浏览器层来加载此代码，然后将其添加到 portal_javascripts js 资源中。

编码:

设置一个函数在页面准备好时加载，“jQuery”别名为“$”；

选择页面中使用可视化编辑器使用的样式的所有图像项；

调用 prepOverlay 例程(来自 plone.app.jquerytools)将它们与叠加层相关联；

指定覆盖将是图像，这意味着可以从加载的图像中确定大小信息；

做一些正则表达式匹配和替换以获取图像 URL 并将其转换为预览。