README

Jonnitto.PhotoSwipe

此包将 PhotoSwipe 集成到 Neos CMS

所需的HTML标记

与选择器 a.lightbox 匹配的每个元素都必须具有以下属性

• 图像URL在 href 或 data-pswp-src 属性中（后者优先级更高）。
• 图像宽度在 data-pswp-width。
• 图像高度在 data-pswp-height。

可选的

• 链接元素内的 <img> 缩略图，在加载大图像之前显示
• 如果缩略图被裁剪，则可选的 data-cropped="true" 属性。另请参阅 从裁剪缩略图动画。PhotoSwipe API 支持几乎所有标记和任何数据源，在此了解更多信息。

示例

<a
  class="lightbox"
  data-pswp-width="2560"
  data-pswp-height="1200"
  href="path/to/image.jpg"
  >...</a
>

JavaScript变量

有一个全局变量在初始化时被设置

neosPhotoSwipe 此对象存储 PhotoSwiper 的 lightbox 变量。（用于调用 lightbox.init() 的变量）。有了这个，您可以添加自己的 事件监听器 或触发 方法。

JavaScript事件监听器

如果您分发事件 neos-photoswipe:init，所有类型的灯箱都会被初始化。如果您在 AJAX 环境中工作，这将非常有用。您还可以激活特定类型的灯箱： neos-photoswipe.images:init、neos-photoswipe.fetch:init 或 neos-photoswipe.template:init。

示例

window.dispatchEvent(new Event('neos-photoswipe:init'));

修改生成的标记

向PhotoSwipe容器添加自定义属性

您可以通过这种方式向PhotoSwipe容器添加自定义属性

Jonnitto:
  PhotoSwipe:
    additonalPswpContainerAttributes:
      data-turbo-temporary: true
      class: 'my-custom-class'

向错误获取消息中的链接添加自定义属性

Jonnitto:
  PhotoSwipe:
    fetchAttributeErrorMessages: 'data-pswp-type="fetch" data-turbo="false"'

安装

大多数情况下，您必须对包进行一些小的调整（例如，在 Settings.yaml 中的配置）。因此，将相应的包添加到您的主题包的 composer 中非常重要。通常这是位于 Packages/Sites/ 下的网站包。要正确安装它，请转到您的主题包（例如 Packages/Sites/Foo.Bar）并运行以下命令

composer require jonnitto/photoswipe --no-update

--no-update 命令防止自动更新依赖项。在将包添加到您的主题 composer.json 之后，返回 Neos 安装的根目录并运行 composer update。就是这样！您想要的包现在已经正确安装。