轮播图允许您向Plone网站中的任何部分添加用户可配置的旋转横幅。
项目描述
简介
Carousel 是一个用于在任何 Plone 网站部分展示一组旋转横幅图片的工具。功能
可以在网站的各个部分使用不同的横幅集合。
横幅可以链接到网站中的另一个页面或外部 URL。
Carousel 提供了自定义横幅外观以及过渡长度和类型的选项。
可选的分页器提供横幅间的导航。
过渡效果使用 Plone 包含的 jQuery JavaScript 库实现,因此它们相当轻量。
鼠标指针悬停在 Carousel 上时,横幅不会旋转。
横幅和分页器模板可以注册以自定义 Carousel 的外观。
Carousel 实现了 jQuery 事件,允许与自定义 JavaScript 集成。
Carousel 图片可以懒加载,如果整个横幅循环未显示,则可以节省用户和服务器带宽。
Carousel 图片可以随机显示。
兼容性
Carousel 需要 Plone 3.0 或更高版本,主要是因为它自己在视图小部件中渲染。
安装
将 Products.Carousel 添加到 buildout 的 eggs 列表中,并重新运行 buildout。如果在运行 buildout 时遇到版本冲突,您可以使用已知的好版本集来找到与 plone.app.z3cform 兼容的版本
http://good-py.appspot.com/release/plone.app.z3cform/0.5.0-1?plone=4.0.2
启动 Zope,转到 Plone 网站的“网站设置” -> “附加产品”,并安装 Carousel 产品。
使用轮播图
有关使用 Carousel 的详细指南,请参阅 此处。
详细概述和测试
自定义轮播图
可以通过注册横幅和分页器的自定义模板来自定义 Carousel 的展示。为了简化 Carousel 模板及其相关菜单项的注册,Carousel 包含特殊的 ZCML 指令。首先,在产品的 configure.zcml 中定义 Carousel XML 命名空间
xmlns:carousel="http://namespaces.plone.org/carousel"
然后加载 Carousel 的 ZCML
<include package="Products.Carousel" />
最后,注册您的模板
<carousel:banner name="banner-example" template="banner-example.pt" title="Default" /> <carousel:pager name="pager-classic" template="templates/pager-classic.pt" title="Title and Text" />
横幅和分页器指令还可以接受一个 layer 属性,以限制模板的可用性到特定的浏览器层。
为了使横幅和分页模板的开发更加简洁,Carousel 在横幅基模板和分页基模板中包含了宏。有关如何使用这些宏的示例,请参阅 banner-default.pt 和 pager-titles.pt。
轮播图事件
Carousel 在其操作的关键点触发 jQuery 事件,使得它能够与其他页面的交互元素集成。这些事件在 Carousel 容器元素上触发
- afterAnimate
在动画开始之前立即触发。它传递 Carousel 对象、上一个横幅的索引和当前横幅的索引作为参数。
- beforeAnimate
在动画开始之前立即触发。它传递 Carousel 对象、当前横幅的索引和动画结束后将要激活的横幅的索引作为参数。
- pause
当动画暂停时触发,例如当用户将鼠标悬停在 Carousel 上时。它将 Carousel 对象作为其参数。
- play
当动画开始或继续时触发。它将 Carousel 对象作为其参数。
作为事件处理程序的第一个可选参数传递的 Carousel 对象是一个封装了 Carousel 当前状态的 JavaScript 对象。有关 Carousel 对象的详细信息,请参阅 carousel.js。
要将回调绑定到 Carousel 的事件之一,请选择 Carousel 容器元素,并在其上调用 jQuery bind 方法
(function ($) { $('.carousel').bind('afterAnimate', function (event, carousel, old_index, new_index) { console.log(carousel); console.log(old_index); console.log(new_index); }); })(jQuery);
测试
要运行测试,请参阅 .travis.yml。
发布版本
示例
# Install zest.releaser in venv and activate that venv fullrelease
支持
对于使用和开发相关的问题,请使用 stackoverflow.com
在 Github 项目 中报告错误和补丁
变更历史
3.0.2 (2017-04-11)
通过添加 Products.PloneTestCase 作为测试依赖项,在 4.3 版本中修复了测试。 [maurits]
3.0.1 (2017-03-07)
从接口中删除了标签,以修复权限错误。
将宽度和高度添加到横幅对象中,因为我们无法从宏中访问视图。
修复了一些小错误,并更新了 MANIFEST.in [jladage]
3.0 (2017-03-06)
为横幅添加了 Retina 支持。只需上传双倍大小的图片即可。因此,如果您将 Carousel 设置为 800x350 像素,现在可以上传大小为 1600x350 像素的图片。在 Retina 屏幕上,您的横幅将具有更多的细节。
使用 @@images 生成到具有在 Carousel 选项中定义的尺寸的缩放图像的 url。这提高了加载速度,因为它们被永久缓存在浏览器中。它还防止用户使用过大的图片。
模板现在有两个尺寸,一个用于常规屏幕,另一个用于 Retina 版本的 2x 图像,并在 srcset 属性中定义它。当使用懒加载时,JavaScript 简单地添加 srcset。
从本版本开始,不再支持 Plone 3。
[jladage]
添加了 z3c.autoinclude-entrypoint 以将其标记为 Plone 插件。这避免了显式加载 zcml-slug 的需要。 [WouterVH]
添加了巴西葡萄牙语翻译。 [lepri]
添加了德语翻译。 [pabo3000]
更新了内容类型的图标:Carousel 横幅。 [taito]
在创建横幅文件夹时,通过 ISelectableConstrainTypes 适配器设置 exclude_from_nav 和限制类型,以与 plone.app.contenttypes (Dexterity) 文件夹兼容。 [danjacka]
2.2.1 (2013-03-15)
修复了悬停时的错误。 [kroman0]
2.2 (2012-12-12)
添加了对显示和隐藏 carousel 视图的支持。 [taito]
懒加载 carousel 图像 [miohtama]
不要显示 carousel 图像上的 <img alt=""> 文本,因为它会导致部分加载的 carousel 图像产生混淆 [miohtama]
添加了复选框以启用懒加载 carousel 图像。 [kroman0]
添加了复选框以随机化显示图片的顺序 [miohtama]
添加了对 Plone 4.3 的兼容性 [davilima6]
2.1 (2011-09-06)
更新了 i18n 辅助脚本,以反映当前翻译。 [yomatters]
添加了芬兰语翻译。 [datakurre]
允许具有站点管理员角色的用户默认添加 Carousel 横幅。 [davisagli]
添加了集体.googleanalytics跟踪插件,用于跟踪横幅点击。[yomatters]
添加了荷兰语翻译。[jladage]
2.1b3 (2011-01-19)
将默认横幅更改为首先使用图片URL,然后回退到上传的图片。[yomatters]
使Carousel尊重横幅文件夹的顺序。[yomatters]
修复了滑动Carousel的动画逻辑。[yomatters]
使链接URL成为可选的。[yomatters]
添加了输入外部图片URL的能力,而不是上传图片。[yomatters]
修复了影响未发布Carousel文件夹的权限问题。[yomatters]
修复了Carousel横幅查找,以便尊重横幅查看权限。[yomatters]
修复了影响包含ID为“carousel”但不是Carousel文件夹的项目的文件夹的bug。[yomatters]
2.1b2 (2010-12-08)
修复了Plone 3上的javascript错误。[yomatters]
2.1b1 (2010-12-06)
修复了已知良好版本设置链接。[yomatters]
使添加和修改横幅的说明更加突出。[yomatters]
添加了设置Carousel ID的选项。[yomatters]
2.0 (2010-11-19)
将插件拆分为函数,使覆盖Carousel行为的一部分更容易。[yomatters]
2.0b1 (2010-09-30)
添加了滑动作为可能的过渡类型。[yomatters]
重构javascript作为jQuery插件,触发过渡时的jQuery事件。[yomatters]
添加了设置横幅和翻页器外观以及过渡长度和类型的选项。[yomatters]
添加了可选的翻页器,用于在横幅之间导航。[yomatters]
将Carousel横幅上的描述字段替换为富文本正文字段。[yomatters]
移除浏览器层,以帮助在Plone 2.5中使用。[davisagli]
1.1 (2010-03-26)
在Plone 4中,默认将视图小部件添加到上述内容视图小部件管理器中,以避免奇怪的样式。[davisagli]
添加了西班牙语翻译。[tzicatl]
在Carousel中仅显示已发布的横幅,即使用户有查看其他横幅的权限也不例外。[davisagli]
1.0 (2009-03-31)
更改了文本链接的行为,使其在鼠标悬停时交换横幅。[davisagli]
1.0b3 (2009-02-07)
将“Carousel横幅”添加到不进行搜索的类型中。[davisagli]
正确定位用作默认页面的容器(例如,主题)上的carousel文件夹。[davisagli]
为横幅类型的getSize和tag方法应用适当的权限声明,以便在TTW定制时视图可以正常工作。[davisagli]
仅在默认视图中显示carousel;不在任何其他选项卡中。[davisagli]
修复了卸载时视图小部件移除的问题。[davisagli]
修复了快速安装器中的重复条目。[davisagli]
1.0b2 (2009-02-04)
声明我们自定义GS导入步骤对视图步骤的依赖。[davisagli]
将(全局注册的)模板与(本地注册的)视图小部件分开,这样就可以使用portal_view_customizations对前者进行定制。[davisagli]
将横幅描述添加到模板中。将“carousel-title”类更改为“carousel-button”,这样我就可以将“carousel-title”和“carousel-description”分开。[davisagli]
正确处理非结构化文件夹。[davisagli]
1.0b1 (2009-02-03)
初始发布。[davisagli]
贡献者
David Glick [davisagli],Groundwire,作者
Matt Yoder [yomatters],Groundwire
Noe Nieto [tzicatl],NNieto CS,西班牙语翻译
Taito Horiuchi [taito]
Mikko Ohtamaa [miohtama]
Roman Kozlovskyi [kroman0]
Gustavo Lepri [lepri],巴西葡萄牙语翻译
Jean-Paul Ladage [jladage],Zest Software
Maurits van Rees [maurits],Zest Software
项目详情
Products.Carousel-3.0.2.tar.gz的哈希值
算法 | 哈希摘要 | |
---|---|---|
SHA256 | 5011da5ea987da2f9787078c670988fe937128d705ce933d75b50a2646928de7 |
|
MD5 | 87fe13692ac1cb466e8be429b75988ba |
|
BLAKE2b-256 | f6c33840f6f41672bb2eb22cd02b06c6e3c2ce637a6d705c0e7a67bd17df69b0 |