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

Question

Pipbox称它是“Plone 4兼容的方式在Plone 3中进行AJAX弹出窗口”。

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 Tools以及一些针对简单AJAX弹出窗口的Plone特定支持。该支持允许您将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资源中。

代码：

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