1

Tengo un slider de imágenes que es arrastrable. Estas imágenes tienen implementada la biblioteca Lity, la cual se utiliza para abrir un lightbox cuando el usuario hace clic en cada imagen.

El problema es que no puedo arrastrar las imágenes para navegar por el slider porque Lity se activa cada vez que suelto el clic después de arrastrar las imágenes.

Me gustaría saber si hay alguna manera de evitar eso. Necesito que Lity se active solo cuando hago clic en la imagen, pero no cuando la arrastro.

Esta es la biblioteca JavaScript Lity a la que me refiero.

También dejé este issue en Github para ver si alguien puede ayudarme allí.

¡Gracias!

Este es el código que tengo. Pero aquí no hay nada muy relevante. Solo un foreach para imprimir las imágenes y el atributo data-lity en cada una, que es lo que activa el 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>

Nota: la biblioteca de JavaScript Lity funciona bien, excepto por el problema descrito, y la biblioteca de JavaScript del slider (que se llama Flickity) también me funciona bien, la funcionalidad de arrastrar funciona perfectamente. Y no tengo errores en la consola.

Si algo no está claro, por favor déjame un comentario con tu pregunta.

¡Gracias!

1 respuesta 1

0

Después de darle mil vueltas y probar muchas cosas, llegué a la única solución que me funcionó. (Puse la pregunta ayer pero en realidad llevo más tiempo dándole vueltas)

  • Del HTML original solo quité el <a> y el atributo data-lity para que no se lance por defecto. Dejé solo la imagen.

  • A la imagen le agregué un nuevo atributo data-high-res para almacenar ahí la URL que se abrirá cuando el lightbox de Lity se lance.

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

Como no puedo utilizar el evento click típico, porque este se va a lanzar también cuando arrastro, lo hice con la ayuda de los eventos de la librería que uso para crear el slider.

Esta librería se llama Flickity, y me di cuenta que tiene un evento propio llamado staticClick que reacciona a un click estático, es decir sin movimiento. Según la documentación oficial:

introducir la descripción de la imagen aquí

Entonces, yo tenía el slider inicializado de esta manera:

   smallSliderElem.forEach(element => {
      const flick = new Flickity(element, smallSliderOptions);
   });
  • Y lo que hice fue anclarme al evento staticClick y lanzar el Lity manualmente en ese momento, quedando así el 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);
    });
    
      });
    

Como todo está en un foreach que puede crear muchos sliders, con el if garantizo que solo se lance el Lity en los sliders que tengan el atributo data-high-res.

Espero que esto ayude a las personas que usan el Lity y Flickity a la vez y se hayan encontrado con el mismo problema.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.