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和一些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资源注册为外观或浏览器层来加载此代码,然后将其添加到portal_javascripts js资源中.

代码:

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