AJAX'y Plone 4中的图像弹出框

Question

Pipbox表示它是“Plone 4兼容的方式来完成Plone 3中的AJAX弹出窗口”。

http://plone.org/products/pipbox

那么，什么是在Plone 4做jQuery的工具图像的弹出式窗口的正确方法？

• 扫描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提供的预览比例为内容区域中的图像设置lightbox风格弹出窗口。 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并将其转换为预览。