有没有办法在拖动使用 Lity 的图像时避免 Lity 库发生火灾？

Question

我有一个可拖动的图像滑块。这些图像实现了

Lity

库，用于在用户单击每个图像时打开灯箱。

问题是我无法拖动图像来浏览幻灯片，因为每次我在拖动图像后释放单击时，Lity 都会触发。

我想知道是否有办法避免这种情况。我需要 Lity 仅在单击图像时触发，而不是在拖动图像时触发。

这是 Lity javascript 库 我指的是。

我还在 Github 上留下了这个问题，看看是否有人可以帮助我。

谢谢！

这是我的代码。但这里没有太多相关的内容。只有一个

foreach

循环来打印图像和每个图像上的

data-lity

属性，这就是激活灯箱的原因。

<div class="small-slider__slider">
<?php
foreach ( $args['screenshots'] as $screenshot ) : ?>
    <article class="small-slider__item">
        <div class="post__image">
            <?php if ( ! empty( $src_low_res ) || ! empty( $src_high_res ) ) : ?>
                <a data-lity href="<?php echo esc_url( $src_high_res ); ?>">
                    <img loading="lazy" src="<?php echo esc_url( $src_low_res ); ?>" alt="<?php echo esc_attr( $alt ); ?>">
                </a>
            <?php endif; ?>
        </div>
    </article>
    <?php
endforeach;
?>
</div>

注意：

Lity

js库工作正常，除了所描述的问题之外，滑块js库也工作良好，拖动功能完美。而且我没有控制台错误。

如果有不清楚的地方，请给我留言并提出您的问题。

谢谢！！

Answer 1

经过深思熟虑并尝试了很多事情后，我找到了唯一适合我的解决方案。 （我昨天提出了这个问题，但实际上我已经想了很长时间了。）

• 在原始 HTML 中，我只删除了

  <a>

  标签和

  data-lity

  属性，因此默认情况下不会触发。我只留下了图像。

• 对于图像，我添加了一个名为

  data-high-res

  的新属性来存储触发 Lity 灯箱时将打开的 URL。

  <div class="small-slider__slider">
  <?php foreach ( $args['screenshots'] as $screenshot ) :
  $src_low_res  = esc_url( $screenshot['src_low_res'] );
  $src_high_res = esc_url( $screenshot['src_high_res'] );
  $alt          = ! empty( $screenshot['alt'] ) ? esc_attr( 
  $screenshot['alt'] ) : 'Screenshot of plugin: ' . esc_attr( 
  $args['post_title'] ); ?>
  <article class="small-slider__item">
  <div class="post__image">
      <?php if ( ! empty( $src_low_res ) || ! empty( $src_high_res ) ) : 
  ?>
          <img data-high-res="<?php echo esc_url( $src_high_res ); ?>" loading="lazy" src="<?php echo esc_url( $src_low_res ); ?>" alt=" 
          <?php echo esc_attr( $alt ); ?>">
      <?php endif; ?>
  </div>
  </article>
  <?php endforeach; ?>
  </div>
  

由于我无法使用典型的

click

事件，因为它也会在拖动时触发，因此我借助用于创建滑块的库中的事件来完成此操作。

这个库称为 Flickity，我意识到它有自己的事件，称为

staticClick

，它响应静态点击，意味着没有移动。根据官方文档：

所以，我像这样初始化了滑块：

   smallSliderElem.forEach(element => {
      const flick = new Flickity(element, smallSliderOptions);
   });

• 我所做的是附加到 staticClick 事件并在那一刻手动触发 Lity，导致 JavaScript 代码如下：

  smallSliderElem.forEach(element => {
  const flick = new Flickity(element, smallSliderOptions);
  
  flick.on( 'staticClick', function( event, pointer, cellElement, cellIndex ) {
    if('undefined' === typeof event.target.dataset.highRes) {
      return;
    }
    Lity(event.target.dataset.highRes);
    });
  
    });
  

由于所有内容都在可以创建许多滑块的 foreach 循环中，因此我确保仅在具有

data-high-res

属性的滑块上启动 Lity。