Plone 4 中的 AJAX 图像弹出窗口

Question

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

http://plone.org/products/pipbox

那么，执行 jQuery Tools 图像弹出的正确方法是什么克隆人 4 中的升级？

• 使用选择器扫描 HTML 中的图像

• 安装点击处理程序

• 单击时使用预定义尺寸之一在弹出窗口中打开图像来自 plone.app.imaging

Answer 1

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

加载 jQuery 工具和一些针对简单 AJAX 弹出窗口的特定于 Plone 的支持。该支持允许您将 AJAX 弹出窗口与 jQuery 可选择的页面组件相关联。请参阅PYPI 页面以获取完整文档。

一个简单的例子：假设您想使用 plone.app.imaging 提供的预览比例为内容区域中的图像设置灯箱样式的弹出窗口。 JS 执行此操作的方法是：

jQuery( function($) {
  $('img.image-right, img.image-left, img.image-inline')
    .prepOverlay({
      subtype: 'image',
      urlmatch: '/image_.+
您可以通过将 javascript 资源注册为皮肤或浏览器层来加载此代码，然后将其添加到 Portal_javascripts js 资源中。
代码：

设置一个在页面准备好时加载的函数，“jQuery”别名为“$”；
选择页面中使用可视化编辑器使用的样式的所有图像项；
调用 prepOverlay 例程（来自 plone.app.jquerytools）将它们与覆盖层关联起来；
指定覆盖将是图像，这意味着可以从加载的图像中确定大小信息；
执行一些正则表达式匹配和替换来获取图像 URL 并将其转换为预览。

,
      urlreplace: '/image_preview'
      });
});

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

代码：

1. 设置一个在页面准备好时加载的函数，“jQuery”别名为“$”；
2. 选择页面中使用可视化编辑器使用的样式的所有图像项；
3. 调用 prepOverlay 例程（来自 plone.app.jquerytools）将它们与覆盖层关联起来；
4. 指定覆盖将是图像，这意味着可以从加载的图像中确定大小信息；
5. 执行一些正则表达式匹配和替换来获取图像 URL 并将其转换为预览。