How to enable lazy load for Owl carousel
-
if( has_post_thumbnail() ){ $full_image_data = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_id() ), 'full' ); $medium_image_data = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_id() ), 'classifieds-ad-single' ); $tiny_image_data = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_id() ), 'classifieds-ad-owl-thumb' ); $get_image_alt_tag = get_the_title($post->ID); $first_image .= '<a class="single-ad-image item-'.esc_attr__( $img_counter ).'" href="'.esc_url( $full_image_data[0] ).'" data-toggle="lightbox" data-gallery="example-gallery">'; $first_image .= '<img src="'.esc_url( $medium_image_data[0] ).'" width="'.esc_attr__( $medium_image_data[1] ).'" height="'.esc_attr__( $medium_image_data[2] ).'" alt="Images of '. $get_image_alt_tag.'">'; $first_image = apply_filters( 'bj_lazy_load_html', $first_image ); $first_image .= '</a>'; $columns = ceil( ( sizeof( $ad_images ) + 1 ) / 3 ); $item_count++; } if( !empty( $ad_images ) ){ foreach( $ad_images as $ad_image ){ $full_image_data = wp_get_attachment_image_src( $ad_image, 'full' ); $owl_items[$current_column] .= '<div class="img-owl-wrap"><a href="'. $full_image_data[$current_column] .'" data-toggle="lightbox" data-gallery="example-gallery">'.wp_get_attachment_image( $ad_image, 'classifieds-ad-owl-thumb', false, array( 'class' => 'single-ad-thumb', 'data-item' => $img_counter ) ).'</a></div>'; $owl_items[$current_column] = apply_filters( 'bj_lazy_load_html', $owl_items[$current_column] ); } }
How do I lazy load the thumbnails of carousel. My first thumbnail is lazy loading but the rest of the thumbnails are not loading.
Below is the code responsible for showing the thumbnails.
$owl_items[$current_column] .= '<div class="img-owl-wrap"><a href="'. $full_image_data[$current_column] .'" data-toggle="lightbox" data-gallery="example-gallery">'.wp_get_attachment_image( $ad_image, 'classifieds-ad-owl-thumb', false, array( 'class' => 'single-ad-thumb', 'data-item' => $img_counter ) ).'</a></div>'; $owl_items[$current_column] = apply_filters( 'bj_lazy_load_html', $owl_items[$current_column] );
- The topic ‘How to enable lazy load for Owl carousel’ is closed to new replies.