Search code examples
javascripthtmlsliderlightbox

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

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

Solution

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

    enter image description here

    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.