Is there a way to avoid Lity library fires when dragging an image that use Lity?

Question

I have a draggable slider of images. These images have Lity library implemented which is used to open a lightbox when the user click on every image.

The problem is that I'm unable to drag the images to navigate through the slides because Lity triggers every time I release the click after draggin images.

I would like to know if there is a way to avoid that. I need Lity to trigger only when I click the image, but not when I drag it.

This is the Lity javascript library I refer.

I also left this issue on Github to see if someone can help me there.

Thank you!

This is the code I have. But there is not much relevant here. Only a foreach loop to print the images and the data-lity attribute on each one, which is what activates the lightbox.

<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>

Note: the Lity js library is working ok, except for the described problem and the slider js library is also working well, the dragging functionality works perfect. And I don't have console erros.

If something is not clear, please leave me a comment with your question.

Thanks!!

Answer 1

After giving it a lot of thought and trying many things, I arrived at the only solution that worked for me. (I posted the question yesterday, but in reality, I've been thinking about it for a longer time.)

• From the original HTML, I only removed the <a> tag and the data-lity attribute so it wouldn't trigger by default. I left only the image.

• To the image, I added a new attribute called data-high-res to store the URL that will open when the Lity lightbox is triggered.

  <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>
  

Since I can't use the typical click event because it will also trigger when dragging, I did it with the help of events from the library I use to create the slider.

This library is called Flickity, and I realized it has its own event called staticClick that responds to a static click, meaning without movement. According to the official documentation:

So, I had the slider initialized like this:

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

• And what I did was attach to the staticClick event and manually trigger Lity at that moment, resulting in the JavaScript code like this:

  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);
    });
  
    });
  

Since everything is in a foreach loop that can create many sliders, I ensure that Lity is only launched on sliders that have the data-high-res attribute.

I hope this helps people who are using Lity and Flickity together and have encountered the same issue.