bootstrap modal issue

  • Hi — Generally speaking, this plugin is fantastic! Thank you.

    I do have one issue right now, though:

    On many pages, I use bootstrap modals that are shown on click. When the modal is triggered, the image inside the modal just shows the spinner.

    I see that the “lazy-hidden” class remains until something else is clicked on.

    I tried getting around this by using “no-lazy” in the “skip image classes” setting and adding that class to the images in the modal.

    However, that’s not working.

    Assuming you’re not a member of our website, you can see what’s happening on this page by clicking on the big image in the red alert box (Watch This Video Now!): https://topspeedtennis.com/topic/3-1-boost-serve-speed-bow-arrow-drill/

    Ideally, I could use lazy load on the image in the modal, but I’m fine if those images don’t use this functionality. Right now, I can’t do either.

    Thanks,
    Josh

    https://www.ads-software.com/plugins/a3-lazy-load/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Contributor Nguyen Tuan

    (@nguyencongtuan)

    Hi Stepfret

    I don’t know about bootstrap modal you are saying, don’t see it from your example page you give

    But like what you said, you are using “no-lazy” in the ‘skip images classes’ setting and adding that class to the images in the modal, so did you added ‘no-lazy’ into the input of ‘skip images classes’ or you leave empty it ?
    You need to added ‘no-lazy’ into the input of ‘skip images classes’

    Regards,
    Nguyen

    Hi Josh, have you solve it? Same case. Any tips are needed. Thanks!

    Thread Starter stepfret

    (@stepfret)

    Hi pandanapande — I solved it in a way suitable to my needs.

    In the end, the image does NOT lazy load. If that’s ok with you, here’s what I did…

    I had been using

    echo get_the_post_thumbnail( get_the_id(), 'medium' );

    to get the image I wanted, and Lazy Load adds the classes, etc. needed for lazy loading to the image when that is used. This caused the problem.

    However, when I used the code below, Lazy Load plugin ignored it:

    $thumb_id = get_post_thumbnail_id();
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'medium', true);
$thumb_url = $thumb_url_array[0];

    I hope that helps!
    Josh

    Yep, got it. But I found javascript solution to fix the problem.

    Most of lazy-load-scripts depend on window scroll event, so I added this:

    `$(‘.modal’).on(‘scroll’, function(e){
    $(window).trigger(‘scroll’);
    });`

    Now everything’s ok even inside of bootstrap modals!

    Regards

    Thread Starter stepfret

    (@stepfret)

    Cool — I’m terrible with javascript; so, I didn’t even think of trying it.

    But I might use this in the future. Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘bootstrap modal issue’ is closed to new replies.