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