Del HTML original solo quité el
<a>
y el atributodata-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 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.