README

hyva-photo-swipe

在PhotoSwipe库中实现Hyvä Theme for Magento 2

您不再需要担心如何在Hyvä Theme for Magento 2项目中实现PhotoSwipe。
无需操作，安装后即可立即使用。

PhotoSwipe允许您创建全屏滑块、可缩放和完全可自定义。

根据Hyvä文档，库是懒加载的，不会影响性能。

工作原理 • 安装 • 使用 • 更多模块

工作原理

该模块仅在所有使用DOM中PhotoSwipeLightbox类（由PhotoSwipe提供）的页面加载PhotoSwipe
（类）。

当库在页面上加载完毕后，存储在Alpine.store中的状态将被更新，表示PhotoSwipe已准备好使用。

此状态也可以用来在任何时候强制加载库，以下是一个使用forceLoad()的示例。

安装

要求

• Hyvä Magento 2 Theme

composer require blackbird/hyva-photo-swipe

php bin/magento setup:upgrade

在生产模式下，请务必重新编译和重新部署静态资源。

使用

安装模块后，只需添加创建滑块的所需HTML代码，不要忘记为每个子元素指定data-pswp-width和data-pswp-height。

<div id="my-gallery">
  <a href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/2/img-2500.jpg" 
    data-pswp-width="1669" 
    data-pswp-height="2500" 
    target="_blank">
    <img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/2/img-200.jpg" alt="" />
  </a>
  <a href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/7/img-2500.jpg" 
    data-pswp-width="1875" 
    data-pswp-height="2500" 
    target="_blank">
    <img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/7/img-200.jpg" alt="" />
  </a>
  <a href="https://unsplash.com" 
    data-pswp-src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/3/img-2500.jpg"
    data-pswp-width="2500" 
    data-pswp-height="1666" 
    target="_blank">
    <img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/3/img-200.jpg" alt="" />
  </a>
</div>

接下来，创建一个函数来监听Alpine.store状态is_loading，表示PhotoSwipe已加载，并将PhotoSwipe应用于HTML元素，如PhotoSwipe文档中所述。

不要忘记填写重要的选项

• gallery：父画廊节点的查询选择
• children：重复节点的子元素查询选择
• pswpModule：只需提供PhotoSwipe

<?php
use \Blackbird\HyvaPhotoSwipe\Api\HyvaPhotoSwipeInterface;
?>
<script>
    function myXData () {
        return {
            initPhotoSwipe() {
                if (Alpine.store('<?= HyvaPhotoSwipeInterface::HYVA_PHOTO_SWIPE ?>').is_loaded) {
                    new PhotoSwipeLightbox({
                        gallery: '#my-gallery',
                        children: 'a',
                        pswpModule: PhotoSwipe,
                        ...options
                    }).init();
                }
            }
        }
     }
</script>

您可以根据此处所示指定PhotoSwipe的任何选项

最后，设置x-data指令，并在x-effect中调用之前的函数，以防止在库加载之前应用PhotoSwipe，并允许在库加载时自动应用。

<div id="my-gallery" x-data="myXData()" x-effect="initPhotoSwipe">
  ...
</div>

完整示例

<?php
use \Blackbird\HyvaPhotoSwipe\Api\HyvaPhotoSwipeInterface;
?>
<div id="my-gallery" x-data="myXData()" x-effect="initPhotoSwipe">
  <a href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/2/img-2500.jpg" 
    data-pswp-width="1669" 
    data-pswp-height="2500" 
    target="_blank">
    <img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/2/img-200.jpg" alt="" />
  </a>
  <a href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/7/img-2500.jpg" 
    data-pswp-width="1875" 
    data-pswp-height="2500" 
    target="_blank">
    <img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/7/img-200.jpg" alt="" />
  </a>
  <a href="https://unsplash.com" 
    data-pswp-src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/3/img-2500.jpg"
    data-pswp-width="2500" 
    data-pswp-height="1666" 
    target="_blank">
    <img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/3/img-200.jpg" alt="" />
  </a>
</div>
<script>
    function myXData () {
        return {
            initPhotoSwipe() {
                if (Alpine.store('<?= HyvaPhotoSwipeInterface::HYVA_PHOTO_SWIPE ?>').is_loaded) {
                    new PhotoSwipeLightbox({
                        gallery: '#my-gallery',
                        children: 'a',
                        pswpModule: PhotoSwipe,
                        ...options
                    }).init();
                }
            }
        }
     }
</script>

您可以根据此处所示指定PhotoSwipe的任何选项

示例：使用forceLoad()

想象以下场景：在你的DOM中没有包含由库提供的调用PhotoSwipeLightbox类的脚本，而你想在用户动作触发时添加它。

在这种情况下，PhotoSwipe不会默认加载到页面上，你需要明确请求加载PhotoSwipe。

Alpine.store('<?= HyvaPhotoSwipeInterface::HYVA_PHOTO_SWIPE ?>').forceLoad()

或者

$store.<?= HyvaPhotoSwipeInterface::HYVA_PHOTO_SWIPE ?>.forceLoad()

要了解具体使用哪一个，请参阅官方Alpine文档中的$store或Alpine.store。

这将强制库在页面上加载，即使没有脚本调用PhotoSwipeLightbox类。然后你可以遵循经典的用法过程来应用PhotoSwipe。

更多模块

hyva-splide-js：Hyvä主题为Magento 2实现的SplideJS库，高度优化和可定制的滑块。